Need to invert the logo OR apply a header background to blog posts only

Site URL: https://fiddle-calliope-dcmk.squarespace.com

Hey everyone -

I'm working on my website that typically uses a white logo and white text over an image background.

However, when I go to make a blog post, it switches to black text for the header over a white background, which makes the logo invisible. What I'm looking to do is either:

• Invert my logo (or use a different image for it) on blog posts ONLY, not the blog landing page
• Allow for blog posts ONLY, not the blog landing page, to use a header with a background image or solid colored background with white text.

https://fiddle-calliope-dcmk.squarespace.com/insights

Password is ThemeParks12345

I really want to avoid doing this with code injection because I would need to upgrade my plan.

EDIT: I was successfully able to get it to work with the following custom CSS, but unfortunately it also inverts the logo on my blog's landing page:

Quote

[class*='collection-type-blog']  .header-title-logo img {
  filter: invert()
}

I'd still like to know how to get the blog post headers to have a background image like the other pages of my site, or a solid color on the blog posts only.

I'm on 7.1.

Thanks!

Unfortunately I cannot help you as I have the same question - how to have a standard header background for navigation/logo section on blog posts (v7.1) without having to upload a background each time I create a blog post (and so logo and navigation don't disappear into whitespace).  

On 6/2/2021 at 1:17 AM, Del said:

Unfortunately I cannot help you as I have the same question - how to have a standard header background for navigation/logo section on blog posts (v7.1) without having to upload a background each time I create a blog post (and so logo and navigation don't disappear into whitespace).  

It looks like @lostinheadguy solved with this CSS

[class*='collection-type-blog'] .header-title-logo img {
    filter: invert();
}

@tuanphan, thank you for this code.

It did help display the inverted version of my white logo on blog posts, so success!

Could you help me make two additional minor changes?

1. Can I change the color, so that instead of just inverting the logo to black, it would match the color of the nav bar titles? (Hex code: #8CB1BA)

2. On the actual Blog page, I don't want to invert the logo, because we're using a header image and need all text at the top to be white against the dark image. 

Cheers,
Jen

I followed this video and got it to work! 

Basically, I created a new version of my logo in the correct color with a transparent background.

Then uploaded the image in Design / Custom CSS / Manage Custom Files (at the bottom of the page).

Got the image URL and replaced it between the quote marks below. 
 

<style> 
div.header-title-logo a {
content:url("LOGO-URL-HERE.png") !important;     
max-height: 70px;
}
</style>

Then I went to Pages / Blog and clicked on the gear icon.

Went to Advanced, then Post Blog Item Code Injection and pasted the code there.

I made sure to set the max height to match the height of my logo (instructions are in same video at the end). 

This worked perfectly!

Now my logo matches the rest of my nav bar items when you're looking at individual blog posts, but it's still white on the Blog page, like I wanted it to be.

If you want to invert the logo for the Blog collection page AND each post, this code worked for that in Custom CSS:

/* blog posts logo */

[class*='collection-type-blog']  .header-title-logo img {
  filter: invert()
}

Hope this helps anyone else struggling with the same problem. This took me way too long to figure out.

Love this! What's the best way to do the same thing for the mobile version of the logo?

On 4/25/2023 at 2:08 AM, kentbateman1 said:

Love this! What's the best way to do the same thing for the mobile version of the logo?

What is site url? Each SS version will need a different code

@tuanphan

On 4/25/2023 at 9:17 PM, tuanphan said:

What is site url? Each SS version will need a different code

citychurchknox.squarespace.com

pw: churchisafamily

On 6/12/2023 at 4:06 AM, kentbateman1 said:

@tuanphan

citychurchknox.squarespace.com

pw: churchisafamily

I see you figured it out with this code?

Yep, late last night and forgot to circle back and update here 😂

Thanks for taking a look and checking in. 

Only place I'm still trying to figure out is citychurchknox.com/events. On that landing page, the menu hamburger icon is white like it needs to be, but the logo is still black. Is there a way to target the logo on that page (on desktop and mobile) without impacting the individual event posts too? 

On 6/13/2023 at 8:00 PM, kentbateman1 said:

Yep, late last night and forgot to circle back and update here 😂

Thanks for taking a look and checking in. 

Only place I'm still trying to figure out is citychurchknox.com/events. On that landing page, the menu hamburger icon is white like it needs to be, but the logo is still black. Is there a way to target the logo on that page (on desktop and mobile) without impacting the individual event posts too? 

Add to Design > Custom CSS

body#collection-64020b6b43d84875a8cb3f8a header#header img {
    filter: invert(0) !important;
    webkit-filter: invert(0) !important;
}