How To Customize Summary Block Fonts in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
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.
Video tutorial
Code Example
.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 *
