Change the Color of Scrolling Text in Squarespace

Jul 12

Scrolling text, also known as a marquee effect, is a visually engaging way to draw attention to important announcements, promotions, or updates. While Squarespace 7.1 offers built-in scrolling text blocks in some templates, many users want to customize the text color to match their brand identity better.

If you’ve ever asked,
“How do I change the default scrolling text color in Squarespace?” This blog is your complete, professional solution.

Understanding the Scrolling Text Block in Squarespace

In Squarespace 7.1, scrolling text is typically implemented using:

The Scrolling Text Block is available in templates like Clune, Paloma, or Devoe
A manually created Announcement Bar
A custom Code Block or third-party plugin (less common)

Regardless of the method, you may notice that Squarespace doesn’t provide direct color controls inside the scrolling block settings.

Method 1: Style Scrolling Text with Site Styles (No Code)

If you’re working WITH Squarespace’s own native Scrolling Text Block, THIS is the no-code solution:

Step-by-Step Instructions:

Jump to the page with your Scrolling Text Block
Mouse over the block and select the edit option
In the Block Settings panel, search for Color Theme
Select from your site’s available themes:

Light
Dark
Accent
Custom

✦ These colors are taken from your site’s global color palette specified at:

Design → Site Styles → Colors

If your text still doesn’t meet your needs, consider the advanced approach by following the next method.

Method 2: Change Scrolling Text Color with Custom CSS (Advanced Control)

For full control over scrolling text color, spacing, font weight, and background, use the Custom CSS panel.

How to Apply Custom CSS:

Go to Pages → Custom code → Custom CSS
Paste the following code snippet:


/* Custom color for Squarespace scrolling marquee text */
div.marquee-block * {
    color: Red !important;
}
/* Optional: Add background color */
.sqs-block-marquee {
  background-color: #F0F9FF; /* Soft blue background */
  padding: 10px 0;
}

✦ Replace #1E40AF and #F0F9FF with your own HEX codes.

How to Identify the Marquee Block on Your Site

If you're unsure of the correct class name to target:

Right-click the scrolling text on your page
Click Inspect or Inspect Element
Look for classes like:

.marquee-block *
.sqs-block-marquee

Use these in your CSS to ensure precise targeting and styling.

Pro Tips for a Better Marquee Experience

  
      Goal
      Pro Tip
    
      Match brand identity
      Use exact HEX codes from your logo or brand palette
    
      Subtle scroll
      Use lighter text on dark backgrounds or vice versa
    
      Responsive design
      Avoid large fonts in marquee blocks; keep it readable on mobile
    
      Animation speed
      Keep scroll speed medium — fast marquee can be hard to read

Final Thoughts

The default scrolling text in Squarespace is a fantastic feature, but with a bit of customization, you can elevate it from “good” to professionally branded.

By following the steps above, you can:

Change the text color
Add a background
Adjust font styles and weight
Match your site’s tone perfectly, all in a few minutes

Frequently Asked Questions

1. Can you change the color of the scrolling text without having to code it?

Yes! If you are using Squarespace's Scrolling Text Block (available in templates like Clune, Paloma, or Devoe), you can adjust color by choosing a Color Theme within the block settings. These themes would be from the overall Site Styles color palette.

2. Why does the color keep the old value when I change the theme from inside the scrolling block?

It’s probably because your site’s color theme presets (Design → Site Styles → Colors) are set to something other than the color you desire your text to be. Then you can customize it with CSS all you want!

3. What is the CSS class for text scrolling on my website?

You can find it by:

By right-clicking the scrolling text block in my live site
To Inspect Element (in Chrome or Firefox)
Seeking class names such as. marquee-block or. sqs-block-marquee

It is an example of class names that you can use to target the right block in Custom CSS.

4. Is it possible to add the background colour behind the text that is scrolling?

Absolutely! Although the default block may lack a background composition option, simply apply a background color, padding, or gradient behind your text marquee and voilà, branded marquees!

5. Will it be nice on mobile, my scrolling text customizations?

Yes—if done correctly. To ensure mobile readability:

Your text size should be moderate (as long as it's not too large)
Strong color contrast (light-on-dark, or dark-on-light) is good.
Skip janky scroll-based animations that are unreadable on small sizes

Try your text across different devices to make sure it looks visually balanced and readable.