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();
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.