Jump to content

Changing logo image on JUST blog posts

Recommended Posts

Site URL: https://www.drivenfilms.tv/blog/driven-films-goes-to-trc-street-kings-2020

Hello, I'm currently using the Polaris family template for my website and have recently setup a blog. Unfortunately I am seeing that all of my blog posts (not the main blog page) have no header image, thus making my white logo...invisible. Is it possible to upload a black version of my logo JUST for the individual blog posts?

Link to comment

Add to Home > Design > Custom CSS

.collection-type-blog.view-item .Header-branding-logo {
    filter: invert(1);
}

 

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
  • 4 weeks later...
19 hours ago, DrivenFilms said:

@tuanphan Do you happen to know the .collection ID for the store items? I tried switching "blog" to "store" and the logo did not invert.

Can you share new link?

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
  • 3 weeks later...
1 minute ago, Marik said:

Hi! I've managed to insert a different logo for my blog page, but it's not working correctly when opening blog posts. Any tips how to do this?

Works here: https://www.tiiupiret.com/equestrian

Not working here: https://www.tiiupiret.com/equestrian/helsinki-horse-fair

Thank you so much, if anyone know how to do this!

What is access password?

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
16 minutes ago, Marik said:

Puranen2020!

Use this code

.collection-type-blog-masonry.view-item .header-title-logo img {
        content:url("https://static1.squarespace.com/static/5e661dab385ea60871e3b9ee/t/5e69fc7f530e09007260a4bf/1584004224473/Equestrian.jpg") !important;
        max-height: inherit !important;
}

 

Edited by tuanphan

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
16 minutes ago, tuanphan said:

.collection-type-blog-masonry.view-item .header-title-logo img { content:url("https://static1.squarespace.com/static/5e661dab385ea60871e3b9ee/t/5e69fc7f530e09007260a4bf/1584004224473/Equestrian.jpg") !important; max-height: inherit !important; }

Thank you so much Tuanphan! Worked perfectly. All the best!

Link to comment
  • 2 weeks later...

Oh! A new problem occurred. Now the fixed logo is showing on both blog sites when reading posts (I have two different blogs on the site).

I'd want that Equestrian blog and Stories blog would have different logos showing when reading posts.

Any way to fix this? 😭

Link to comment
14 minutes ago, Marik said:

Oh! A new problem occurred. Now the fixed logo is showing on both blog sites when reading posts (I have two different blogs on the site).

I'd want that Equestrian blog and Stories blog would have different logos showing when reading posts.

Any way to fix this? 😭

Add to Page Settings > Advanced > header

<style>
  .collection-type-blog-masonry.view-item .header-title-logo img {
        content:url("https://static1.squarespace.com/static/5e661dab385ea60871e3b9ee/t/5e69fc7f530e09007260a4bf/1584004224473/Equestrian.jpg") !important;
        max-height: inherit !important;
}
</style>

 

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
8 minutes ago, tuanphan said:

Add to Page Settings > Advanced > header


<style>
  .collection-type-blog-masonry.view-item .header-title-logo img {
        content:url("https://static1.squarespace.com/static/5e661dab385ea60871e3b9ee/t/5e69fc7f530e09007260a4bf/1584004224473/Equestrian.jpg") !important;
        max-height: inherit !important;
}
</style>

 

Superb! It worked! Thank you so much again!!

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.