Jump to content

Changing Logo Color on Different Site Pages

Go to solution Solved by rwp,

Recommended Posts

Site URL: http://www.nwtherapymom.com

For my website, I have a white logo and a black logo. The White logo looks perfect on the Home page, but disappears on the blog and contact page since the page backgrounds on those pages are white. I would like to use the black logo in the header on just the blog and contact pages.

For now on my site, I just have text for the site name. Squarespace automatically changes the text to white on the front page and black on the other pages depending on the page background color but it won't for the logos unless I have a custom css code. I have tried looking at other forums and using that code, but I am not sure how to use code at all. I am using the 7.1 version and really need help. 

I've attached both the black and white logo but need specific directions as to how to get these placed. 

NW Therapymom 2-01.png

NW Therapymom-01.png

Link to comment
  • 1 month later...
On 12/14/2020 at 10:45 PM, OCD_Olly said:

Hi, I have the same question. But, I'd like to know how I can make the logo invert back when on a white page (which I have used twice alongside the homepage) - is there a way to make the invert only happen on black background pages?

Can you share page url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 1/8/2021 at 5:20 AM, marionlesso said:

Hello, I would love some support as well for the website : https://www.run-wise.com/

I was able to change it on the Blog page by adding this code: 
 


[class*='collection-type-blog']  .header-title-logo img {
  filter: invert()
}

I would love to do the same for the "contact" page. 

Thanks 🙂

Use this code

body#collection-5ee7b45d50d50c4af62fba5b .header-title-logo img {
    filter: invert();
    -webkit-filter: invert();
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
11 hours ago, Hannah Williams said:

I'm having the same problem on a couple of my white pages.

Add the following to Design > Custom CSS.

#collection-601a7a891e0c70196dc7e95f .header-title-logo img, /* journal */
#collection-6028f592cd42ec7b37cdddec .header-title-logo img /* privacy policy */

   {
    
    filter : invert( 1 );
    
    }

Have you considered using a black logo since so many of your pages are white. Then just invert on the black pages such as the home page? It would mean less code.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
5 hours ago, GraemeA said:

I have a white text logo on my landing page and all others need to be black.

I suggest flipping that around. Make the logo black and turn it white on the landing page.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hey,

In the grand scheme of things there will still be more coloured pages / need for a white logo.

With the css I am unsure how this will tell the site that those pages need a different logo image file. It doesn't seem to be working. 

I currently have the white logo uploaded but need something to say on those pages a different image would appear if that makes sense?

Thanks! 

Link to comment

@Hannah Williams

Are you getting a Syntax Error message in your Custom CSS?

I went to see if you had installed the code and noticed the following.

1712286548_ScreenShot2021-03-05at11_03_01AM.png.1a48b2688d3375610dcdcf9bccec8242.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@Shwena

Add the following to Custom CSS.

.homepage .Header-branding-logo {

  filter : invert( 1 );
  
  }

This is for a v7.0 site using the Brine template family.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.