Jump to content

Forte: Changing Black logo to white logo

Recommended Posts


is it possible to invert a black logo to a white logo when the background changes to a dark image? The forte template supports changing fonts in a logo, but is there a way to also change a monochromatic logo to white?

Link to comment
  • Replies 10
  • Views 13.8k
  • Created
  • Last Reply

OK I actually found the answer to this in another thread, thanks a lot to Llamablue:

*To create an invert effect on a dark coloured logo add this to the CSS:

body.collection-type-index .color-weight-dark #logo img { -webkit-filter: invert(100%); filter: invert(100%); }

Filters are recent css features so this will work now in the later versions of Safari, chrome and IE9+. Firefox will eventually support filters it seems.*

Link to comment

Tried this with my White PNG logo (with transparency). The end result was that the logo inverted on my home page, but not on my portfolio pages (where I applied the CSS).

Is there a way to load a separate logo (in this case a Black logo for white background) for different pages in the template?

Link to comment
  • 1 month later...

I pasted this code into the Custom CSS box but it didn't do anything. It didn't change my header logo from Black to white. Is there some step i am missing.

Link to comment
  • 5 months later...
  • 1 year later...

@lydia, @JBB, @crainsy:

When you are using a White PNG logo with transparency, just use the code above with a slight, yet essential variation (


, instead of


, in the color class selector):

body.collection-type-index .color-weight-light #logo img { -webkit-filter: invert(100%); filter: invert(100%); }

And don't forget to experiment with the


percentage value—this can significantly improve the look of the logo inversion.

Link to comment
  • 1 month later...

Probably best to ask a new question. Provide a link to the site so that users can see which template you are using.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 11 months later...

It works fine for my site!

at first, my white colour png logo is inverted the wrong way,until I changed it into Black colour PNG logo, for those notice their logo inverted but in an opposite way, maybe you should check if your logo is in black or white ya~

Link to comment
  • 5 months later...

What worked for me was, have the logo that you upload the color you want on the rest of your site, then add this code the custom css for it to be inverted on the homepage.

body.collection-type-index .color-weight-dark #logo img { -webkit-filter: invert(100%); filter: invert(100%); }

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.