How to customize your Squarespace blog navigation links

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 this tutorial, I am going to show you how to change the color and style of your previous and next controls in your Squarespace blog.

These are pretty simple changes so this is the perfect tutorial if you are just getting started with CSS.

If you are a pro and just want the element names, I get ya. You’ll find the custom CSS underneath this video, but be sure to watch the tutorial so you know how to use them and what parts to update!

---

Squarespace 7.1 Codes

Remove the arrow

.item-pagination-link .item-pagination-icon{display:none}

Change arrow color (arrows only)

.item-pagination-icon svg{stroke: #50bdb8!important}

Hide post title

.item-pagination-title{display:none}

Change blog post title color

.item-pagination-title{color: #50bdb8!important}

Change post title size

.item-pagination-title{font-size: 1rem!important}

Change the background of the pagination options

.item-pagination {background-color: #50bdb8!important}

Squarespace 7 Codes

Change arrow color

.tweak-blog-item-pagination-link-icon-show .BlogItem-pagination-link-icon{stroke:#50bdb8}

Remove text (arrows only)

.BlogItem-pagination-link-content{display:none}

Remove links (Arrows & text)

.tweak-blog-item-pagination-link-icon-show .BlogItem-pagination-link-icon, .BlogItem-pagination-link-content{display:none}

Remove Labels (previous & next)

.tweak-blog-item-pagination-link-label-show .BlogItem-pagination-link-label {display:one}

Solid Underline for Labels

.tweak-blog-item-pagination-link-label-show .BlogItem-pagination-link-label {border-bottom:1px solid #50bdb8}

Title Color

.tweak-blog-item-pagination-link-title-show .BlogItem-pagination-link-title {color:#50bdb8}