How to change logo on specific pages in 7.1?

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>

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>

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/

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

Thank you, it works for desktop and mobile for me.   Appreciate your hep!

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>

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>

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/

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

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?

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

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

On 11/25/2023 at 11:13 PM, tuanphan said:

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

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 🙂

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.

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

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.

Hi! I am looking for help with this as well. Given the different background colors on different pages, the logo I created is sometimes not visible. My website url is: https://clarinet-flamingo-6f8c.squarespace.com/

And here are the logo files:

- For the homepage, "event details", "accommodations", "registry", and "contact us" ->  white logo (Untitled (4))

- For pages: "our story", "krakow guide", "rsvp", and "rsvp (secondary)" -> green logo (Untitled (5))

I would appreciate some help as I have no coding skills and don't want to mess up the whole website...

On 7/20/2024 at 1:06 AM, olartyfikiewicz said:

Hi! I am looking for help with this as well. Given the different background colors on different pages, the logo I created is sometimes not visible. My website url is: https://clarinet-flamingo-6f8c.squarespace.com/

And here are the logo files:

- For the homepage, "event details", "accommodations", "registry", and "contact us" ->  white logo (Untitled (4))

- For pages: "our story", "krakow guide", "rsvp", and "rsvp (secondary)" -> green logo (Untitled (5))

I would appreciate some help as I have no coding skills and don't want to mess up the whole website...

 

Your site is private now. Provide it a protected password so we can check it

On 7/21/2024 at 11:16 AM, HoaLT said:

Your site is private now. Provide it a protected password so we can check it

Should be updated now. The password is welcome12

For the pages that you want to set them with the green color

#page .header-title-logo {
  filter:brightness(0.4);
}

Example for /krakow-guide page

#collection-66554e33aeb13932824d347d .header-title-logo {
  filter:brightness(0.4);
}

Use the following extension to find page id: Squarespace ID Finder

Thank you! Is it possible to do this on a personal plan? Or do I need to upgrade?

1 hour ago, olartyfikiewicz said:

Thank you! Is it possible to do this on a personal plan? Or do I need to upgrade?

This is CSS code which is already available on the personal plan.

I went through the whole thread. It still doesn't work out well for me completely.

I successfully inverted my logo from white to black for my Blog, as suggested with BODY CSS.

But I don't know how to do it for my portfolio link gneieyip.com/photo and its subpages.

Please shed light on this. Thank you very much!

My logos are here: 
 

On 7/25/2024 at 10:53 AM, HoaLT said:

This is CSS code which is already available on the personal plan.

It worked. Thank you so much! 🙂

On 7/26/2024 at 12:24 PM, g3ni3yip said:

I went through the whole thread. It still doesn't work out well for me completely.

I successfully inverted my logo from white to black for my Blog, as suggested with BODY CSS.

But I don't know how to do it for my portfolio link gneieyip.com/photo and its subpages.

Please shed light on this. Thank you very much!

My logos are here: 
 

I checked that it is white now and we can not see it cause the background is the same color. Do we need to invert color for it (black)? Try the following code for /photo page

#collection-669f881e804c9f5cf2c66993 .header-title-logo {
  filter: invert(1);
}

Hope it can help

On 7/27/2024 at 11:48 PM, HoaLT said:

I checked that it is white now and we can not see it cause the background is the same color. Do we need to invert color for it (black)? Try the following code for /photo page

#collection-669f881e804c9f5cf2c66993 .header-title-logo {
  filter: invert(1);
}

Hope it can help

It didn't work the same for the blog 😞 Thank you very much for your help.

The portfolio link /photo now has an inverted logo but not in the subpages ("projects")
What do I need to do to make its subpages, such as /photo/singapore
/photo/sri-lanka also get the black logo? 

Thank you very much again.