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

How do I change my Logo colour in the header on some pages?

Question

Site URL: https://lizard-cymbals-zmyf.squarespace.com

Hi, 

I am having trouble with my Site header logo. I am using the Zion template. I require it to be black for most of the site as my the backgrounds are white but when it comes to the main page I would love for it to be white. Is anyone here confident with code who could help me invert the colour just for that main page, please? 

 

Thank you, 

Jessica

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

If you go to Page Settings and Advanced, you can add this code to the Page Header Code Injection for the pages you want to invert the color.

<style type="text/css">
	.header-title-logo img {
	  filter:invert(1);
	}
</style>

 


Creating websites using Squarespace at Design by Donuts 🍩

Share this post


Link to post
  • 0

Tuan, thank you! Chris's suggestion worked. But for future reference how do I do this? I'm such a newbie still. Haha. 

 

Chris, Thank you so much that worked an absolute treat!!! 😄 

Share this post


Link to post
  • 0

Sorry, actually that didn't work. 😞 It has seemed to invert the colour but on all the page headers, not just the single one. 

Screen Shot 2020-04-24 at 10.40.11 pm.png

Share this post


Link to post
  • 0
Posted (edited)

Its a bit complicated, but this should help you at this link, and you might also need the Squarespace block identifier extension for chrome. I put the link at the bottom, it is a great thing to have if not now later. 

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde?hl=en-US

Edited by derricksrandomviews

Share this post


Link to post
  • 0
23 hours ago, Jessssica said:

Sorry, actually that didn't work. 😞 It has seemed to invert the colour but on all the page headers, not just the single one. 

 

Add to Home > Design > Custom CSS

.homepage .header-title-logo img {
    filter: invert(1);
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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