Jump to content

How to change logo on specific pages in 7.1?

Go to solution Solved by hotslicedesign,

Recommended Posts

On 12/7/2022 at 5:28 PM, Medvetenkultur said:

Hi!
I have managed to change the logo to a different coloured one at some of my pages (for instance the page "Gallery") by going to the Page settings and paste some code, but for the mobile version I need to fix the size of the logo to max height 78px (that should be the same size as the logo on the other pages).
How do I do that?

Here is my website, no password:

spinach-sprout-hgc2.squarespace.com

Try this code

<style>
  @media screen and (max-width:767px) {
  .header-title-logo img {
    max-height: 78px !important;
}
  }
</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
  • 6 months later...
I used the below code and the logo change worked on computer. However, the 
logo does not update on mobile.


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

Hi, I could use some help customizing my logo for each page.  I want it white on most pages but when the background is white (gallery and location), I want to use the black logo.  I am trying this code but it is not working for me.  I don't think it likes the image URL.  Any pointers?

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/646015e…1/olamaie_logo_black.png
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

 

 

here is my domain:

https://quillfish-tangerine-7mgn.squarespace.com/

Edited by Tbird
Link to comment
On 6/21/2023 at 7:36 AM, Omer said:
I used the below code and the logo change worked on computer. However, the 
logo does not update on mobile.


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

Use this new code

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

Replace example image url with your image url

@Tbird use same 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
  • 1 month later...

HI! I tried to follow the guidance on adding the following code to the advanced code injection area. But nothing changed. Is there something wrong with my code, maybe? (pilinacenterforwellbeing.com)

Here it is:

 

<style>

div.header-title-logo a {

content:url (“https://static1.squarespace.com/static/6311994408ecb731f82e20a5/t/64c9895d83fd7565b33a1092/1690929501555/LOGOmustard+ab821f+PILINA+CENTER+6496x2953.png”)

max-height: 70px;

}

</style>

Link to comment
4 hours ago, JoQinaau said:

HI! I tried to follow the guidance on adding the following code to the advanced code injection area. But nothing changed. Is there something wrong with my code, maybe? (pilinacenterforwellbeing.com)

Here it is:

 

<style>

div.header-title-logo a {

content:url (“https://static1.squarespace.com/static/6311994408ecb731f82e20a5/t/64c9895d83fd7565b33a1092/1690929501555/LOGOmustard+ab821f+PILINA+CENTER+6496x2953.png”)

max-height: 70px;

}

</style>

Use this new code

<style>
header#header img {
content:url(https://static1.squarespace.com/static/6311994408ecb731f82e20a5/t/64c9895d83fd7565b33a1092/1690929501555/LOGOmustard+ab821f+PILINA+CENTER+6496x2953.png);
}
</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
  • 3 months later...
On 6/10/2022 at 1:55 AM, tuanphan said:

Use this code

body[class*="collection-type-blog"] header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
}

 

I'm trying to do something similar for product pages where the main shop page uses the white logo but each of the product pages uses the darker logo. Would this work for that as well? Not sure what I would replace "collection-type-blog" with though.

Here's the website for reference: https://www.caragans.com/

Link to comment
On 11/20/2023 at 2:49 AM, Sierra_C said:

I'm trying to do something similar for product pages where the main shop page uses the white logo but each of the product pages uses the darker logo. Would this work for that as well? Not sure what I would replace "collection-type-blog" with though.

Here's the website for reference: https://www.caragans.com/

Use this for individual products

body[class*="type-products"].view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
}

.view-list = shop page

.view-item = individual products

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
On 11/21/2023 at 7:43 PM, tuanphan said:

Use this for individual products

body[class*="type-products"].view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
}

.view-list = shop page

.view-item = individual products

@tuanphan I tried it in the Custom CSS, but it doesn't seem to be working. Do I need to use it elsewhere?

Link to comment
7 hours ago, Sierra_C said:

@tuanphan I tried it in the Custom CSS, but it doesn't seem to be working. Do I need to use it elsewhere?

It doesn't work because you used another code to hide current logo

image.png.ce9e58d04888775f02d1ffd8eb108cfc.png

Use this new code

body[class*="type-products"].view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
    visibility: visible !important;
}

 

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
On 11/25/2023 at 11:13 PM, tuanphan said:

It doesn't work because you used another code to hide current logo

image.png.ce9e58d04888775f02d1ffd8eb108cfc.png

Use this new code

body[class*="type-products"].view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
    visibility: visible !important;
}

 

That did it! Thank you 🙂

Link to comment
  • 2 months later...

I've read this whole thread but I don't think this is possible to do anymore.   The only option I have is to edit the site header, at which point I get a popup saying I can change the Design or Color.  I can choose Adaptive, Gradient, or Solid.  None of them really do what I need to do.  If I choose a white logo, it is illegible against a white background, and if I choose a black logo, it is illegible against a black background.  The help documentation seems wildly outdated, still referencing 7.0.  From what I can tell, Squarespace has been on 7.1 for at least five years.

Link to comment
On 2/20/2024 at 12:00 AM, HaroldA said:

I've read this whole thread but I don't think this is possible to do anymore.   The only option I have is to edit the site header, at which point I get a popup saying I can change the Design or Color.  I can choose Adaptive, Gradient, or Solid.  None of them really do what I need to do.  If I choose a white logo, it is illegible against a white background, and if I choose a black logo, it is illegible against a black background.  The help documentation seems wildly outdated, still referencing 7.0.  From what I can tell, Squarespace has been on 7.1 for at least five years.

You can share link to page where you have problem, we can help easier

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

I read some more and it seems that it isn't possible on the entry-level Squarespace plan.  I eventually did find the option to add custom code in.   To avoid the frustration I experienced,  go to website, then in the left nav bar with the list of pages, click once on the page you are interested in writing code for, then the gear icon on the right.  Then choose Advanced from the Page Settings menu.   If you have a higher level plan, you can add custom code.

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.