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

Reversing logo color on single page, Brine template, 7.0


HelenC

Question

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

5 answers to this question

Recommended Posts

  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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
  • 0

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...