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:

 
 

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:

 
 

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