Customize and add an image to your Squarespace announcement bar (7.0 & 7.1)

• 00
• 01
• 02
• 99

Are you using Squarespace’s announcement bar to point to your opt-in or as a CTA for visitors to take action on something?

Wanna make the info stand out more?

Then take a look at how you can make that happen by adding an icon, image, graphic, mockup or anything else you can think of, and restyling the content’s layout to create a unique look that matches your design!

In this week’s tutorial I’ll walk you step-by-step on how to set everything up, only with CSS.

We started out this customization during Livestream 03 (1:04:54), but I decided to make some additional adjustments to the final look and I’m really happy with how it turned out!

So, if this is something you want to implement on your current project, go ahead and dive right into it!

Tutorial

Overview & timestamps

I’ll be working in 7.1, but the same code can be used if you have a 7.0 (Brine family) site. There are a few steps to take to create the full look but, you can skip the ones you don’t need based on the final result you’re going for!

1. 00:00 - Intro

2. 00:44 - Overview of the existing content

   We’ll begin by looking at the existing text layout in the announcement bar, so you can follow along with the same code if you want to! You can also grab the same type of unicode arrow from here if you like.

3. 01:34 - Re-aligning the announcement bar text

   Once we have all the content in place, we’ll be hopping onto our Custom CSS window and get started with the left alignment of the text. We’ll look through the Inspector tool to see which container we can target to apply that change.

4. 04:24 - Adding an image to the announcement bar

   Next up, we’ll dive into the Inspect Element tool again to find a container where we can attach our pseudo-element, based on how we want the final result to look like. Then, we’ll use a few standard properties to create the empty fixed-size space to be able to bring in our icon as a background.

5. 08:39 - Repositioning the image

   To make sure the newly added icon and the text sit side by side at all times, we’ll use a Flexbox approach and make sure that everything’s neatly organized and centered vertically and horizontally within the announcement bar.

6. 09:54 - Customizing the arrow button inside bar

   After having our little illustration in place, we’ll move onto styling the unicode arrow as a round button, to add a little extra to the custom look of the announcement bar. We’ll be adding a background color, making the corners round and getting rid of the link underline with CSS.

7. 12:34 - Repositioning the content inside the announcement bar horizontally

   Next up we’ll tackle the “trickier” part of the entire customization. We’ll use CSS grid to be able to set the little arrow button to the side of the entire text inside the announcement bar. There are a couple of ways to make this happen but, even when the setup will require a couple of snippets, we’ll end up with a pixel-perfect result that will look fantastic on desktop and tablets!

8. 18:33 - Making mobile adjustments

   And of course, last but not least, we’ll take a look at mobile phones and make one or two tweaks to ensure that the content in the bar looks great at all times. I’ll remove the arrow button and expand the icon’s size, but you can make any modifications you choose based on the result you’re going for.
   

And that’s that! Once you’re done, you’ll have a super custom announcement bar on your site to showcase your opt-in!

Until next time,

B.

---

Full code

Note: in case you’re interested, the lovely little icon came from Icon Finder!

/*CUSTOMIZE AND ADD AN IMAGE TO YOUR SQUARESPACE ANNOUNCEMENT BAR (7.0 & 7.1)*/
//To restyle the content layout
.sqs-announcement-bar-text {
  align-items: center;
  display: flex;
  justify-content: center;
}
#announcement-bar-text-inner-id {
  align-items: center;
  display: grid;
  grid-template-columns: 90% 10%;
  text-align: left;
}
#announcement-bar-text-inner-id p:nth-child(2) {
  grid-column-start: 1;
}
#announcement-bar-text-inner-id p:nth-child(3) {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

//To add the image
.sqs-announcement-bar-text::before {
  background-image: url(ICON.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
  content: '';
  display: block;
  height: 100px;
  width: 100px;
}

//To style the arrow
#announcement-bar-text-inner-id a {
  align-items: center;
  background-color: rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  height: 50px;
  justify-content: center;
  text-decoration: none !important;
  width: 50px;
}

//Mobile styles
@media screen and (max-width: 767px) {
  #announcement-bar-text-inner-id  {
    display: block;
  }
  #announcement-bar-text-inner-id p:nth-child(3) {
    display: none;
  }
  .sqs-announcement-bar-text::before {
    width: 250px;
  }
}