Jump to content

Having different logos in each pages

Recommended Posts

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.


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
  • Replies 4
  • Created
  • Last Reply

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' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 1 month later...
On 10/15/2019 at 2:39 AM, basakatac said:


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


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.