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

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


rmccready

Question

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

6 answers to this question

Recommended Posts

  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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.

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
  • 0

@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
  • 0
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.

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