davecooperphoto Posted June 16, 2020 Share Posted June 16, 2020 Site URL: https://www.jennifermag.com Hey all, My wife's site is built with Farro. It works great for pages with banner images. But for pages that do not have the banner, the white logo is on a white background and therefore invisible. Is there a way to have an alternative version that is black for white pages like this: https://www.jennifermag.com/about Thanks, Dave Link to comment
Beyondspace Posted June 16, 2020 Share Posted June 16, 2020 20 minutes ago, davecooperphoto said: Site URL: https://www.jennifermag.com Hey all, My wife's site is built with Farro. It works great for pages with banner images. But for pages that do not have the banner, the white logo is on a white background and therefore invisible. Is there a way to have an alternative version that is black for white pages like this: https://www.jennifermag.com/about Thanks, Dave Could you provide the list of pages that have blank header and the black version of the logo? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
tuanphan Posted June 16, 2020 Share Posted June 16, 2020 Add this code to Page Settings > Advanced > Header <style> .Header-branding-logo { filter: invert(1); } img.Mobile-bar-branding-logo { 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
Beyondspace Posted June 16, 2020 Share Posted June 16, 2020 9 minutes ago, tuanphan said: Add this code to Page Settings > Advanced > Header <style> .Header-branding-logo { filter: invert(1); } img.Mobile-bar-branding-logo { filter: invert(1); } </style> That's briliant! BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
davecooperphoto Posted June 19, 2020 Author Share Posted June 19, 2020 On 6/16/2020 at 1:26 AM, tuanphan said: Add this code to Page Settings > Advanced > Header <style> .Header-branding-logo { filter: invert(1); } img.Mobile-bar-branding-logo { filter: invert(1); } </style> This works but it changes things site wide. I only want to change it for pages that have a white background like this one: https://www.jennifermag.com/about Thanks, Dave Link to comment
Beyondspace Posted June 20, 2020 Share Posted June 20, 2020 Hi davecooperphoto, To add the code @tuanphan provided you to individual page, try to edit the page settings and add it into this BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.