Different logos + header styles on different pages

Hi! I'm in the middle of writing/designing my site and one thing I know I'm going to need is the ability to use different logos on different pages depending on the background colour I use for whichever page.

As you can see I'm using a lilac logo on the homepage, but as I'm using lilac as a background on my other pages, the logo is not visible so I want to use my red one on the other pages. (But I'd love the option to change it for each page in case I need that in future.)

Would someone be able to advise how to do this or provide a custom css code for me please?

https://squid-raccoon-pxc9.squarespace.com/ password: cr3ate

What you could do is have the red logo be the "main" logo you add into the Logo & Title settings and then use this code: https://www.maryphilip.com/squarespace-tutorials/how-do-you-change-the-logo-on-a-single-page-squarespace to change it out on the homepage to the lilac logo. 

As for it being dynamic & solid. If you're using 7.1 Fluid Engine, you can keep the navigation dynamic and add in a small section below the header of whatever color you are wanting it to be on certain pages. 

Thanks so much @dreyahb I'll use that code to solve the logo issue, presume I can use it on multiple pages if I want lots of different colour logos.

I'd love to not have a small section below the header that takes up space, but a decent workaround for now if there is no code to change the header style.

Thanks for your help!

I have a similar question. My site logo is white and works on all pages except for individual blog post and individual event pages. On those individual pages, the header background is automatically white so you can't see the logo.

I used the above instructions for changing to a black logo in "Post Blog Item Code Injection", and that fixed my blog post problem.

Does a similar option exist for individual event pages? The only thing I see in Settings > Advanced is "Page Header Code Injection", which changes it on both individual event pages and the event collection. 

Is there any workaround? 

I'm using dynamic style for the header, so my backup plan is just to use the "Page Header Code Injection" to change to the black logo, and then for the main Events page I could change the top section background color. 

On 12/5/2022 at 11:28 PM, ChristineS said:

I have a similar question. My site logo is white and works on all pages except for individual blog post and individual event pages. On those individual pages, the header background is automatically white so you can't see the logo.

I used the above instructions for changing to a black logo in "Post Blog Item Code Injection", and that fixed my blog post problem.

Does a similar option exist for individual event pages? The only thing I see in Settings > Advanced is "Page Header Code Injection", which changes it on both individual event pages and the event collection. 

Is there any workaround? 

I'm using dynamic style for the header, so my backup plan is just to use the "Page Header Code Injection" to change to the black logo, and then for the main Events page I could change the top section background color. 

Event List - Event Item has a different class name. So, if you used the code in the guide, for example this code

<style> 
div.header-title-logo a {
content:url("https://static1.squarespace.com/static/5611841fe4b0f085582f2aa7/t/5ddc2f3f2e5a7339b69c08b2/1578936481584/?format=1500w") !important;     
max-width: 290px;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}
</style>

you can change it to this, if you need to apply to Event List

<style> 
body.view-list div.header-title-logo a {
content:url("https://static1.squarespace.com/static/5611841fe4b0f085582f2aa7/t/5ddc2f3f2e5a7339b69c08b2/1578936481584/?format=1500w") !important;     
max-width: 290px;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}
</style>

Or change to this, if you want to apply to Event Individuals only

<style> 
body.view-item div.header-title-logo a {
content:url("https://static1.squarespace.com/static/5611841fe4b0f085582f2aa7/t/5ddc2f3f2e5a7339b69c08b2/1578936481584/?format=1500w") !important;     
max-width: 290px;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}
</style>

This is same for Blog Page - Individual Posts, Shop/Category Page - Individual Products