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

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


Question

Posted (edited)

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!

Edited by lostinheadguy
Question partially already solved?
Link to comment

2 answers to this question

Recommended Posts

  • 0

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

Link to comment
  • 0
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();
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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