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

Having different logos in each pages

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.

 

Share this post


Link to post

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)

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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 

Edited by basakatac
problem occurred

Share this post


Link to post
  • 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?

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...