How to Customize Category Links in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In a Squarespace blog post, you can have links to blog categories shown on the individual post page.

Here in this blog, you’ll see three links above the title. Those are category links that I styled to look like clickable buttons, complete with hover effects, using the same CSS techniques you can learn from this tutorial!

If you are using an older version of Squarespace, you’ll need different codes.

Check the bottom of this post for the selectors used in Brine as well as Bedford.

Here are the codes from this tutorial:

This will give a background color, border, and padding to a category link. Change anything in bold so that it matches the style of your site!

.blog-meta-item--categories a {
background: yellow;
border: 1px solid #000;
padding: 0 .5rem;
border-radius: 1rem;
}

This code will add the hover effect. Any color, typography, or font settings can be used here to make that link stand out on a hover.

.blog-meta-item--categories a:hover {
background: #000!important;
color: #FFF!important;
}

---

If you are using an older version of Squarespace, update the text .blog-meta-item--categories in the code above to the selector for your theme family below

Brine Theme

.archive-group-list

Bedford Theme

.archive-item-link