Jump to content

Invert Logo Color on individual blog posts, not on the front page of the blog

Recommended Posts

Site URL: https://www.riverstonechurch.net/

Hi, I want to be able to change the color of the logo to match the color of the menu on my blog.  When you first land on the blog page where the blog posts are aggregated, I want it to be white (which it is)...but when you click on an individual blog post, I need to it change dark.  I have tried the following code:

.collection-type-blog .Header-inner img {

  filter: invert();

}

Which does change the color...but on the front page and on the individual posts.  Is there a way to change it on the individual posts without the front page?

 

https://www.riverstonechurch.net/blog

blog1.jpg

blog2.jpg

Link to comment
51 minutes ago, rmccready said:

Site URL: https://www.riverstonechurch.net/

Hi, I want to be able to change the color of the logo to match the color of the menu on my blog.  When you first land on the blog page where the blog posts are aggregated, I want it to be white (which it is)...but when you click on an individual blog post, I need to it change dark.  I have tried the following code:

.collection-type-blog .Header-inner img {

  filter: invert();

}

Which does change the color...but on the front page and on the individual posts.  Is there a way to change it on the individual posts without the front page?

 

https://www.riverstonechurch.net/blog

blog1.jpg

blog2.jpg

Use this

.collection-type-blog.view-item .Mobile-bar img, 
.collection-type-blog.view-item .Header-inner img {
    filter: invert();
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 5 months later...
On 8/2/2021 at 5:02 AM, graceandoak said:

Hey @bangank36! For some reason, this didn't work for me. Is it for 7.1?

I am also looking to invert the logo color - just on the individual blog pages.

https://clavichord-cardioid-355d.squarespace.com/
pass: morocco

Add to Design > Custom CSS

/* blog posts logo */
body.collection-type-blog-basic-grid.view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Do you want to change right menu items color on homepage?

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

@tuanphan YES please! I am running into the issue where on pages that have an image in the first section, its showing up as black. But on pages that dont have an image (i.e. shop page) - it works fine. How do I tell SS to invert the right menu when there is an image? Same with when I scroll down and the nav bar is sticky...

Edited by graceandoak
Link to comment
On 8/4/2021 at 4:19 AM, graceandoak said:

@tuanphan YES please! I am running into the issue where on pages that have an image in the first section, its showing up as black. But on pages that dont have an image (i.e. shop page) - it works fine. How do I tell SS to invert the right menu when there is an image? Same with when I scroll down and the nav bar is sticky...

Hi. It looks like you solved this?

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

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.