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

Invert Blog Post Logo Image Color on Mobile

Question

I successfully used the code from this post (Thanks @Paul2009) to invert the color of my logo in my blog posts:

https://answers.squarespace.com/questions/200238/marta-change-color-of-logo-on-blog-posts-only.html

However, it didn't invert the logo for blog posts on mobile, so now my mobile blog posts still have a white logo on a white background.

How can I invert the logo on blog posts on mobile?

Thanks!

Edited by natalienet
Initial Revision

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0

I figured this out! 😀

To recap, my site logo is white. When viewing the blog posts, however, my white logo was invisible because there's no option to upload a unique logo just for the blog (and you can't change the background color of the blog post headers without css).

I wanted my blog post header background to remain white and my logo to be black, so I added CSS to invert the colors on my logo.

Here's an example of one of my blog posts, so you can see it in action on desktop and mobile:
https://www.earthspeak.love/shows-1/iglivereplay-naomilove

 

Here's the CSS I used to invert the blog logo on both desktop and mobile.

/* Make Shows Blog Post Header Logo Inverted (Black) on desktop */
.collection-type-blog .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }

/* Making Shows blog post header logo inverted (black) on mobile */
@media only screen and (max-width: 640px) { .Mobile-bar-branding {
    -webkit-filter: invert(100%) !important;
    filter: invert(100%) !important;
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }}

 

Share this post


Link to post
  • 0

Ok, @tuanphan I did this, and it is not working. Did I put it together correctly?

Thanks.

@media screen and (max-width:640px) { .collection-type-blog .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); }

Share this post


Link to post
  • 0

Put that new code in with the correct syntax, and it's still not inverting the blog post logo on mobile.

Thanks for trying though, appreciate it.

Share this post


Link to post
  • 0

To folks following this question, here's a draft of an email you can submit to customer support, so that maybe they'll add this super basic and important feature!


Hello,

I would like to request that you offer styling options for blog post headers.

I have this problem, and I've seen many others with the same problem:

I have a white logo which shows against the banners I use throughout my site, but there is no option to add a banner or even a background color to blog posts, so my logo doesn't show on blog posts.

I can imagine you could create options for users to:

  1. Add a universal banner to blog post headers
  2. Add a universal background color to blog post headers
  3. Change the logo for blog posts

This is super frustrating to not have options to modify this basic and important feature, so I hope you will implement a solution ASAP!

Thanks,

Edited by natalienet
Initial Revision

Share this post


Link to post
  • 0

@tuanphan Thanks. I'm sorry, I forgot to mention that the blog posts are under the "shows" in the menu. Go to "Shows" and you can click on any of the posts on that page to see a blog post. I will try the .view-item now. Thanks.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...