Jump to content

Different logos + header styles on different pages

Recommended Posts

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

I also would like to have a different 'style' for the header on different pages. On the homepage I want a dynamic header, while on other pages I want a theme or solid. Thank you so much in advance for anyone that can help. 

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

Link to comment

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. 

Link to comment
  • 1 month later...

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. 

Link to comment
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

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 year later...
18 hours ago, Awareofyou said:

I also want the logo to be a different color for blog posts but the code that was linked to the previous request is no longer working. @dreyahbohlen  any help here?  Please and thank you.

Each blog post uses a different logo color or?

Can you share link to a blog post? 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
On 5/2/2024 at 8:54 AM, Awareofyou said:

I also want the logo to be a different color for blog posts but the code that was linked to the previous request is no longer working. @dreyahbohlen  any help here?  Please and thank you.

Ahhh, I'm not much help reconfiguring custom code - but it looks like @tuanphan has responded and he's amazing!!

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.