Announcement Bar

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

Select a Squarespace Element to Examine CSS Selectors: 

Squarespace Element Description
Announcement Bar Elements Refers to Announcement Bar elements.

 CSS Code Snippets for Customizing the Announcement Bar

Change background color of announcement bar

//Start: Change background color of announcement bar
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: red;
}
//End: Change background color of announcement bar

Change font color of announcement bar text

//Start: Change font color of announcement bar text
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
//End: Change font color of announcement bar text

Add a decorative emojis after the announcement text for American holiday/seasonal sales

This code snippet works better if you increase the font size from the default. This can be done in “Site Styles”.

Autumn

//Start: Announcement bar Autumn decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🍂"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #671e14;
}
//End: Announcement bar Autumn decorations

Winter

//Start: Announcement bar Winter decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "⛄"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
  font-size: 1.5em
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #5170bf;
}
//End: Announcement bar Winter decorations

Spring

//Start: Announcement bar Spring decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🌼"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
  font-size: 1.5em;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #046A38;
}
//End: Announcement bar Spring decorations

Summer

//Start: Announcement bar Summer decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🏖️"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #00a5e3;
}
//End: Announcement bar Summer decorations

New Year’s Day

//Start: Announcement bar New Year's Day decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🥂🎆"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #0f116b;
}
//End: Announcement bar New Year's Day decorations

Easter

//Start: Announcement bar Easter decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🐣🐰"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #0ca656;
}
//End: Announcement bar Easter decorations

Veteran’s Day

//Start: Announcement bar Veteran's decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🎖️"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #0f116b;
}
//End: Announcement bar Veteran's decorations

Holloween

//Start: Announcement bar Holloween decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "👻🎃"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #373038;
}
//End: Announcement bar Holloween decorations

Thanksgiving

//Start: Announcement bar Thanksgiving decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🦃"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #a44200;
}
//End: Announcement bar Thanksgiving decorations

Christmas

//Start: Announcement bar Christmas decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🎄🎅"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #6e040e;
}
//End: Announcement bar Christmas decorations

Independence Day (July 4th)

//Start: Announcement bar July 4th decorations
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p:after {
  content: "🥳🎊"
}
.sqs-announcement-bar-dropzone #announcement-bar-text-inner-id p, .sqs-announcement-bar-dropzone .sqs-announcement-bar-close:after {
  color: #ffffff;
}
.sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: #0f116b;
}
//End: Announcement bar July 4th decorations
Previous

Donation Blocks
Next

Promotional Pop-Up