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

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 post
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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-conten

Posted Images

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 post

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>

 

Link to post
  • 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 .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>

 

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...