Jump to content

Announcement Bar Code Doesn't Work

Recommended Posts

Site URL: https://cranberry-kale-kent.squarespace.com

Hello!

I am trying to customize my announcement bar but none of the codes work. I have attached the current code I am trying to use, which is not working. I have tried to change the color and not do animation, and change it to an image, but nothing with the .sqs-announcement-bar code is working at all. I tried to go under site styles and make it transparent and get rid of the original color, but that didn't work either. Help! Website password: thefontparty

 

.sqs-announcement-bar {
background: linear-gradient(99deg, #ff6460, #ebeecf);
background-size: 400% 400%;
-webkit-animation: AnimationName 6s ease infinite;
-moz-animation: AnimationName 6s ease infinite;
animation: AnimationName 6s ease infinite;

@-webkit-keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}

@-moz-keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}

@keyframes AnimationName { 
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}

@-webkit-keyframes AnimationName {
0%{background-position:0% 49%}
50%{background-position:100% 52%}
100%{background-position:0% 49%}
}

@-moz-keyframes AnimationName {
0%{background-position:0% 49%}
50%{background-position:100% 52%}
100%{background-position:0% 49%}
}
@keyframes AnimationName { 
0%{background-position:0% 49%}
50%{background-position:100% 52%}
100%{background-position:0% 49%}
}}

Link to comment
  • Replies 5
  • Views 553
  • Created
  • Last Reply
  • 7 months later...

The following worked for me:

*Keep in mind first you have to activate the announcement bar.

For linear gradient:

.sqs-announcement-bar {
  background: linear-gradient(to left, #dd8d96 0%, #0d3ac7 100%) !important;
  }

For circular gradient:

.sqs-announcement-bar {
  background: radial-gradient(circle, #dd8d96 0%, #0d3ac7 100%) !important;
  }

*just change the color codes

Link to comment

Archived

This topic is now archived and is closed to further replies.

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