Jump to content

Announcement Bar Colour

Recommended Posts

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;
}

 

Link to comment

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

 

 

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
  • 11 months later...

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

Link to comment
  • 7 months later...
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.