Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Guest

Forte: Changing Black logo to white logo

Question

Guest

Hi,

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?

Edited by Guest
retag

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 1

@lydia, @JBB, @crainsy:

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

light

, instead of

dark

, 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

invert

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

Share this post


Link to post
  • 1
Guest

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.*

Edited by Guest

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

This isn't working for me either...I have a white PNG logo that I would like to load on the homepage, but invert it on all other pages. So far it's still showing up as white on all pages - even after I've added that code to the custom CSS. Any ideas?

Share this post


Link to post
  • 0

This isn't working for me either...I have a white PNG logo that I would like to load on the homepage, but invert it on all other pages. So far it's still showing up as white on all pages - even after I've added that code to the custom CSS. Any ideas?

Share this post


Link to post
  • 0

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


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDate Picker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links.

Share this post


Link to post
  • 0

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~

Share this post


Link to post
  • 0

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%); }


Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...