ryanscv Posted June 4, 2022 Share Posted June 4, 2022 Hello! Is there a way to have the heading logo change based on the dynamic background for the page? It seems silly that there is a dynamic header design option without the ability to implement at least a light and dark logo version. Thanks for the help! CraigN 1 Link to comment
tuanphan Posted June 10, 2022 Share Posted June 10, 2022 You can add custom code on each page to do this. If you still need help, please share link to your site 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
CraigN Posted September 5, 2022 Share Posted September 5, 2022 Bumping this for the same issue. Dynamic header is a great feature except it only applies to text and buttons. It would be great to be able to upload dark and light logo options to update dynamically too! I also have the added dilemma of wanting to use the gradient behind the nav on the homepage (as I'm using a video background), and then dynamic on all other pages.https://cod-hibiscus-mlx3.squarespace.com pass: justlove ✦✦Co-founder Hundred Studio 👋 Link to comment
tuanphan Posted September 6, 2022 Share Posted September 6, 2022 16 hours ago, CraigN said: Bumping this for the same issue. Dynamic header is a great feature except it only applies to text and buttons. It would be great to be able to upload dark and light logo options to update dynamically too! I also have the added dilemma of wanting to use the gradient behind the nav on the homepage (as I'm using a video background), and then dynamic on all other pages.https://cod-hibiscus-mlx3.squarespace.com pass: justlove You found the solution or you need help? 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
CraigN Posted September 6, 2022 Share Posted September 6, 2022 6 hours ago, tuanphan said: You found the solution or you need help? I still need help please, the homepage and about page work because they have dark headers (I uploaded a white logo). But on the events page this then gets lost, where ideally it would show a dark version of the logo. ✦✦Co-founder Hundred Studio 👋 Link to comment
tuanphan Posted September 7, 2022 Share Posted September 7, 2022 22 hours ago, CraigN said: I still need help please, the homepage and about page work because they have dark headers (I uploaded a white logo). But on the events page this then gets lost, where ideally it would show a dark version of the logo. Try adding to Design > Custom CSS body[class*="type-blog"], [class*="type-events"], [class*="type-products"] { header#header img { filter: invert(1); -webkit-filter: invert(1); } } CraigN and skarn 1 1 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
CraigN Posted September 8, 2022 Share Posted September 8, 2022 This works, brilliant thank you @tuanphan! ✦✦Co-founder Hundred Studio 👋 Link to comment
hellgateindustries Posted October 5, 2022 Share Posted October 5, 2022 Holy Cow. ive been looking for the solution to this, and here it is in 3 seconds. thank you! Link to comment
JeSuis Posted November 16, 2022 Share Posted November 16, 2022 Is there any chance of being able to change the dark colour, to a grey and not a solid black? I've been wanting this solution for ages and that code works a treat, but would just love if i could change to a grey colour. Thanks! Link to comment
tuanphan Posted November 20, 2022 Share Posted November 20, 2022 On 11/16/2022 at 11:31 PM, JeSuis said: Is there any chance of being able to change the dark colour, to a grey and not a solid black? I've been wanting this solution for ages and that code works a treat, but would just love if i could change to a grey colour. Thanks! Hi,No The code can change to white or black only To change to grey, you need to use this new code, with new grey image url body[class*="type-blog"], [class*="type-events"], [class*="type-products"] { header#header img { content: url(https://cdn.pixabay.com/photo/2022/10/21/10/51/snail-7536762_1280.jpg); } } Replace Pixabay image with a grey image url 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
simon Posted January 24 Share Posted January 24 For a simple inverting of the header logo color site wide, this works. Place in your Custom CSS: //Invert header logo color on dark themed Sections .dark, .dark-bold, .black, .black-bold { &.header .header-title-logo a { filter: invert(1); -webkit-filter: invert(1); }} Thanks to https://spacesites.com.au/tips/squarespace-71-2-methods-to-swap-out-logos-colour-sections-and-specific-pages for the tip and cheat sheet on theme colors. Alternatively, you could switch out the logo graphic as described in the spacesite.com link above. Link to comment
MJB1923 Posted February 3 Share Posted February 3 Wondering if/how this code would work on my site? I have images in the header of all pages, so the white logo works as intended. However on the individual blog post pages, I cannot do that. So I had to give the pages a light color background so that the white logo will appear. I don't love this. I would prefer the blog pages were white background like the rest of the site. So is there a way to code so that each individual blog post would have a dark header area only (and then I can leave the rest of the page white)? Thank you! Site is https://www.grandonelounge.com On 9/7/2022 at 9:44 AM, tuanphan said: Try adding to Design > Custom CSS body[class*="type-blog"], [class*="type-events"], [class*="type-products"] { header#header img { filter: invert(1); -webkit-filter: invert(1); } } Link to comment
tuanphan Posted February 5 Share Posted February 5 On 2/3/2023 at 7:15 PM, MJB1923 said: Wondering if/how this code would work on my site? I have images in the header of all pages, so the white logo works as intended. However on the individual blog post pages, I cannot do that. So I had to give the pages a light color background so that the white logo will appear. I don't love this. I would prefer the blog pages were white background like the rest of the site. So is there a way to code so that each individual blog post would have a dark header area only (and then I can leave the rest of the page white)? Thank you! Site is https://www.grandonelounge.com Use this body[class*="type-blog"].view-item header#header img { filter: invert(1); -webkit-filter: invert(1); } 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
MJB1923 Posted March 6 Share Posted March 6 On 2/4/2023 at 10:26 PM, tuanphan said: body[class*="type-blog"].view-item header#header img { filter: invert(1); -webkit-filter: invert(1); } I will give that a try -- thank you! Link to comment
Thijs00 Posted April 4 Share Posted April 4 (edited) Hi Tuan, Thank you for you help on this forum, I have found plenty of solutions from you al ready. Now I have the same question as above, however, I would like to change the picture of the logo on all the lighter pages of my website. Maybe a combo of these two? //Invert header logo color on dark themed Sections .dark, .dark-bold, .black, .black-bold { &.header .header-title-logo a { filter: invert(1); -webkit-filter: invert(1); }} And this Quote body[class*="type-blog"], [class*="type-events"], [class*="type-products"] { header#header img { content: url(https://images.squarespace-cdn.com/content/62aba5522f5ccd5bc3b91ed1/23be3678-e89f-40b3-9f03-20ebc474fadb/Artboard+4.png?content-type=image%2Fpng); } } Would that be possible? This is an example of my SP pages with the faulty logo color https://bronze-arugula-pk75.squarespace.com/mission Thanks in advance Thijs Edited April 4 by Thijs00 Link to comment
tuanphan Posted April 5 Share Posted April 5 On 4/4/2023 at 5:17 PM, Thijs00 said: Hi Tuan, Thank you for you help on this forum, I have found plenty of solutions from you al ready. Now I have the same question as above, however, I would like to change the picture of the logo on all the lighter pages of my website. Maybe a combo of these two? //Invert header logo color on dark themed Sections .dark, .dark-bold, .black, .black-bold { &.header .header-title-logo a { filter: invert(1); -webkit-filter: invert(1); }} And this Would that be possible? This is an example of my SP pages with the faulty logo color https://bronze-arugula-pk75.squarespace.com/mission Thanks in advance Thijs You can try :not(.dark), :not(.dark-bold), :not(.black), :not(.black-bold) { &.header .header-title-logo a { filter: invert(1); -webkit-filter: invert(1); }} 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
Thijs00 Posted April 6 Share Posted April 6 //logo kleur dynamisch body [class*='collection-type-blog'], [class*='collection-62aba8aa57c97a47c18f05fa'], [class*='collection-62f104a3b403ca581b0d89ee'], { header#header img { content: url(https://images.squarespace-cdn.com/content/62aba5522f5ccd5bc3b91ed1/b85b097d-2597-429c-922a-3f0bfa142e1a/Artboard+2.png?content-type=image%2Fpng); } } I have figured out a different way, I have the reversed the standard logo with a darker colour, and only changed the homepage and some extra pages manually. This work perfect. Thanks for your help. tuanphan 1 Link to comment
crabfrog Posted April 16 Share Posted April 16 Holy cow. Ty tuanphan what an elegant/quick solution. Just popping in to say thank you, you saved me hours of trial and error. tuanphan 1 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