How to Invert the Logo Color on Squarespace Blog Posts

CSS

Jun 11

This solution works for Squarespace 7.1. For Squarespace 7.0, scroll to the end of the post.

How to invert the logo color on Blog Post Pages in Squarespace 7.1

This doesn’t invert the logo color on the main blog page, only the individual post pages. In Squarespace 7.1, this solution requires the business plan because we will be adding code to the blog page header.

Step 1.

Go to your Blog’s Page Settings

Blog Page in Squarespace with Settings Cog Circled

Navigate to Advanced, then click Page Header Code Injection.

Blog Settings in Squarespace with Page Header Code Injection circled under Advanced

Step 2.

Paste in this code:

<style>
 .view-item .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Save your code. Your logo will now be inverted on blog post pages.

Only need the logo to invert on desktop and not mobile screens?

Use this code instead:

<style>
@media screen and (min-width: 801px) {  
.view-item .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
)
</style>

Looking for a solution for Squarespace 7.0?

For Brine family templates, paste in this code:

.collection-type-blog .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }

For Bedford family templates, paste in this code:

.collection-type-blog #logoImage {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }