Jump to content

Reversing logo color on single page, Brine template, 7.0

Recommended Posts

Site URL: https://girlwithoutatripod.com/

I am trying to revers my black png logo to white on the Home and About page where it appears on top of a photo.

I have tried 2 different codes (see below)  and still the logo appears gray instead of white. 

Also, on all other pages where the logo should appear black, instead it is showing up as gray and I have no idea why. These issues are on both desktop and iPad when I log in to the website. When I’m actually in Squarespace the logo is black on the white pages as it should be. Everything looks ok on a phone.

Here are the codes I’ve inserted on the home and about page to get the logo to look white:

Code A

<style>

.Header-branding-logo {

-webkit-filter: invert(100%);

filter: invert(100%);

}

</style>

 

Code B

<style>

.Header-branding-logo {

    -webkit-filter: invert(100%);

    filter: invert(100%);  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');

  }

</style>

 

Would be thrilled if someone would be able to help and let me know what I'm doing wrong! I have searched high and low for a solution without any luck…

Thanks!

Screen Shot 2021-06-28 at 3.50.49 PM.png

Screen Shot 2021-06-28 at 3.51.03 PM.png

Gwat_Black.png

Link to comment
  • Replies 5
  • Views 399
  • Created
  • Last Reply
59 minutes ago, HelenC said:

Site URL: https://girlwithoutatripod.com/

I am trying to revers my black png logo to white on the Home and About page where it appears on top of a photo.

I have tried 2 different codes (see below)  and still the logo appears gray instead of white. 

Also, on all other pages where the logo should appear black, instead it is showing up as gray and I have no idea why. These issues are on both desktop and iPad when I log in to the website. When I’m actually in Squarespace the logo is black on the white pages as it should be. Everything looks ok on a phone.

Here are the codes I’ve inserted on the home and about page to get the logo to look white:

Code A

<style>

.Header-branding-logo {

-webkit-filter: invert(100%);

filter: invert(100%);

}

</style>

 

Code B

<style>

.Header-branding-logo {

    -webkit-filter: invert(100%);

    filter: invert(100%);  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');

  }

</style>

 

Would be thrilled if someone would be able to help and let me know what I'm doing wrong! I have searched high and low for a solution without any luck…

Thanks!

Screen Shot 2021-06-28 at 3.50.49 PM.png

Screen Shot 2021-06-28 at 3.51.03 PM.png

Gwat_Black.png

what is your site url

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, HelenC said:

use this filter options, since your logo is gray not black

filter: brightness(0) invert(1);

image.thumb.png.409d35238ec8edd3b6749529401859cc.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Thank you BaNgan! It worked- the logo is now white when it appears on top of an image (I added your code on those 2 specific pages)! The problem is that the logo now is white on the pages where it was black before. See attached screen shots. I don't understand why since the logo I uploaded is black to begin with and I haven't added any custom code to those pages? I would be super grateful if you would be able to help figure out this issue. Thanks!

Screen Shot 2021-07-05 at 2.17.24 PM.png

Screen Shot 2021-07-05 at 2.19.53 PM.png

Link to comment

I want to provide an update that your code DID work! The issue was that the feature Ajax loading was enabled, which prevented the header and footer from reloading when navigating  between pages. 

Thanks again for your help and quick response!

Link to comment

Archived

This topic is now archived and is 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.