Jump to content

Invert Blog Post Logo Image Color on Mobile

Recommended Posts

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!

Link to comment
  • Replies 10
  • Views 1.8k
  • Created
  • Last Reply

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

Link to comment

@natalienet missing a }


@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'); 
}
}


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

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,

Link to comment
  • 4 months later...

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

 

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.