CHANGE BACKGROUND COLOR FOR ANNOUNCEMENT AND E-MAIL SIGN UP BAR IN DAWN THEME

Solved

CHANGE BACKGROUND COLOR FOR ANNOUNCEMENT AND E-MAIL SIGN UP BAR IN DAWN THEME

orrabie
Excursionist
32 1 1

Hi,

I'm trying to change the background color of my announcement and e-mail sign-up bars. I tried doing this in the theme settings by selecting the inverse color but it keeps changing the color of my fonts. I hope there is a way I can set the colors for the background without having any effect on my font colors.

My site: urbanpawpets.com 

Accepted Solutions (2)

GemPages
Shopify Partner
5625 1262 1248

This is an accepted solution.

Hello @orrabie 

It's GemPages support team and glad to support you today.

 

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code below: 

 

#shopify-section-announcement-bar .gradient{
  background: #ff9a01;
}

 

Let us know how it works for you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

harivishwakarma
Shopify Partner
322 46 55

This is an accepted solution.

@orrabie 
add this css
input#NewsletterForm--template--17277858054427__57bbe6a6-e0c9-4003-b70a-12d7b4dda461 {
background: red;
}

 

banned

View solution in original post

Replies 10 (10)

harivishwakarma
Shopify Partner
322 46 55

Hallo @orrabie 

You can add code by following these steps to change

1. Go to Online Store -> Theme -> Edit code > assets > base.css

paste below code at bottom(base.css)

 

.announcement-bar.color-inverse.gradient {
background: red;
}

 

If you require any further information, feel free to contact me.

Best regards,

banned

GemPages
Shopify Partner
5625 1262 1248

This is an accepted solution.

Hello @orrabie 

It's GemPages support team and glad to support you today.

 

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code below: 

 

#shopify-section-announcement-bar .gradient{
  background: #ff9a01;
}

 

Let us know how it works for you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
orrabie
Excursionist
32 1 1
Hello,

Thanks for reaching out. I believe this code applies to only the
announcement board, I will appreciate if you could help out with the code
for the newsletter sign-up bar as well.

Regards,
harivishwakarma
Shopify Partner
322 46 55

@orrabie 

add this css

.newsletter__wrapper.color-inverse.gradient.content-container.isolate.content-container--full-width.section-template--17277858054427__57bbe6a6-e0c9-4003-b70a-12d7b4dda461-padding {
background: red;
}

 

please like and accept solution

banned
orrabie
Excursionist
32 1 1

Hi, 

It did work out, but the email capture bar is still in black. I have attached a capture for reference.

harivishwakarma
Shopify Partner
322 46 55

This is an accepted solution.

@orrabie 
add this css
input#NewsletterForm--template--17277858054427__57bbe6a6-e0c9-4003-b70a-12d7b4dda461 {
background: red;
}

 

banned
orrabie
Excursionist
32 1 1

Thanks for your help guys, it worked out!

harivishwakarma
Shopify Partner
322 46 55

@orrabie 

Your kind words have just made my day 😁.

banned

PageFly-Victor
Shopify Partner
7865 1786 3108

Hi @orrabie 

 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

 

PageFlyVictor_0-1675764030570.png

 

<style>

#shopify-section-announcement-bar .gradient{ 
background: #ff9a01; 
}

.newsletter__wrapper.color-inverse.gradient.content-container.isolate.content-container--full-width.section-template--17277858054427__57bbe6a6-e0c9-4003-b70a-12d7b4dda461-padding {

background: #ff9a01;

}

</style>


Hope this answer helps.

Best regards,

Victor | PageFly

orrabie
Excursionist
32 1 1

Hi,

I did add it to the base.css and it worked out. Thanks for your help.