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

[orrabie]

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 

[GemPages · 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

[harivishwakarma]

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,

[GemPages · 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

[orrabie]

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]

@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

[orrabie]

Hi, 

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

[harivishwakarma · Accepted solution]

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

[orrabie]

Thanks for your help guys, it worked out!

[harivishwakarma]

@orrabie 

Your kind words have just made my day 😁.

[PageFly-Victor]

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>

<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]

Hi,

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