Styling Bedford Blog Posts in Squarespace

CSS

UPDATE: I’ve redesigned my site and changed to another template, but this post still applies to Bedford templates.

My site uses the Bedford Squarespace template which is a great fit for my style and content. But there are a few features that don't work for me. Chief among these is the banner image on individual blog posts. For Bedford, and a few other themes, when you view a blog post at its direct URL, its post thumbnail image displays as a banner.

Because I use text on my thumbnail images, it ends up looking like the website equivalent of a dumpster fire:

 
Default Blog Post Thumbnail for Squarespace Bedford Template
 

Remove the Banner Image on Bedford Blog Posts

So, two options. First would be to hide the blog title. Easy enough, but I like having searchable text as my title. The second option that I settled on adds a line of code in Design > Custom CSS that hides the banner image.

/* don't show thumbnail as banner image behind blog post title (hard to read) */
.collection-type-blog .banner-thumbnail-wrapper {display: none !important;} .collection-type-blog .entry-title {display: block !important;}

And now my blog posts look like this:

 
Fixed blog post thumbnail for Squarespace Bedford template
 

Big improvement.

Hope this tip helps you!

Previous
Previous

How to add Social Media Icons to Squarespace Navigation

Next
Next

Styling PayPal Buttons in Squarespace