Jump to content

Change logo color on a specific page of site

Recommended Posts

On 3/3/2022 at 3:43 AM, ResrieRocks said:

Site URL: https://mandarin-turtle-hz69.squarespace.com/

Hi, I would like to swap a white logo, to a dark blue logo on some pages of my site where the header area is white. Can you please help?  The logo is white knocked out of blue on the homepage. I'd like it blue on white on this page: https://mandarin-turtle-hz69.squarespace.com/our-work/compass

Thank you!

Try adding to Home > Design > Custom Css

#item-62166b51f3f36f51b22d9d24 .header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62166b51f3f36f51b22d9d24 .header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1646379887973-f1648f744912?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}

Change the url with the link to blue logo

Let me know how it works on your site.

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
Just now, ResrieRocks said:

This worked great! Thank you. Can you please share how I would change the code to implement this on any other additional pages? The logo image link I used is https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png

I really appreciate your help.

leslie

 

You can copy my code into the new one and change the page id for the it.

Kindly install the extension Squarespace ID Finder: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Use it to get the right page id: http://recordit.co/qwnj09oNCa

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

image.png.90c6153b0d9ced4306a56298677d1c2c.png

This is page id in my code

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi there again bangank36!

So, from a visual standpoint this all worked. However, the blue logo no longer is a link to the homepage. It only works on the original white logo. Thoughts on this?

Here are the pages that I've implemented the code for so far:

https://mandarin-turtle-hz69.squarespace.com/our-work

https://mandarin-turtle-hz69.squarespace.com/our-work/compass

https://mandarin-turtle-hz69.squarespace.com/our-work/lsp

 

Here is the custom CSS that is currently in the site:


#item-62166b51f3f36f51b22d9d24
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62166b51f3f36f51b22d9d24 
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}

#item-62223ffe3db1a36e6ae199b5
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62223ffe3db1a36e6ae199b5
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}


#collection-62166b51f3f36f51b22d9d23
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#collection-62166b51f3f36f51b22d9d23
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}
 

Link to comment
On 3/4/2022 at 11:46 PM, ResrieRocks said:

Hi there again bangank36!

So, from a visual standpoint this all worked. However, the blue logo no longer is a link to the homepage. It only works on the original white logo. Thoughts on this?

Here are the pages that I've implemented the code for so far:

https://mandarin-turtle-hz69.squarespace.com/our-work

https://mandarin-turtle-hz69.squarespace.com/our-work/compass

https://mandarin-turtle-hz69.squarespace.com/our-work/lsp

 

Here is the custom CSS that is currently in the site:


#item-62166b51f3f36f51b22d9d24
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62166b51f3f36f51b22d9d24 
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}

#item-62223ffe3db1a36e6ae199b5
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62223ffe3db1a36e6ae199b5
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}


#collection-62166b51f3f36f51b22d9d23
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#collection-62166b51f3f36f51b22d9d23
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}
 

Have you solved it yet?

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
On 3/8/2022 at 1:16 AM, ResrieRocks said:

No I haven't. Do you know why this might happen? Any thoughts to resolve it?

Hi. Can you share link to a page where you have problem?

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

Create an account or sign in to comment

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

×
×
  • 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.