How to Add a Custom Text-Highlight Color to Your Squarespace 7.1 Website

A custom text highlight color fun, simple tweak that add such a nice touch your website’s aesthetics, which is why I add this strip of custom CSS to every Squarespace site I design.

Why add a custom text highlight color?

When someone is selecting text and interacting with text on your site, they will see this splash of your brand’s color that contributes to their site experience. This is important because your website is your digital home, and as such, every detail should reflect your brand’s personality and style.

It's these small details that can leave a lasting impression and make your site feel cohesive and thoughtfully designed.

Show your visitors that you’ve thoughtfully crafted every aspect of their journey through your site. Snag the code below:

Step 1: Access Your Custom CSS

1. In your Squarespace dashboard, navigate to the left sidebar under Website and click on Pages.

2. Scroll down and select Custom CSS to open the CSS editor.

Step 2: Add Your Code

Now, you’re going to add some CSS code to style your scrollbar. Don’t worry if you’re not a coding whiz – we’ll walk you through it!

1. Copy and paste the following code into the Custom CSS box:

// CUSTOM TEXT HIGHLIGHT COLOR //

::selection {
  background: #D7B6A3;
  color: #1F1F1F;}
::-moz-selection {
  background: #181818;
  color: #FFFFFF;}

2. Customize the colors to match your brand. For example, replace #eae9e0 with your brand’s primary color.

Step 3: Preview and Save

1. Take a look at the preview of your website to see your new scrollbar in action.

2. If everything looks great, click Save to apply the changes.

Adding code to your Squarespace website doesn’t need to be daunting and you can check out the rest of my Squarespace resources to help you get to grips with adding custom code to your website.

---

Frequently Asked Questions

• Will this customization affect my site's performance?

  Nope! Adding custom CSS for the text-highlight color has a negligible impact on your site’s performance.

• Can I revert to the default scrollbar if I change my mind?

  Absolutely! Just update the color codes in the Custom CSS section to your new desired colors.

• Are there any restrictions on text-highlight customization in Squarespace?

  Customizing your site's text highlight color is relatively straightforward, but I recommend always to test changes across different devices when adding custom CSS to ensure a consistent user experience.