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

Invert site logo on specific pages


Recommended Posts

Site URL: https://piano-dandelion-r2gb.squarespace.com/config

Hi everyone, 

Wondering if anyone could help me to change the color of my logo on certain pages. I would like my logo to be in white on most pages, except some where the background is white, I would like the logo to be black.  Here's an example of a page where it needs to be inverted:

https://piano-dandelion-r2gb.squarespace.com/cover

My website link is: https://piano-dandelion-r2gb.squarespace.com/. The password is: Bookofgeorge

Is there a code I can inject to simply invert it on select pages?  Or is there a way to override the logo to a different images on those pages?

Thanks so much!

Edited by Dawntreader
Link to post
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

You can inject this on specific pages code injection:

<style>
  .header-title-logo {
    filter: invert(1);
  }
</style>

Or you could grab the collection ID from the body tag of each page and insert into design -> custom CSS

#collection-5edf59598c1e0f59aa35b715 .header-title-logo {
    filter: invert(1);
}

Add or remove collections as necessary, separate them by a comma, like this:

#collection-5edf59598c1e0f59aa35b715 .header-title-logo,
#collection-________________________ .header-title-logo,
#collection-________________________ .header-title-logo {
    filter: invert(1);
}
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...