Jump to content

Using A Different Logo On Blog Posts

Recommended Posts

Hey Everyone,

I'm in the process of creating a website (I'm still in the trial phase so can't share the link).

Theme: Clarkson 7.1

My Problem:
The logo we are using for our website is white. This works really well as it sits on an edge to edge banner on each page throughout the site (see attached for an example).

However, when creating individual blog pages there is no option to choose a header image (Squarespace Support also confirmed that this can't be done on blog pages).

As our logo is white, you can't see it (see attached for an example).

Potential Solution 1:
I found CSS online that allows you to upload a new logo and then apply it to a specific page.
This works on all pages throughout the website except for blog pages unfortunately.

CSS Code:
 

<style> 
div.header-title-logo a {
content:url("https://static1.squarespace.com/static/5611841fe4b0f085582f2aa7/t/5ddc2f3f2e5a7339b69c08b2/1578936481584/?format=1500w") !important;     
max-width: 290px;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}
</style>


Website I found the code from:
https://www.maryphilip.com/the-blog/how-do-you-change-the-logo-on-a-single-page-squarespace#:~:text=Head%20over%20to%20Design%20%3E%20Custom,downloaded%20and%20copy%20the%20url.

To do this, you choose Settings > Advanced (on a specific page) and then copy the above code in with the image url.
Blog pages don't have that option - only formatting options.

Potential Solution 2:
To change the background section color on blog pages.
I changed the background color to a light grey so that the white logo could be seen.
However, I really don't like it (see attached).

Does anyone know, is there a way to upload a different logo for individual blog pages?
Or is there a way to upload a header image for individual blog pages?

We want to keep the edge to edge design so want to keep the navigation bar transparent (we tried making the nav bar white and using a colored version of the logo but edge to edge just looks so much better.

I would really appreciate if someone had a solution.

Many thanks in advance - and apologies for the long description.

Cheers,
Shuffles.

Screenshot 2021-02-11 at 12.31.24.png

Screenshot 2021-02-11 at 12.31.34.png

Screenshot 2021-02-11 at 16.31.30.png

Link to comment

Ok, I just found CSS code to invert the logo - so now it's black (see attached).

It looks great but does anyone know if you can choose the color?

CSS Code:
 

<style>
 .view-item .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Screenshot 2021-02-11 at 16.44.59.png

Link to comment

Try this code

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

 

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
  • 2 weeks later...
On 2/23/2021 at 7:29 PM, ilonapoutanen said:

I have a similar problem. My clients logo is beige and I would like to change the header color on blog post page so that logo is visible. Who could help me?

https://silver-caribou-ejyk.squarespace.com/blogi/blog-post-title-one-3kzs4
password: kotoisa

Hi. Add to Blog Page Header

<style>
.view-item img {
    content: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
}
</style>

 

Edited by tuanphan
update a shorter code

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
  • 6 months later...
On 3/5/2021 at 6:15 AM, tuanphan said:

Hi. Add to Blog Page Header

<style>
.view-item .header-title-logo img {
    visibility: hidden;
}
.view-item .header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

 

How do you upload the logo and get the url?

Link to comment
  • 1 year later...

Hi all,

I'm having similar issues here. I can get tuanphan's code (thanks) to work on my Blog section (albeit adapting some of the CSS classes to work with my specific template), but I only want this new logo to appear on 'post' pages - not on the Blog listing page.

Does anyone know a way to adapt this, so it only appears on the post pages?

Thanks in advance.

Link to comment
On 10/17/2022 at 11:09 PM, JohnNightingale said:

Hi all,

I'm having similar issues here. I can get tuanphan's code (thanks) to work on my Blog section (albeit adapting some of the CSS classes to work with my specific template), but I only want this new logo to appear on 'post' pages - not on the Blog listing page.

Does anyone know a way to adapt this, so it only appears on the post pages?

Thanks in advance.

In above comments, I posted 2 code, first for blog list + blog posts, second for blog posts. Which code did you use?

This code for blog post individuals

https://forum.squarespace.com/topic/184448-using-a-different-logo-on-blog-posts/?do=findComment&comment=446757

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
  • 10 months later...
On 8/19/2023 at 9:08 PM, Dirksonic said:

Thank you @tuanphan!

The code works for the logo in my blog post, but it only works on desktop, not mobile.

Is there way to make it work on mobile as well?

see example: https://www.charge-volt.org/test

Regards,

😄

Use this new code

<style>
header#header img {
   content: url(https://cdn.pixabay.com/photo/2023/07/10/06/52/trail-8117575_1280.jpg);
}
</style>

 

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

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.