Dynamic inverted logo on gallery slideshow 💻🤓

On 1/15/2024 at 2:09 AM, tuanphan said:

Change your code to this

//Invert header logo color on dark themed Sections
.dark, .dark-bold, .black, .black-bold {
  &.header img {
    filter: invert(1);
    -webkit-filter: invert(1);

}}

 

Hey @tuanphan this should work on a site to dynamically invert a logo or nav items based on photo color. Ex: darker photo white logo, lighter photo darker photo[Home page hero image/top section has rotating background images]. Clients previous site had this but I can't seem to replicate on 7.1 fully.

Thanks 

2 hours ago, TheVibe said:

Hey @tuanphan this should work on a site to dynamically invert a logo or nav items based on photo color. Ex: darker photo white logo, lighter photo darker photo[Home page hero image/top section has rotating background images]. Clients previous site had this but I can't seem to replicate on 7.1 fully.

Thanks 

Can you share site url?

1 minute ago, tuanphan said:

Can you share site url?

@tuanphan https://bear-chameleon-4ytb.squarespace.com/ this has the example.

https://broccoli-polygon-765l.squarespace.com/ this is the testing site I am looking to replicate on.

Thanks

Hey,

I am looking to wrap up a client's project, but have been trying to replicate their dynamic inverted logo and nav that was on their site via 7.0 before being migrated to 7.1. I have been working on two test sites one a duplicate of the original with the example of what I'm looking to replicate. Then a duplicate of the current live redesigned site I am looking to replicate the dynamic inverted logo and nav items on for the homepage only.

I have read a few forums and haven't had much luck. Hopefully, someone can assist.

https://bear-chameleon-4ytb.squarespace.com/ This is the example.

https://broccoli-polygon-765l.squarespace.com/ This is the testing site I am looking to replicate.

I have tried this code below, which inverts but! not dynamically change based on the image [ex: dark photo light text or light photo dark text]. I know it will have to go in the page code injection to be strictly on the home page. I was just testing in CSS to get it set first.

.header-title-logo img {
   -webkit-filter: invert(100%);
           filter: invert(60%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  
 } 

Thanks 🤓

On 8/10/2024 at 7:12 AM, TheVibe said:

@tuanphan https://bear-chameleon-4ytb.squarespace.com/ this has the example.

 

https://broccoli-polygon-765l.squarespace.com/ this is the testing site I am looking to replicate on.

 

Thanks

The site is private, you can follow this guide to know how to share url

Hey @tuanphan both sites  p: Bear777!

Thanks!!!!!!!!!!!

16 minutes ago, paul2009 said:

Your client's previous site used the Forte template and this had a special "auto-detect color" feature that automatically set the color of the header elements to black or white, based on the overall darkness or brightness of the area around the navigation links.

Sadly this isn't a feature in 7.1 (or other 7.0 templates) so it will need to built from scratch using JavaScript. The code should listen for slide changes and then, when the slide changes, it should sample the color of the pixel(s) directly under the logo/navigation, and then calculate the brightness of that color. Depending on the brightness (as we perceive it), the logo and navigation colours can then be set to black or white by adding a class to these elements and controlling it with CSS. For example, Forte used the classes .color-weight-light and .color-weight-dark.

I hope this helps to get you started.

Did this help? Please give feedback by clicking an icon below  ⬇️

That was my fear. Thanks @paul2009 for braking this down. You wouldnt happen to have a code snippet would you 😆 lol.

I was able to see it was running in some code in JavaScript but didn't see it in the code files, but seeing as it was built in to the template would explain why I saw it in inspect but not the sites "custom code". Thanks again for your input.

Welp

26 minutes ago, TheVibe said:

You wouldn't happen to have a code snippet would you...I was able to see it was running in some code in JavaScript but didn't see it in the code files

I'm not aware of any snippets for 7.1 as it's a fairly niche requirement 🙂.

I assumed not lol.

Thanks!