Using A Different Logo On Blog 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.

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>

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>

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

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>

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?

19 hours ago, JennWalker said:

How do you upload the logo and get the url?

Follow this guide: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Thank you!

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.

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

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,

😄

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>

Thank you @tuanphan! This works.

On 8/24/2023 at 2:58 PM, Dirksonic said:

Thank you @tuanphan! This works.

I wrote a post on this, you can see if you have problem with changing logo on other page (blog, event, shop, cart..)

Hello, I was searching for an answer and found this thread. I have a client with a blog on a personal plan. I have header code injection for the main blog page that inverts the logo from white to black. However, I am unable to add the code to the blog item code injection--I am assuming due to the personal plan.

Is there a CSS workaround to invert the logo from white to black on all blog posts? Thank you!

https://www.getayerborne.com/blog/the-power-of-uniqueness-in-real-estate

15 hours ago, Jaime_north8 said:

Hello, I was searching for an answer and found this thread. I have a client with a blog on a personal plan. I have header code injection for the main blog page that inverts the logo from white to black. However, I am unable to add the code to the blog item code injection--I am assuming due to the personal plan.

Is there a CSS workaround to invert the logo from white to black on all blog posts? Thank you!

https://www.getayerborne.com/blog/the-power-of-uniqueness-in-real-estate

You can use this code to Website > Website Tools > Custom CSS

body[class*="type-blog"].view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Thank you so much! I really appreciate your help.