AustinRandall Posted October 8, 2019 Share Posted October 8, 2019 Using version 7.1 - all custom code/script/CSS solutions found thus far for differing header logos are specific to templates in Version 7.0 and don't seem to work. Have tried changing element tags with no luck. Ultimately need to use white logo on some pages and full color logo on others. Already have urls to logos established via Custom CSS > Manage Custom Files. Assuming a Page Header Code injection, but really just at a loss at this point! Thanks in advance for the input. Link to comment
tuanphan Posted October 8, 2019 Share Posted October 8, 2019 You can use Custom CSS :after or :before to insert an image as logo on some specific pages. Need site url to check. @AustinRandall Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
basakatac Posted October 9, 2019 Share Posted October 9, 2019 have the same issue. Any help would be appreciated Link to comment
brandon Posted October 10, 2019 Share Posted October 10, 2019 @AustinRandall: Tuan is correct that it is easiest to provide (and test) solutions if you provide a site/page URL and the view-only password if applicable @basakatac: You might consider asking a new question instead (and providing the info mentioned). You may also find the following helpful, since this question has been asked quite a number of times before. Although the exact CSS used varies based on template, version and your logo, the methods still apply. Methods used include: Using :before and/or :after pseudo elements Using CSS Filters (best if simply inverting black to white or vice versa, but will work for some color logos) Using Javascript to change src attribute In general, if using the CSS Filters approach (#2), you can target the logo in 7.1 like so (using your own collection-ID as applicable). By including the collection ID in the CSS, you no longer have to worry about only adding the CSS to specific pages, because the rule itself specifies which pages to apply to. #collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img { /* For black/white */ -webkit-filter: invert(100%); filter: invert(1); /* Or for converting color to white, something like this (depends on logo) */ // filter: grayscale(100%) brightness(350%); } Where to I insert this code? You add it via the CSS Editor How do I find my collection ID? You can identify the collection ID by using your browsers developer tools/inspector and viewing the ID of the <body> element. The other methods listed above (#1 and #3) are also viable. Related Links: https://forum.squarespace.com/topic/82174-tremont-template-how-can-i-keep-a-white-logo-in-the-homepage-and-a-black-logo-everywhere-else/ https://forum.squarespace.com/topic/3424-different-logo-for-mobile-nav-bar/#comment-19904 https://forum.squarespace.com/topic/2566-change-logo-for-specific-page/#comment-14932 https://forum.squarespace.com/topic/61248-changing-logo-colour-on-homepage-vs-other-pages-marta-theme/#comment-263327 https://forum.squarespace.com/topic/22800-forte-changing-black-logo-to-white-logo/#comment-211315 https://forum.squarespace.com/topic/5214-change-image-colour-on-hover-for-one-imagepage-only/#comment-29997 And many others If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Guest Posted October 11, 2019 Share Posted October 11, 2019 On 10/9/2019 at 7:48 PM, brandon said:: You might consider asking a new question instead (and providing the info mentioned). In general, if using the CSS Filters approach, you can target the logo in 7.1 like so (using your own collection-ID as applicable: #collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img { /* For black/white */ -webkit-filter: invert(100%); filter: invert(1); /* Or for converting color to white, something like this (depends on logo) */ // filter: grayscale(100%) brightness(350%); } This worked perfectly for 7.1 on inverting the logo on the homepage. Many thanks! Link to comment
basakatac Posted October 14, 2019 Share Posted October 14, 2019 Hi @brandon I tried the following code and it reversed the colors of the background image. Do you have any suggestions? On 10/9/2019 at 7:48 PM, brandon said: #collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img { /* For black/white */ -webkit-filter: invert(100%); filter: invert(1); /* Or for converting color to white, something like this (depends on logo) */ // filter: grayscale(100%) brightness(350%); } Edit: My website link is https://shallot-piano-yxfr.squarespace.com/config/ and the password to see it:11223344. I use version 7.1 and the template is Almar. The problem occurred is; the original logo (black) changed on the pages that supposed to remain black, and the banner images on the pages I want the white logo, is reversed the image colors. Also, my logo includes green rather than black so it might effected the situation, I don't know... Link to comment
basakatac Posted October 15, 2019 Share Posted October 15, 2019 hello again @brandon, just updated so that you can see. Thank you so much 2 hours ago, brandon said: @basakatac: You can still post a link to trial sites. Be sure to set your site visibility to be password-protected, and provide that view-only password along with the link to the site/page in question. Link to comment
ddl_ellsie Posted October 17, 2019 Share Posted October 17, 2019 On 10/10/2019 at 3:48 AM, brandon said: In general, if using the CSS Filters approach, you can target the logo in 7.1 like so (using your own collection-ID as applicable: #collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img { /* For black/white */ -webkit-filter: invert(100%); filter: invert(1); /* Or for converting color to white, something like this (depends on logo) */ // filter: grayscale(100%) brightness(350%); } The other methods are also applicable as well. Hi @brandonand @Vanz - could you please explain how you use this code for a 7.1 template? The template is here: https://www.squarespace.com/templates/photography?onboarding_v7_1_0819=minimal_template_store_v7_1 It's the Cath Quincy one. I'm not sure whether to insert this code in the Design - Custom CSS section or the Advanced CSS section on the specific page I want to change? Any help much appreciated!! Link to comment
ddl_ellsie Posted October 17, 2019 Share Posted October 17, 2019 @brandon and @Vanz don't worry, I figured it out. Below for others 🙂 Main thing to do is to find the CollectionID for the specific page you want to change the logo for in View Page Source and replace the blue text below with your unique ID. Then insert this code into the Advanced settings - Page header code injection. <style> #collection-5da087964487bb406dce3057 .header-title-logo img { -webkit-filter: invert(100%); filter: invert(1); } </style> Link to comment
ChrisAita Posted October 17, 2019 Share Posted October 17, 2019 8 hours ago, ddl_ellsie said: @brandon and @Vanz don't worry, I figured it out. Below for others 🙂 Main thing to do is to find the CollectionID for the specific page you want to change the logo for in View Page Source and replace the blue text below with your unique ID. Then insert this code into the Advanced settings - Page header code injection. <style> #collection-5da087964487bb406dce3057 .header-title-logo img { -webkit-filter: invert(100%); filter: invert(1); } </style> How did you find the ID? I can't seem to find it. Link to comment
ChrisAita Posted October 18, 2019 Share Posted October 18, 2019 9 hours ago, brandon said: @ChrisAita: See my updated response above for an expanded explanation and image. This happened instead. #collection-5da7e850aede156263094240 .header-title-logo img { -webkit-filter: invert(100%); filter: invert(1); } Link to comment
colin.irwin Posted October 18, 2019 Share Posted October 18, 2019 3 hours ago, ChrisAita said: That looks like you've pasted the css in the wrong place. It should be in the Custom CSS section: Log in to admin then go to Design > Custom CSS If you're looking for a Squarespace Developer, drop me a line. Link to comment
ChrisAita Posted October 18, 2019 Share Posted October 18, 2019 3 hours ago, colin.irwin said: That looks like you've pasted the css in the wrong place. It should be in the Custom CSS section: Log in to admin then go to Design > Custom CSS That is where I did put it, it's populating there for whatever reason. EDIT: Clarification Link to comment
madsnature Posted November 28, 2020 Share Posted November 28, 2020 I'm using the below to make our logo black on the white blog pages, but I prefer it be a brand colour ie. #1e484d. Is there a way to specify a filter color? I've tried the hue-rotate, but can't figure it out. .view-item .header-title-logo a img { filter: invert(100%) ; } Also looked at this, but it's for going from a colour to white, rather than white to a color: On 10/17/2019 at 9:29 PM, ddl_ellsie said: #collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img { /* For black/white */ -webkit-filter: invert(100%); filter: invert(1); /* Or for converting color to white, something like this (depends on logo) */ // filter: grayscale(100%) brightness(350%); } Link to page: https://snail-bear-db64.squarespace.com/blog/mantas-right-before-my-eyes Thanks so much! Mads Digital & Communications DirectorMarine Megafauna Foundation I like big fish and I cannot lie. Link to comment
madsnature Posted November 28, 2020 Share Posted November 28, 2020 I found an answer that let's me upload a new logo per Blog set: Mads Digital & Communications DirectorMarine Megafauna Foundation I like big fish and I cannot lie. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.