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

Changing Logo Color on Different Site Pages


AbiO
Go to solution Solved by rwp,

Question

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 post
  • Answers 38
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Thank you so much! That worked!

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

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

Posted Images

Recommended Posts

  • 0

@Hannah Williams

It's working for me locally on your site.

1870347693_ScreenShot2021-03-08at11_37_04AM.thumb.png.169bd4b655efd7bce1eb4ac3ee4cc958.png

If you install the code and it still isn't working, and not causing an issue, leave the code installed. Then let us know. Sometimes testing locally doesn't cover all the use cases. We can then diagnose further.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
On 5/13/2021 at 1:15 AM, Rudybro said:

@rwp Are you able to help me change the logo color of my site to black when on white pages (product/checkout)? 

https://silver-hyperboloid-kt5p.squarespace.com/config/  

pw: Squarespacelogin123 

You mean checkout page (/checkout) or /cart page?

Link to post
  • 0
17 hours ago, Rudybro said:

 yes. I would like the logo to be dark when on a page with a white background. 

Add to Design > Custom CSS

/* cart page logo */
body#cart .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

 

Link to post
  • 0

awesome, thank you! That updated for the cart page. What about the product pages. They also have a white background and need a black logo. 

Link to post
  • 0
13 hours ago, Rudybro said:

awesome, thank you! That updated for the cart page. What about the product pages. They also have a white background and need a black logo. 

product list page

/* product list page logo */
body.collection-type-products.view-list .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

product detail page

/* product detail page logo */
body.collection-type-products.view-item .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

 

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