How To Customize Summary Block Fonts in Squarespace
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Summary blocks let you display content for collections, like blog posts, videos, events, and more, on any page on your site. While it’s a great feature, the options for updating the style of this block are seriously lacking 😳
In this tutorial, you’ll learn how to change the style of the Summary block text using custom CSS!
If you are brand new to CSS, definitely check out my free guide to CSS basics before you start this tutorial.
Click here to open my CSS basics guide in a new tab, so you wont lose this one!
Under this video you’ll find the selectors I used to change the summary block, and links to other resources that can help you make Squarespace uniquely yours.
.summary-title{
font-size:30px!important;
font-weight: bold;
}
.summary-excerpt{font-style:italic}
.summary-read-more-link{text-transform:uppercase;
font-weight: bold}
.summary-metadata *{text-transform:uppercase!important}
Here is the list of selectors used in the video:
Summary Block Title (carousel only): .summary-header-text
Summary Item Title: .summary-title
Excerpt: .summary-excerpt
Read More Link: .summary-read-more-link
All Metadata: .summary-metadata *
Primary Metadata: .summary-metadata--primary *
Secondary Metadata: .summary-metadata--secondary *
To access my full list of Squarespace selectors, visit insidethesquare.co/css
⚙️ Chrome extension for the block id (not affiliated, just a fan!)
🔡 Free list of font & text properties
🔗 How to install CSS in one page on your Squarespace site
🔗 How to target one section on your Squarespace site with CSS