Invert site logo on specific pages

Site URL: https://piano-dandelion-r2gb.squarespace.com/config

Hi everyone, 

Wondering if anyone could help me to change the color of my logo on certain pages. I would like my logo to be in white on most pages, except some where the background is white, I would like the logo to be black.  Here's an example of a page where it needs to be inverted:

https://piano-dandelion-r2gb.squarespace.com/cover

My website link is: https://piano-dandelion-r2gb.squarespace.com/. The password is: Bookofgeorge

Is there a code I can inject to simply invert it on select pages?  Or is there a way to override the logo to a different images on those pages?

Thanks so much!

You can inject this on specific pages code injection:

<style>
  .header-title-logo {
    filter: invert(1);
  }
</style>

Or you could grab the collection ID from the body tag of each page and insert into design -> custom CSS

#collection-5edf59598c1e0f59aa35b715 .header-title-logo {
    filter: invert(1);
}

Add or remove collections as necessary, separate them by a comma, like this:

#collection-5edf59598c1e0f59aa35b715 .header-title-logo,
#collection-________________________ .header-title-logo,
#collection-________________________ .header-title-logo {
    filter: invert(1);
}

@rwp Thank you!  Do you know if there's a way to do this for one project page within a portfolio? 

Sure, what page and what do you want to invert?

Hello,

I also have a black logo. I want the main page to show it as black and the portfolio pages to show it as white. Is it easier to just invert it on the main page or invert each of the portfolio ones?

7.1 

On 4/30/2021 at 1:37 AM, Hebon said:

Hello,

I also have a black logo. I want the main page to show it as black and the portfolio pages to show it as white. Is it easier to just invert it on the main page or invert each of the portfolio ones?

7.1 

Hi. Can you share link to your site? We ca help easier

Hi, I think I have the same problem. www.mavdevgroup.com is the site I have been helping with. I'm trying to keep the logo white on the homepage and the portfolio project pages so it appears on top of the pictures I am using there. But I want it to remain black when it appears on pages with white at the top.

I tried dropping this in 

body:not(.home)
  .header-title-logo {
    filter: invert(1);
  }

and it seemed to work, except I can't get the homepage and the portfolio pages to both be inverted at the same time. Appreciate any help anyone can offer. Thanks you.

www.mavdevgroup.com

Hi. You want

• Home, Portfolio Page: White logo
• Other pages: Black logo

is this right?

yes please, but the only catch is, that I want the logo to be black on the top level portfolio page since it loads with a white background at the top. But inside of each 'project' in the portfolio I want them to have a white logo just like on the homepage please. Hope that makes sense.

Again thanks for any help you can offer.

16 hours ago, blakedesign said:

yes please, but the only catch is, that I want the logo to be black on the top level portfolio page since it loads with a white background at the top. But inside of each 'project' in the portfolio I want them to have a white logo just like on the homepage please. Hope that makes sense.

Again thanks for any help you can offer.

In Portfolio Page Header, find this code

<style>
.header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='50');
  }
</style>

Change it to

<style>
.view-list .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='50');
  }
</style>

(I added .view-list

• .view-list = top level porfolio page
• .view-item = each projects

)

Awesome thanks. That worked wonderfully. 

Hey, y'all (and always guessing @tuanphan knows the answer 🙂

I'm wanting to do this, but with some variations:

1. I'd like it to happen *only* on mobile, *only* on specific pages.
2. And, I'd like to use a different *image,* not simply invert the colors of the logo.

Here's my site. You can see that, for the Home page, as an example, the logo doesn't appear on mobile (or, only the teal portion does) because the background placement becomes white on mobile. Any other pages where this happens, or where I'd set the background color to white instead of dark, I'd love to know how to switch the logo out with a new image that works over white.

Anyone have insights?

On 8/31/2021 at 3:28 AM, brandi_sqspace said:

Hey, y'all (and always guessing @tuanphan knows the answer 🙂

I'm wanting to do this, but with some variations:

1. I'd like it to happen *only* on mobile, *only* on specific pages.
2. And, I'd like to use a different *image,* not simply invert the colors of the logo.

Here's my site. You can see that, for the Home page, as an example, the logo doesn't appear on mobile (or, only the teal portion does) because the background placement becomes white on mobile. Any other pages where this happens, or where I'd set the background color to white instead of dark, I'd love to know how to switch the logo out with a new image that works over white.

Anyone have insights?

Add to Page Header

<style>
  @media screen and (max-width:767px) {
  .header-title-logo img {
    visibility: hidden;
}

.header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2021/08/01/12/58/beach-6514331__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
  }
</style>

15 hours ago, tuanphan said:

<style>
  @media screen and (max-width:767px) {
  .header-title-logo img {
    visibility: hidden;
}

.header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2021/08/01/12/58/beach-6514331__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
  }
</style>

@tuanphan I'm guessing this is to be added to individual pages that I want this to happen on? So, Page Settings > Advanced > Page Header Code Injection?

7 hours ago, brandi_sqspace said:

@tuanphan I'm guessing this is to be added to individual pages that I want this to happen on? So, Page Settings > Advanced > Page Header Code Injection?

Yes

19 hours ago, tuanphan said:

Yes

Thanks 🙂 Not on a business plan, so I don't have that option. But at least I know how to fix it.

On 9/3/2021 at 12:56 AM, brandi_sqspace said:

Thanks 🙂 Not on a business plan, so I don't have that option. But at least I know how to fix it.

With Personal Plan, You can add a Code Block at bottom of page >> Paste the code.

On 9/4/2021 at 1:32 AM, tuanphan said:

With Personal Plan, You can add a Code Block at bottom of page >> Paste the code.

You're amazing. THANK YOU.

14 hours ago, Sappho said:

Hi, I have the same problem as most people here. I have a white logo over a cover image on the home site, but I need it to be black on all other pages. I don't have a business plan or higher, and can't make the codes here work. Can anyone help me? Thank you. 

 

This is possible with Personal Plan. If you share link to your site, we can check & give the code

On 7/27/2020 at 4:04 AM, rwp said:

Or you could grab the collection ID from the body tag of each page and insert into design -> custom CSS

#collection-5edf59598c1e0f59aa35b715 .header-title-logo {
    filter: invert(1);
}

This worked for me! But it's only resolved the issue on the desktop view of my site, not the mobile view! My collection ID is #collection-62d86ed3ff9b0a73de7affe9

Any suggestions on how I can invert the mobile version of my logo on a specific page using the collection id I've shared please?

Thanks in advance 🙂  @rwp @tuanphan

Matt

On 7/24/2022 at 6:01 PM, mattheadley said:

This worked for me! But it's only resolved the issue on the desktop view of my site, not the mobile view! My collection ID is #collection-62d86ed3ff9b0a73de7affe9

Any suggestions on how I can invert the mobile version of my logo on a specific page using the collection id I've shared please?

Thanks in advance 🙂  @rwp @tuanphan

Matt

Try this

#collection-5edf59598c1e0f59aa35b715 header#header img {
    filter: invert(1);
}

12 hours ago, tuanphan said:

Try this

#collection-5edf59598c1e0f59aa35b715 header#header img {
    filter: invert(1);
}

 

That worked! Thank you!

Needed to change the collection ID to the one you included in your reply and had to delete the previous line of code that I shared, but the fix you've given me solves both mobile and desktop views.

Much appreciated!

@tuanphan I’ve got another issue I’m hoping you can help me with… here’s the site, it’s now live: www.colourclub.cc 

When browsing on mobile (safari on iOS), the Our Work and Our Club pages adopt the home page colour theme in the mobile status bar and the Home Screen control. Is there a way to override this? See attached screenshots for reference. 
 

Also, the Our Club page is the page I needed to invert the logo colour, which looks great - except that when I open the overlay menu ideally I need the logo to be it’s original colour. Is there a fix for this too? I’ll include a screenshot too. 

Thanks ☺️

Matt

Edit this code

#collection-62d86ed3ff9b0a73de7affe9 header#header img {
    filter: invert(1);
}

to

#collection-62d86ed3ff9b0a73de7affe9:not(.header--menu-open) header#header img {
    filter: invert(1);
}

43 minutes ago, tuanphan said:

Edit this code

#collection-62d86ed3ff9b0a73de7affe9 header#header img {
    filter: invert(1);
}

to

#collection-62d86ed3ff9b0a73de7affe9:not(.header--menu-open) header#header img {
    filter: invert(1);
}

 

Thank you @tuanphan that's worked!

Is there a fix for the mobile browser issue too please? Looking to make the mobile status bar and home screen control areas match the background colour of their respective pages. Currently the neon blue colour used on the home page appears at the top and bottom of the other pages, ideally I'd like them to be fully white and fully black.

Any ideas?