basakatac Posted October 14, 2019 Share Posted October 14, 2019 hi all, I use Version 7.0– Brine family (Margot template) and added a custom CSS to the pages I want to use my logo in a different color with the following code since some of my backgrounds are lighter/darker. <script> $(function(){ $(".Header-branding-logo").attr("src","https://static1.squarespace.com/static/5d4b2ba2bd52f20001f646b1/t/5d60640d5228b00001b48ca5/1566598157161/VIPOUTDOORLOGO.png"); }); </script> It was working perfectly while I was still offline, but after I published my website it started to gave an error. I have to refresh the page I have this code on to make it work. However, it also changes the pages I don't have code on (whites turn black). The website link is: https://www.vipoutdoormedia.com/ . I uploaded white version directly from the settings, so black version is the one with custom CSS code. Any help would be appreciated. Link to comment
brandon Posted October 14, 2019 Share Posted October 14, 2019 Hey @basakatac. Your site seems like a good candidate for the CSS-only, modern-browser-only approach. // Invert logo color on specific pages. // Uses Squarespace-compatible LESS CSS, not standard CSS. #collection-5d4b424a4895d9000187f302, #collection-5d64262299293800015e0292, #collection-5d4b4ab4d01eac0001327bb7 { .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(1); } } Basically, add a list of comma-separated collection IDs to that first line, and you're good to go. You can add that via the CSS editor, then remove the previous JQuery and corresponding logo file you were using; you don't need 'em. Related Questions Q: How do I find my collection IDs? A: Use your browsers developer-tools/inspector. It's the ID attribute on the `<body>' element. Q: Do I need to add it to just certain pages? A: No, that's what the collection IDs in the first line are for. They ensure the rule only applies to the pages you add. That way, you can add it globally via the CSS Editor. Related Posts Related post, for 7.1 is here. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
basakatac Posted October 14, 2019 Author Share Posted October 14, 2019 @brandon Hi Brandon, I was just replying your previous answer to me. I am kinda new to the code injections, so couldn't understand the code itself. How do I find my collection IDs? Do I only apply this code to the pages I want to change? Could you give a little bit more detail Link to comment
basakatac Posted October 14, 2019 Author Share Posted October 14, 2019 @brandon worked out perfectly, thank you so much Edit: Hi again @brandon the code worked on the regular pages however not on the blogs. Do you know what could be the problem? Any help would be appreciated Link to comment
tuanphan Posted December 13, 2019 Share Posted December 13, 2019 On 10/15/2019 at 2:39 AM, basakatac said: @brandon worked out perfectly, thank you so much Edit: Hi again @brandon the code worked on the regular pages however not on the blogs. Do you know what could be the problem? Any help would be appreciated Can you share link to your blogs? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.