Jump to content

Looking for code to change the logo on blog post pages

Recommended Posts

Posted

Hello!

I'm working in 7.1. Globally my logo is white throughout the site, but when I get to an individual blog post, the background is white and the logo doesn't show up. How can I change the white logo on the blog post pages to a color logo? Is there a specific custom code and steps to change out the white logo for a color version just for those pages? Your help would be very much appreciated. Thank you!

 

Posted (edited)

Following, as I have the same issue.

I've found a workaround but it's annoying and you need to add the page ID to the custom CSS every time you add a new blog article. 

My issue:
I am using the dynamic header, and can't find a way to override the logo colour for blog articles. Majority of the site has a coloured header, except I'd like blog articles to have a white background. Because you can't add sections to blog articles, there's no way to just add a coloured top section and have the content section with a white bg.

 

I used this page as a guide on how to add custom CSS to just one page and this old forum post to work through some solutions. No winners yet.

 

This is the code that works for each article;

#item-64d0b5d39fa39d5008b56ec8 {
	.header-title-logo img {
		filter: invert(1);
		-webkit-filter: invert();
	}
}

You will need to replace '#item-64d0b5d39fa39d5008b56ec8' with your unquie ID, and to add multiple pages you just add a comma after each ID. 

Edited by emdashdesign
Posted

If you need to change logo color on a specific blog post, no need to find ID, you can edit that post > Add a Code Block at top or bottom of post > Use this code

<style>
  header#header img {
  	filter: invert(1);
		-webkit-filter: invert();
  }
</style>

 

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

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.