Jump to content

Invert logo color on blog posts only

Recommended Posts

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

I've noticed some code in other posts but have had no luck getting this to work.  My logo is white and I need it to change on the blog posts to black to navigate back to the home page.  Can someone please help me get the right code to invert the color?  Thanks in advance.

https://www.riverstonechurch.net/sermons is where I am using the blog post style.

Link to comment
  • Replies 8
  • Views 796
  • Created
  • Last Reply
13 minutes ago, rmccready said:

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

I've noticed some code in other posts but have had no luck getting this to work.  My logo is white and I need it to change on the blog posts to black to navigate back to the home page.  Can someone please help me get the right code to invert the color?  Thanks in advance.

https://www.riverstonechurch.net/sermons is where I am using the blog post style.

Try this custom css

.collection-type-blog .Header-inner img {
  filter: invert();
}

image.thumb.png.6291c25e437d1318037dfb33d38080c2.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

Hi! I am having the same issue. The problem is that my blog posts don't have a collection-type-blog class. They do have a collection-type-blog-basic-grid class but that also targets the blog overview page (where the list of individual blog posts appears). Any tips on how to get just the individual blog post pages? 

Link to comment
2 hours ago, MarHigh said:

Hi! I am having the same issue. The problem is that my blog posts don't have a collection-type-blog class. They do have a collection-type-blog-basic-grid class but that also targets the blog overview page (where the list of individual blog posts appears). Any tips on how to get just the individual blog post pages? 

What is your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
  • 3 months later...
2 hours ago, lazzaisenough said:

Hello and thanks for the tip! In my case it seems to work just on desktop resolution. My mobile logo still remain white colored.

What is your site url

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

Archived

This topic is now archived and is closed to further replies.

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