Announcement Bar Colour

Site URL: https://www.suziappelphoto.com.au

Hi,

Can I use CSS to set the colour for the announcement bar? 

I want the background to be the same as the Header but with a white font colour not how it currently is.

This is in 7.1 and I cannot find where to customise it.

Thanks,

Leanne

could you please share the link of your website?

Suziappel.com.au

Pw Suzi

On your custom CSS paste:

To change the background:

.sqs-announcement-bar-url {
background-color: #040534;
}

To change the text:

.sqs-announcement-bar-text p, .sqs-announcement-bar-text a {
color: #ffffff;
}

And, to change the "X" to close the announcement bar:

.sqs-announcement-bar-close {
color: #ffffff;
}

Thanks Erika! 🙂

Hi Erika! I had the same problem in 7.1 but what is strange is that a week ago I was able to change the color of background and text of the announcement bar by going into the color theme of my header section, scrolling down to the announcement bar section within that color theme, and changing the color of the background and the text right there (no CSS required). And then for the last couple days I have been trying to change the color and text of the announcement bar again by going to the same place but when I change the color there it doesn't reflect on the bar. I tried to refresh, close and come back, quit my browser etc but still no luck. Then I stumbled upon your code above. It worked for the background color but not for the text color. What am i doing wrong? 

Quote

 

21 hours ago, frenchpoulette said:

Hi Erika! I had the same problem in 7.1 but what is strange is that a week ago I was able to change the color of background and text of the announcement bar by going into the color theme of my header section, scrolling down to the announcement bar section within that color theme, and changing the color of the background and the text right there (no CSS required). And then for the last couple days I have been trying to change the color and text of the announcement bar again by going to the same place but when I change the color there it doesn't reflect on the bar. I tried to refresh, close and come back, quit my browser etc but still no luck. Then I stumbled upon your code above. It worked for the background color but not for the text color. What am i doing wrong? 

 

Can you share site url? We can check easier.

Thanks, I would have figured it out, but easier to look up. You'd think this would be a pretty standard this to have a customization setting for, Squarespace.

Actually that combination didn't quite work for me.  Had to do this:

.sqs-announcement-bar {
background-color: #ab1313;
}

.sqs-announcement-bar-text {
  color: #fff;
}

...fyi anyone else using this thread:

When I changed the background using the code above .sqs-announcement-bar-url then the text disappeared and I also couldn't change the text color. But when I used the code .sqs-announcement-bar nothing happened. The solution was to change the background using the code .sqs-announcement-bar and add !important. At that point my text reappeared and I was able to change its color as usual in the site styles area without additional code.

On 1/20/2022 at 12:01 PM, jallory said:

...fyi anyone else using this thread:

When I changed the background using the code above .sqs-announcement-bar-url then the text disappeared and I also couldn't change the text color. But when I used the code .sqs-announcement-bar nothing happened. The solution was to change the background using the code .sqs-announcement-bar and add !important. At that point my text reappeared and I was able to change its color as usual in the site styles area without additional code.

I was having trouble with this for days. This solution worked! Thanks!