Just joining the party?

We’ve got a tonne of code snippets for you to get your hands on in the Squarespace CSS series!

But if I could make a teensie recommendation, I def encourage you to start with these two posts first:

Why start there?

If you’re new to CSS, reading these first will save you a lot of “deer in a headlight” feels as you work your way through the series and start trying to apply some of these changes to your site!

Also, if you’re new to Squarespace itself, it’s best to get a solid grasp on using the built-in features the platform has to offer before reaching for any CSS!

Want to know something I hear all the time from students of my Square Secrets course?

“I didn’t know you could do that without code!”

Yep!

Even designers who have been using the platform for years are legit shocked at what you are able to achieve without an ounce of custom coding if you know the secret workarounds and hacks!

(So if you need help mastering the platform before you dive into the world of custom coding, Square Secrets is for you!)

Alright, with that little bit of housekeeping out of the way, let’s dive in!

P.S. Don’t forget to give our CSS gurus some love over on their own site and social for so generously sharing their knowledge!!

CSS snippets & plugins for customizing your blog in Squarespace

1. How to customize your summary block blog post thumbnails in Squarespace using CSS

Method of CSS injection used: Universal

Blog beautification here we come! Starting with totally overhauling the look of our summary block blog thumbnails!

This fancy little CSS snippet comes to us from Michelle A.K.A MKW of MKW Creative!

I didn’t play too much with the colors or other customizable bits of the code when applying it to my mock site (because her example colors/font were ) but there really are quite a few things you could tweak to make this totally on-brand, and visually consistent with the rest of what you have going on your site and blog!

So go crazy!

WITHOUT CSS


With CSS

(Ta-da!)



2. How to add a reading time to your blog posts in Squarespace using CSS

Method of CSS injection used: Universal, Inline & Header Code Injection

If you’ve been hanging around the blog a while, you’ll have noticed I tend to write prettyyy long form content.

This is for two reasons:

1) Most of my content is tutorials or step-by-step. So 300 words probably isn’t going to be enough to explain “How to do xyz thing in Squarespace” and still have it be useful to my audience.

2) Google favors long form content because they know it is more likely to contain complete answers. Google desperately wants to get their recommendation right (the first time) without leaving searchers to piece it all together from multiple shorter sources!

BUT long-form content does take a little longer to consume, and you kinda have to be committed to get the answers you came for!

Want to give your readers a heads-up of just how much time they should set aside?

With this cool little Squarespace Plugin tutorial from Mary Phillip, you can!

P.S. Don’t forget to take some of what you learned in Squarespace CSS: 10 tips for customizing your site’s fonts & text blocks to really spice up the custom font settings for your reading time!

ie. changing style, weight, color, of your font! Like this!

//Customizing the font for reading time code block//

.reading-time {

font-size: 25px;

font-family: ‘Playfair Display‘;

color: #DFACA2;

font-weight: bold;

font-style: italic; }



3. How to hide social share buttons from blog posts in Squarespace using CSS

Method of CSS injection used: Universal

There’s nothing better than having a tribe full of people out there excitedly shouting out about your blog!

But if you have a bit of content meant for faithful readers, that you wouldn’t necessarily want repping your biz to first time readers discovering you on other platforms, it would be nice to have a way to sort of keep that content in the family.

Want complete control of which blog posts get shared?

Juniper & Roots is spilling the exact CSS you need in this post!

Oh, and in case you’re wondering, it’s these social sharing buttons this tutorial covers…the ones that live at the bottom of each post (not the Pin it buttons that appear over individual images!)



4. How to customize your blog post comment submit button in Squarespace using CSS

Method of CSS injection used: Universal

You’ve spent a lot of time making sure every last corner of your website screams you.

So why settle for any less for your blog post comments section?

Ghost Plugins CSS directory to the rescue! They have just the bit of CSS wizardry you need to quickly and easily swap out your comment button for something a little more on-brand!

Psssst! Don’t forget you can add in other button CSS properties to this snippet to further customize your buttons!

For example, rather than making it a solid color, why not play around with gradients using what you learned about gradient button backgrounds in Squarespace CSS: 10 tutorials for styling your site’s buttons and forms!

Like this…

//Gradient Blog Post Comment Button//

.comment-btn-wrapper .comment-btn {

background: linear-gradient(91deg, #DFACA2, #F2E6E4) !important;

font-family: montserrat !important;

font-size: 15px; }





5. How to customize your “previous” and “next” blog post pagination in Squarespace using CSS

Method of CSS injection used: Universal

Alright, so this one was a bitttt tricky!

No matter who’s code snippet or tutorial I followed, I couldn’t seem to get the dang arrows and text to change!

That’s CSS for you though, eh?

The closest I got was this bit of code from Rodvaldr.dev.

With just a few tweaks (read: happy accidents), I was finally able to get it up and working on my Brine Template Squarespace 7.0 site.

Here’s what ended up working for me…

//CUSTOMIZING blog pagination title font & color//

.BlogItem-pagination-link-title

{ font-family: montserrat ;

font-size: 20px;

font-weight: bold;

font-style: italic;

color: #DB9F9F; }

//changing blog pagination arrow icon color//

.BlogItem-pagination-link-icon

{ stroke: #DB9F9F; }

BEFORE


After


Oh, and if you have other elements in your blog post pagination that I don’t (like meta data, and “newer, older” labels) be sure to reference Rodvaldr.dev’s original post/snippets.

He has a few extra tricks up his sleeve beyond what I was able to show using my site as the example!


6. How to turn the blog summary “read more” link into a button in Squarespace using CSS

Method of CSS injection used: Universal

Becca from Inside the Square has done it again!

She’s delivering all the CSS goodies including a step-by-step video, and copy-and-paste CSS cheat sheet, with a handful of pre-made designer snippets for styling your blog!

The one I snagged for this example can be found in this video for Squarespace 7.1 users.

(Don’t worry, she didn’t forget 7.0 fans! You can find that tutorial here!)

Here’s what I was able to create using her cheat sheet base codes:

I did make a few tweaks by adding in some of the CSS properties we learned for buttons in Squarespace CSS: 10 tutorials for styling your site’s buttons and forms, and for text in Squarespace CSS: 10 tips for customizing your site’s fonts & text blocks.

It just goes to show you how even copy-and-paste snippets can totally be customized if you have the basics under your belt!



7. How to target entire blog pages vs. individual blog posts

Method of CSS injection used: Universal

I know, I know, not exactly the easy peasy grab-and-go snippet you came in search of, but nonetheless an uber important tutorial to read if you’re going to start making tweaks to your blog post pages or blog post content using custom CSS.

This is what will help you take everything you are learning and apply it to either:

A) One individual post where you want to see that change happen, orrrrr….

B) Blog wide!

So while the topic of the post is more function than fun, I def recommend setting aside the time to learn more of the ‘why’ and ‘how’ behind all these copy-and-paste code snippets you are storing away for later use!

Let’s give it up for Beatriz of Thirty Eight Visuals for once again bringing the A-Level CSS education!


8. How to customize your blog page fonts in Squarespace using CSS

Method of CSS injection used: Universal

This bit of CSS savvy is also from Thirty-Eight Visuals!

But I actually first discovered it in this round up post from Jodi Nuefeld (which is where you’ll find the simple copy-and-paste code for this example!)

Now, you do have some options for setting your blog page fonts in your site styles, but anything you change will be site wide!

If you have more than one blog on your site, or you need to customize the fonts for just one post, you can play with those fonts and colors using this snippet!

(And the tutorial for targeting entire blogs or individual posts from #7 above! Told you it would come in handy!)

Blog item title font CSS


Blog Post Title Font CSS



9. How to change the font color of one paragraph or text block in Squarespace using CSS

Method of CSS injection used: Universal

Okay, so obviously this one isn’t just for your blog, but that doesn’t make it any less handy to have in your CSS library!

You could use this bit of CSS in a blog post to:

  • Highlight a testimonial or quote

  • Highlight an important title or section

  • Add color to an otherwise monotone looking post!

Here’s a sneak peak of what’s possible with this simple tutorial from Sandra Houseman!



10. How to add a banner image to blog posts in Squarespace 7.1 & Squarespace 7.0 using CSS.

Method of CSS injection used: Universal, Inline & Header code Injection

Wishing you could stick a big jaw-dropping hero image at the top of every post you write?

Will Meyers is making all your blog post banner image dreams come true with these tutorial vids for both version 7.1 & version 7.0!

I could see this being super fun for photographers blogging about recent sessions, or really any industry that is super visually-focused!

Anyhoo, here’s an example of what it does!



You’ve totally nailed your design!

But tell me…does your site convert?

Ready to turn all those clicks into actual paying clients and customers?

Click below to get instant access to my most popular free training and learn the secrets to building a site that can sell in your sleep!

/


/

You’ll also love . . .

Squarespace CSS: 10 code snippets & plugins for customizing your site’s blog