Guest Posted February 5, 2014 Share Posted February 5, 2014 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? Link to comment
Guest Posted February 5, 2014 Share Posted February 5, 2014 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
crainsy Posted February 5, 2014 Share Posted February 5, 2014 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
Guest Posted March 15, 2014 Share Posted March 15, 2014 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
lydia1570047831 Posted August 19, 2014 Share Posted August 19, 2014 Mine didn't work either. I uploaded a black png and even uploaded a plain black image to see if there was something I'd missed, but it still didn't work. Surely I'm missing something? Link to comment
PeterCh Posted April 25, 2016 Share Posted April 25, 2016 @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. Link to comment
jackandliberty Posted June 13, 2016 Share Posted June 13, 2016 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? Link to comment
jackandliberty Posted June 13, 2016 Share Posted June 13, 2016 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? Link to comment
paul2009 Posted June 13, 2016 Share Posted June 13, 2016 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've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
mojun Posted May 16, 2017 Share Posted May 16, 2017 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
CarterR Posted November 5, 2017 Share Posted November 5, 2017 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.