How can I add a white background to my announcement bar

can someone please help with code to add a white background and black text to my announcement bar? I have my background as transparent so I can have a gif as my background, but I want the announcement bar to be a solid color. any help would be appreciated!!

the password to enter my store is EXOTICFAMILY1

Hello @ExoticSouls ,

I would like to give you some recommendations to support you

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before

For example,

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

thank you, much appreciated!

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

Add this css code in your assets / base.css file:

.announcement-bar__message {background: #fff; color: #000;}

result

https://prnt.sc/dYqMEEFhlko1

also one more question, is there code to where i would be able to adjust to opacity?

Hello @ExoticSouls ,

You could use this code to replace the background color:

background: rgba(255, 255, 255, 0.7);

0.7 is the level of opacity. The maximum is 1 and the minimum is 0.

Best regards,
GemPages Support Team

1 Like

worked, thank you!

also last question if you don’t mind, how can I make it move sideways continusly like the site I linked below

https://8thwndr.com/collections/all-products

For This you need to add script

and how would I do that?

Hello @ExoticSouls ,

You can check out my suggestion below to get your concern resolved:

  1. Go to Online Store → Theme → Edit code
  2. Open your announcement-bar.liquid theme file
  3. Find announcement-bar__message and paste the tag at this position:

Best regards,
GemPages Support Team

1 Like

great that worked, how can I speed up the animation?

Hello @ExoticSouls ,

In order to speed up the animation, you can use “scrollmount” attribute. It will look like that:


In addition, you can read the article to know more other features of : https://www.w3schools.in/html/marquee-tag

Best regards,
GemPages Support Team

1 Like

thank you for your help, much appreciated

1 Like

Hello @ExoticSouls ,

It’s my pleasure to help.

Best regards,
GemPages Support Team