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

Invert a header logo image inside Portfolio Collection's Project-Pages (ver 7.1)


cryssy

Question

Site URL: https://www.cryssycheung.com/

Hello!

I was wondering if it was possible to invert my Header's Logo Image inside of individual project-pages within the portfolio collection.

My default header logo image is a PNG that is black with transparency. 

Main site URL : https://www.cryssycheung.com/

Here is a link with the first section with a dark background graphic, and the default black logo image is getting lost. I'd love to have the logo image inverted to white for this instance: https://www.cryssycheung.com/design/comedy-central

I found this CSS in another form and inputted it into the DESIGN > CUSTOM CSS, but it doesn't work. The collection ID in the code below is the id I took from the View page Source <body> tag. 
 

#collection-5ffa3958a6aa4755bbc2260d .header-title-logo img {
    -webkit-filter: invert(100%);
   filter: invert(1);
}

Thanks so much for taking a look! 
Cryssy

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

The correct collection id is #item-5ffa3958a6aa4755bbc2260d .header-title-logo img { -webkit-filter: invert(100%); filter: invert(1); } Use this to get the id of the item Chro

Site URL: https://www.cryssycheung.com/ Hello! I was wondering if it was possible to invert my Header's Logo Image inside of individual project-pages within the portfolio collection. My d

That worked! Thank you, @bangank36! Also, thanks for linking the extension - will have to do this for a few pages so that is perfect. 😀

Posted Images

2 answers to this question

Recommended Posts

  • 0
53 minutes ago, cryssy said:

Site URL: https://www.cryssycheung.com/

Hello!

I was wondering if it was possible to invert my Header's Logo Image inside of individual project-pages within the portfolio collection.

My default header logo image is a PNG that is black with transparency. 

Main site URL : https://www.cryssycheung.com/

Here is a link with the first section with a dark background graphic, and the default black logo image is getting lost. I'd love to have the logo image inverted to white for this instance: https://www.cryssycheung.com/design/comedy-central

I found this CSS in another form and inputted it into the DESIGN > CUSTOM CSS, but it doesn't work. The collection ID in the code below is the id I took from the View page Source <body> tag. 
 


#collection-5ffa3958a6aa4755bbc2260d .header-title-logo img {
    -webkit-filter: invert(100%);
   filter: invert(1);
}

Thanks so much for taking a look! 
Cryssy

The correct collection id is

#item-5ffa3958a6aa4755bbc2260d .header-title-logo img {
    -webkit-filter: invert(100%);
   filter: invert(1);
}

image.thumb.png.c7b0138c4aa8ed3dfacb88b0a9b68ca1.png

Use this to get the id of the item

Chrome Web Store - Extensions (google.com)

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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post

Create an account or sign in to comment

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


×
×
  • Create New...