Invert Logo Color on Header for Certain Pages

Site URL: https://vanilla-ellipsoid-frjx.squarespace.com/

Hello, 

I would like to invert the color of the logo from black to white on certain pages of my site.

The Homepage, Listings Page (portfolio), & Listings Post Pages (portfolio pages).

The theme is CLARKSON.

Please let me know the code to do so. 

Thank you!

13 hours ago, marchbank said:

Site URL: https://vanilla-ellipsoid-frjx.squarespace.com/

Hello, 

 

I would like to invert the color of the logo from black to white on certain pages of my site.

The Homepage, Listings Page (portfolio), & Listings Post Pages (portfolio pages).

 

The theme is CLARKSON.

Please let me know the code to do so. 

 

Thank you!

 

Hi. Your site is private. Can you setup password & share url? We can check easier

7 hours ago, tuanphan said:

Hi. Your site is private. Can you setup password & share url? We can check easier

Okay password up - it is: 12345

Your logo is quite simple and black, so it can be inverted with a CSS filter. You can either choose to do this yourself by adding a code block to the relevant page, or you can let squarespace help you out. It identifies headers that will be light on dark by adding the "black" class to the header. you can see the effect of this very easily by reverting to a text only header.

if you want to follow that, then add this code into your sites custom css

header.black div.header-title-logo img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}

note that your logo will be black on white backgrounds, and white on darker ones.

if you want to do this just for one page, then add a code block to that page and add the code above but without the header.black bit, and place it inside a style block. like this

<style>
div.header-title-logo img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}
</style>

that should do it.

I'd favour the first option using the Custom CSS (from the main Design menu of the editor). it will make the change automatically as you add new pages, and much easier to change later on if you want to alter the way it looks.

Thanks for this post. I tried doing the first approach iamdavehart.

See attached image.

For some reason, it does not seem to effect the png image that is inserted as my logo image. Am I'm misunderstanding your instructions somehow?

My website is www.studioecesis.com. You will notice the logo image is too white to function on any of the pages other than the projects

Any help is appreciated.

Mike

Hi SS Peeps,

So I have a quandary. This code works PERFECTLY at switching my BLACK logo to WHITE on my home page.

<!-- Logo Colour Invert -->
<style>
.header-title-logo img {
    -webkit-filter: invert(100%);
   filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert=’1′);
  }
</style>
<!-- End Logo Colour Invert -->

However, when we adjust the colors to the company palette with the text now being a blue (#383A62), we needed to upload the equivalent 383A62 color logo to invert to white. It seems the invert of this blue however is a yellow.

Anyone have any thoughts as to how I could modify this code to invert the blue logo to white?

On 7/4/2024 at 3:13 AM, JamesBP said:

Hi SS Peeps,

So I have a quandary. This code works PERFECTLY at switching my BLACK logo to WHITE on my home page.

<!-- Logo Colour Invert -->
<style>
.header-title-logo img {
    -webkit-filter: invert(100%);
   filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert=’1′);
  }
</style>
<!-- End Logo Colour Invert -->

However, when we adjust the colors to the company palette with the text now being a blue (#383A62), we needed to upload the equivalent 383A62 color logo to invert to white. It seems the invert of this blue however is a yellow.

Anyone have any thoughts as to how I could modify this code to invert the blue logo to white?

Can you share link to page? We can check logo code easier.

@tuanphan Can't at this point as we are not live but this is the logo file. Would that help? The black logo switches perfectly to white but the blue goes yellow as the inverse of the blue hex is yellow I have discovered

On 7/7/2024 at 1:28 AM, JamesBP said:

@tuanphan Can't at this point as we are not live but this is the logo file. Would that help? The black logo switches perfectly to white but the blue goes yellow as the inverse of the blue hex is yellow I have discovered

You can setup site password & share url.