DIY | Library | Blog
Style Your Squarespace Blog with These CSS Tweaks
This post is all about styling your Squarespace CSS blog—from layout tweaks to image ratios and typography. Whether you’re looking to increase readability, align blog metadata, or adjust padding and margins, the accordion blocks below contain helpful CSS snippets to get you started. Each snippet is copy-and-paste ready and grouped by element type.
I’ll keep updating this post with new blog-specific tweaks as I discover or test more in my projects. Got questions or requests for a certain look? Email me at sarah@foubography.com.
-
/* Change blog category dividers */ span.blog-categories--comma { visibility: hidden; }
span.blog-categories--comma:after {
content: "•";
visibility: visible;
padding-right: 5px;
}
/* Change blog category dividers END */
-
/* Newer posts /
nav.blog-list-pagination .prev-label {
visibility: hidden;
}
nav.blog-list-pagination .prev-label:before {
visibility: visible;
content: "New prev text";
}
/ Older posts */
nav.blog-list-pagination .next-label {
visibility: hidden;
}
nav.blog-list-pagination .next-label:after {
visibility: visible;
content: "new next text";
}
Related posts
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.
