cryssy Posted January 19, 2021 Share Posted January 19, 2021 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 Beyondspace 1 Link to comment
Beyondspace Posted January 19, 2021 Share Posted January 19, 2021 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); } Use this to get the id of the item Chrome Web Store - Extensions (google.com) cryssy and tuanphan 1 1 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
cryssy Posted January 19, 2021 Author Share Posted January 19, 2021 That worked! Thank you, @bangank36! Also, thanks for linking the extension - will have to do this for a few pages so that is perfect. 😀 Beyondspace 1 Link to comment
kakers Posted December 21, 2021 Share Posted December 21, 2021 I tried this and it didn't work. is there a way to have the light logo show on dark pages? and dark logo show on light pages? Special Modern Design Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 On 12/22/2021 at 4:55 AM, kakers said: I tried this and it didn't work. is there a way to have the light logo show on dark pages? and dark logo show on light pages? Add this code to Page Header (page where you want to invert logo). If the code doesn't work, please share link to your site, we can check easier <style> header#header img { -webkit-filter: invert(100%); filter: invert(1); } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kakers Posted December 26, 2021 Share Posted December 26, 2021 Hi Tuan- I guess we have been thru this already. If my client approves, I will use the developer you recommended- thanks. (My client sees how it works in 7.0 and can't understand why that functionality is not available in 7.1. It's a hard one to explain to her.) Beyondspace 1 Special Modern Design Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment