tuanphan Posted December 10, 2022 Share Posted December 10, 2022 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
Omer Posted June 21, 2023 Share Posted June 21, 2023 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
Tbird Posted June 21, 2023 Share Posted June 21, 2023 (edited) 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 June 21, 2023 by Tbird Link to comment
tuanphan Posted June 23, 2023 Share Posted June 23, 2023 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
Tbird Posted June 23, 2023 Share Posted June 23, 2023 Thank you, it works for desktop and mobile for me. Appreciate your hep! Link to comment
JoQinaau Posted August 1, 2023 Share Posted August 1, 2023 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
tuanphan Posted August 2, 2023 Share Posted August 2, 2023 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
Sierra_C Posted November 19, 2023 Share Posted November 19, 2023 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
tuanphan Posted November 22, 2023 Share Posted November 22, 2023 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
Sierra_C Posted November 25, 2023 Share Posted November 25, 2023 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
tuanphan Posted November 26, 2023 Share Posted November 26, 2023 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; } Sierra_C 1 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
Sierra_C Posted November 28, 2023 Share Posted November 28, 2023 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 🙂 Link to comment
HaroldA Posted February 19 Share Posted February 19 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
tuanphan Posted February 21 Share Posted February 21 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
HaroldA Posted February 21 Share Posted February 21 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
olartyfikiewicz Posted July 19 Share Posted July 19 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... Link to comment
HoaLT Posted July 21 Share Posted July 21 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 Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
olartyfikiewicz Posted July 24 Share Posted July 24 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 Link to comment
HoaLT Posted July 24 Share Posted July 24 (edited) 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 Edited July 24 by HoaLT olartyfikiewicz 1 Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
olartyfikiewicz Posted July 25 Share Posted July 25 Thank you! Is it possible to do this on a personal plan? Or do I need to upgrade? HoaLT 1 Link to comment
HoaLT Posted July 25 Share Posted July 25 (edited) 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. Edited July 25 by HoaLT olartyfikiewicz 1 Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
g3ni3yip Posted July 26 Share Posted July 26 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: Link to comment
olartyfikiewicz Posted July 27 Share Posted July 27 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! 🙂 HoaLT 1 Link to comment
HoaLT Posted July 27 Share Posted July 27 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 Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
g3ni3yip Posted July 29 Share Posted July 29 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment