How to customize archive block links

Ever feel like your archive block links could use a little pizzazz? Same- it’s why I created this code!

We're going to jazz up those group names and archive item links by adjusting their font size, color, and weight (how bold it is) using custom code.

The codes you need are below, and if you are new to customizing with code, you’ll find more information on how to use them in Squarespace.

/* Customizing group name links */
.archive-group-name-link {
  font-size: 18px;
  color: #4a4a4a;
  font-weight: 600;
}

/* Customizing archive item links */
.archive-item-link {
  font-size: 16px;
  color: #007bff;
  font-weight: 400;
}

The example image for this tutorial has some creative capitalization, letter spacing, and a border. This code will recreate that same style on your own site.

archive-group-name-link {
text-transform:uppercase!important;
font-weight:bold;
letter-spacing: 2rem;
padding-bottom: 5rem;
border-bottom:1px solid #000
}

Important update: Squarespace made changes to the program menu in May 2025. If your menu looks different than the video, press the / key to open the program search and search for Custom CSS to navigate there directly.

 
insidethesquare

Squarespace Circle Leader & Creator of InsideTheSquare.co

https://insidethesquare.co
Previous
Previous

How to add bullet points to an archive block

Next
Next

How to customize accordion block divider lines in Squarespace