Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Having different logos in each pages


basakatac

Question

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

4 answers to this question

Recommended Posts

  • 0

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.
Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...