Summary Blocks
Looking to customise your Squarespace site with code? This post is part of the DIY | LIBRARY —a growing collection of practical code snippets designed for Squarespace users who want to take control of their site’s design and functionality. Whether you’re tweaking your navigation, adjusting your mobile menu, or styling buttons, these copy-paste solutions are clean, reliable, and built with SEO and usability in mind. Bookmark this space for easy access to Squarespace custom code that works.
Just paste this bit of code in Design > Custom CSS and adjust accordingly.
-
/* Summary Block Title */
.sqs-block-summary-v2 { .summary-title, .summary-heading {
font-family: syne;
font-weight: 800;
font-size: 18px !important;
text-transform: uppercase;} }
/* Summary Block Title END */
-
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
text-align: justify;
} }
-
/* Summary Block Metadata */
.summary-metadata-item {
font-family: syne;
text-transform: uppercase !important;}
/* Summary Block Metadata END */
-
/* Remove Original Demeter */
.summary-metadata-item:after {
display: none;
}
/* Remove Original Demeter END */
/* Add New Demeter */
.summary-metadata--primary:after {
content: "|";
font-weight: 500;
padding-left: 0.25px;
padding-right: 4.5px;
}
/* Add New Demeter END */
-
.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats {
font-size: 0px !important;
}.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats a{
font-size: 10px !important;
font-family: 'Poppins';
}.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats a:not(:last-child):after{
content: "|";
visibility: visible;
padding-left: 8px;
padding-right: 8px;
}