Jump to content

Hyde Template (Brine Family) - Logo Won't Invert For Individual Store Items

Recommended Posts

I'm currently having an issue where I've added some code to invert my site's logo from white to black on Hyde's white pages. This has worked everywhere EXCEPT for when individual products are opened from the store. So far, adding the individual page id solves the issue somewhat, but I have lots of products uploaded. This means adding individual page ids for ALL of them, and then the issue returns when a new product is added. Does anyone have any ideas on a faster, better way to do this that also is implemented when a new product is added??  I've attached screenshots of my issue - first is of the logo as it should appear; it's working on the store's main page where all the products appear, but when I select an individual item, it doesn't invert.

The code I've added to the site header is below (see how I added the collection ID for all the site's pages, but then needed to add the individual page id for each of the products so far?  There are many more products - that's just how far I got before my patience ran out.)

 

#collection-603087cac95f6a31e4c8dc2f, #item-603087cac95f6a31e4c8dc52,#item-603087cac95f6a31e4c8dc3a,#item-603087cac95f6a31e4c8dc2e,#item-603087cac95f6a31e4c8dc7a,#item-603087cac95f6a31e4c8dc72,#item-603087cac95f6a31e4c8dc4a,#item-603087cac95f6a31e4c8dc6a,#item-603087cac95f6a31e4c8dc62,#item-603087cac95f6a31e4c8dc42, #item-6041c6383f35b3501db8b167
{
  .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }
}

 

INVERT.jpg

no invert.jpg

Link to comment
  • Replies 4
  • Views 349
  • Created
  • Last Reply
8 hours ago, ayannakayc said:

I'm currently having an issue where I've added some code to invert my site's logo from white to black on Hyde's white pages. This has worked everywhere EXCEPT for when individual products are opened from the store. So far, adding the individual page id solves the issue somewhat, but I have lots of products uploaded. This means adding individual page ids for ALL of them, and then the issue returns when a new product is added. Does anyone have any ideas on a faster, better way to do this that also is implemented when a new product is added??  I've attached screenshots of my issue - first is of the logo as it should appear; it's working on the store's main page where all the products appear, but when I select an individual item, it doesn't invert.

The code I've added to the site header is below (see how I added the collection ID for all the site's pages, but then needed to add the individual page id for each of the products so far?  There are many more products - that's just how far I got before my patience ran out.)

 

#collection-603087cac95f6a31e4c8dc2f, #item-603087cac95f6a31e4c8dc52,#item-603087cac95f6a31e4c8dc3a,#item-603087cac95f6a31e4c8dc2e,#item-603087cac95f6a31e4c8dc7a,#item-603087cac95f6a31e4c8dc72,#item-603087cac95f6a31e4c8dc4a,#item-603087cac95f6a31e4c8dc6a,#item-603087cac95f6a31e4c8dc62,#item-603087cac95f6a31e4c8dc42, #item-6041c6383f35b3501db8b167
{
  .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }
}

 

INVERT.jpg

no invert.jpg

You can select all product page like so

.collection-type-products.view-item .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }

and use the item id to exclude the effect on the product that you not want to apply the invert

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
15 hours ago, bangank36 said:

You can select all product page like so






.collection-type-products.view-item .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }

and use the item id to exclude the effect on the product that you not want to apply the invert

Thanks so much! It worked!!! Are you able to tell me what I'm doing wrong with this script on mobile? The logo isn't showing up at all and I just need it to invert to black throughout as the mobile background is all white.

@media screen and (max-width:767px)
{ 
  .header-title-logo img {
    -webkit-filter: invert(100%);
 	filter: invert(1);  
	filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
}
Link to comment

PS: here's a screenshot of what I mean. The hamburger menu icon also doesn't change color if I try to adjust it, although if I switch the icon to something like 3 dots etc the color change takes effect. It's not a HUGE problem if I can get the logo to invert on mobile though, which isn't working at all.

Screen Shot 2021-04-27 at 12.31.16 PM.png

Link to comment
18 hours ago, ayannakayc said:

PS: here's a screenshot of what I mean. The hamburger menu icon also doesn't change color if I try to adjust it, although if I switch the icon to something like 3 dots etc the color change takes effect. It's not a HUGE problem if I can get the logo to invert on mobile though, which isn't working at all.

Can you share site url?

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

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.