talya_pdx Posted March 1, 2020 Share Posted March 1, 2020 Site URL: https://www.talyasanders.com Hi, I'm trying to change the logo I use on my homepage so it's different than the ones on all other header pages of my site -- for legibility, I need different colors in the logo. I can't figure out how to do that! I'm using Version 7.1 and I think this is my Template ID: 5c5a519771c10ba3470d8101. Thanks! Link to comment
tuanphan Posted March 2, 2020 Share Posted March 2, 2020 To change logo on One Page, add this code to Page Settings > Advanced > Header <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; } </style> AsiaForum 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
coindisplays Posted March 6, 2020 Share Posted March 6, 2020 Hi @tuanphan, I want to change the logo on only one page of my site. Is this the code that I need? On this page of my site, I would like to change the logo that you see there at the top to a different one. https://www.coindisplays.com/home-goods-and-decor If possible, where do I load the new logo? Thanks, Paul Link to comment
tuanphan Posted March 14, 2020 Share Posted March 14, 2020 On 3/7/2020 at 3:00 AM, coindisplays said: Hi @tuanphan, I want to change the logo on only one page of my site. Is this the code that I need? On this page of my site, I would like to change the logo that you see there at the top to a different one. https://www.coindisplays.com/home-goods-and-decor If possible, where do I load the new logo? Thanks, Paul <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; } </style> 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
peterbjerg Posted March 26, 2020 Share Posted March 26, 2020 Hi @tuanphan, Can I use this script for a version 7.1 site too? Client want different color site logo ONLY on landing page/"cover page". I also need to know how to center the logo. I should change the image location url to what ever I get as url adress from uploading alt version of site logo, correct? Link to comment
tuanphan Posted March 26, 2020 Share Posted March 26, 2020 3 hours ago, peterbjerg said: Hi @tuanphan, Can I use this script for a version 7.1 site too? Client want different color site logo ONLY on landing page/"cover page". I also need to know how to center the logo. I should change the image location url to what ever I get as url adress from uploading alt version of site logo, correct? above code for SS 7.1, one page. So yes, you can use on client's site. Center logo? You mean left-right menu, center logo? you can upload image via this guide https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files the image has url yoursite.com/s/image eg: beaverhero.com/s/beach.png 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
peterbjerg Posted March 27, 2020 Share Posted March 27, 2020 @tuanphan I tried, but it did not work. Site: https://arenastrategy.squarespace.com/cover-page Password: Arenasite All together, the exiting code for this page is: <style> /* hide footer */ footer#footer-sections { display: none; } /* remove padding top first section */ article>section:First-child { padding-top: 0 !important; } /* hide burger menu */ .burger-box, .header-nav-list, .header-actions { display:none !important; } /* hide logo */ .header-title-logo img { visibility: hidden; } </style> ADDING your code, but with link to my image, looks like this, but didnt work 😞 Maybe you can help? <style> /* hide footer */ footer#footer-sections { display: none; } /* remove padding top first section */ article>section:First-child { padding-top: 0 !important; } /* hide burger menu */ .burger-box, .header-nav-list, .header-actions { display:none !important; } /* hide logo */ .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://static1.squarespace.com/static/5e3832dd5baacc6c9cad3ad6/t/5e7d04f045189a6da48c2121/1585251568273/Arena-logo-white.png); background-size: cover; background-repeat: no-repeat; } </style> Link to comment
tuanphan Posted March 27, 2020 Share Posted March 27, 2020 add !important to after background-image: url(https://static1.squarespace.com/static/5e3832dd5baacc6c9cad3ad6/t/5e7d04f045189a6da48c2121/1585251568273/Arena-logo-white.png) !important; peterbjerg 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
peterbjerg Posted March 27, 2020 Share Posted March 27, 2020 Wonderfull, THAT worked!! Could you also tell me what code to add to center the image/alt logo horizontally? Link to comment
cheapsea Posted April 6, 2020 Share Posted April 6, 2020 On 3/2/2020 at 12:50 PM, tuanphan said: To change logo on One Page, add this code to Page Settings > Advanced > Header <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; } </style> Hi there! I added this code and it worked for my 7.1 site however the very bottom of the logo has been chopped off. Do you know why this might be? Is there anyway to fix this? The white one is the new one that was coded in and the blue one is the original. Link to comment
tuanphan Posted April 7, 2020 Share Posted April 7, 2020 14 hours ago, Ned said: Hi there! I added this code and it worked for my 7.1 site however the very bottom of the logo has been chopped off. Do you know why this might be? Is there anyway to fix this? The white one is the new one that was coded in and the blue one is the original. edit background-size: cover to background-size: contain; if it doesn't work, can you share link to your site/which plan do you use? (personal or business) cheapsea 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
Celina Posted May 11, 2020 Share Posted May 11, 2020 Hi @tuanphan, Thanks for your great insights! I'm wondering if you could perhaps help me tweak the above mentioned code so that is doesn't override all my pages.. I have a logo with white text on the homepage and grey text for all other pages, but with this css injection i only get the desired result after refreshing each page. Can you help? Page: https://www.valleyfoundation.nl/ Current code injection: <style> a.Header-branding img { visibility: hidden; } a.Header-branding { background-image: url(https://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.pnghttps://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.png); visibility: visible; background-size: cover; } </style> Thank you so much!!! Link to comment
Nimosa Posted May 11, 2020 Share Posted May 11, 2020 3 hours ago, Celina said: Hi @tuanphan, Thanks for your great insights! I'm wondering if you could perhaps help me tweak the above mentioned code so that is doesn't override all my pages.. I have a logo with white text on the homepage and grey text for all other pages, but with this css injection i only get the desired result after refreshing each page. Can you help? Page: https://www.valleyfoundation.nl/ Current code injection: <style> a.Header-branding img { visibility: hidden; } a.Header-branding { background-image: url(https://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.pnghttps://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.png); visibility: visible; background-size: cover; } </style> Thank you so much!!! @Celina I have the same issue. In my case, it shows up in the browser I am logged into. When I try to open the page on some other computer, it doesn't work. Link to comment
tuanphan Posted May 12, 2020 Share Posted May 12, 2020 21 hours ago, Celina said: Hi @tuanphan, Thanks for your great insights! I'm wondering if you could perhaps help me tweak the above mentioned code so that is doesn't override all my pages.. I have a logo with white text on the homepage and grey text for all other pages, but with this css injection i only get the desired result after refreshing each page. Can you help? Page: https://www.valleyfoundation.nl/ Current code injection: <style> a.Header-branding img { visibility: hidden; } a.Header-branding { background-image: url(https://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.pnghttps://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.png); visibility: visible; background-size: cover; } </style> Thank you so much!!! 17 hours ago, Nimosa said: @Celina I have the same issue. In my case, it shows up in the browser I am logged into. When I try to open the page on some other computer, it doesn't work. Disalbe Ajax Loading. https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading Celina 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
BONICA Posted July 12, 2021 Share Posted July 12, 2021 @tuanphan Hello! Your code worked for me for having your example image of the coffee beans, but when I tried to use my own image it dosnt work. I have uploaded the images to my custom css files in Design > Custom CSS and tried to use that URL but it didnt work. I also followed the guide you shared ( https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files?_ga=2.126154952.473549274.1626051893-1584433839.1621909610&_gac=1.191221976.1626051893.Cj0KCQjwwLKFBhDPARIsAPzPi-JzBek1AdzIUjPWwC2VN2dGjeIKyA2lD95ZPOb9NRWgiOdbAgp_z6saArIIEALw_wcB ) but was not able to figure it out. This is the image I would like it to be The site is https://capybera-bronze-jlt5.squarespace.com/ password is 'master' Link to comment
tuanphan Posted July 13, 2021 Share Posted July 13, 2021 On 7/12/2021 at 10:06 AM, BONICA said: @tuanphan Hello! Your code worked for me for having your example image of the coffee beans, but when I tried to use my own image it dosnt work. I have uploaded the images to my custom css files in Design > Custom CSS and tried to use that URL but it didnt work. I also followed the guide you shared ( https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files?_ga=2.126154952.473549274.1626051893-1584433839.1621909610&_gac=1.191221976.1626051893.Cj0KCQjwwLKFBhDPARIsAPzPi-JzBek1AdzIUjPWwC2VN2dGjeIKyA2lD95ZPOb9NRWgiOdbAgp_z6saArIIEALw_wcB ) but was not able to figure it out. This is the image I would like it to be The site is https://capybera-bronze-jlt5.squarespace.com/ password is 'master' Which image url did you insert? Can you paste full code here? We can check easier. You can also use this code <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-size: contain; background-repeat: no-repeat; background-image: url(https://beaverhero.com/wp-content/uploads/2021/07/newlogo-min.png); } </style> 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
Lou_90_ Posted July 29, 2021 Share Posted July 29, 2021 hey this code works well, but on one of the pages I want to replace the logo with the exact same logo, plus an extra word on the right. So the height needs to be the same. This code cuts off the extra width, or if I change it to background size: contain, it shrinks the whole logo. Is there another option? thanks Link to comment
tuanphan Posted July 30, 2021 Share Posted July 30, 2021 On 7/29/2021 at 1:56 PM, Lou_90_ said: hey this code works well, but on one of the pages I want to replace the logo with the exact same logo, plus an extra word on the right. So the height needs to be the same. This code cuts off the extra width, or if I change it to background size: contain, it shrinks the whole logo. Is there another option? thanks Do/will you use Personal or Business Plan? If Business Plan, we can use another code 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
Lou_90_ Posted August 3, 2021 Share Posted August 3, 2021 On 7/30/2021 at 6:58 PM, tuanphan said: Do/will you use Personal or Business Plan? If Business Plan, we can use another code Hey, it will be a business plan. Thanks Link to comment
tuanphan Posted August 3, 2021 Share Posted August 3, 2021 4 hours ago, Lou_90_ said: Hey, it will be a business plan. Thanks okay, we can use jQuery code. Can you 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
Lou_90_ Posted August 10, 2021 Share Posted August 10, 2021 https://hypersphere-asparagus-y8a4.squarespace.com/ pass: louisecrozier. The page with the alternate logo is https://hypersphere-asparagus-y8a4.squarespace.com/kids-drama-studio Thanks Link to comment
tuanphan Posted August 12, 2021 Share Posted August 12, 2021 On 8/10/2021 at 8:59 AM, Lou_90_ said: https://hypersphere-asparagus-y8a4.squarespace.com/ pass: louisecrozier. The page with the alternate logo is https://hypersphere-asparagus-y8a4.squarespace.com/kids-drama-studio Thanks Add this to Kids Drama Studio Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-title-logo img').attr('src','https://cdn.pixabay.com/photo/2021/08/05/20/31/penguins-6524840__340.jpg'); }); </script> Replace with new logo 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
Lou_90_ Posted August 18, 2021 Share Posted August 18, 2021 On 8/12/2021 at 5:41 PM, tuanphan said: Add this to Kids Drama Studio Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-title-logo img').attr('src','https://cdn.pixabay.com/photo/2021/08/05/20/31/penguins-6524840__340.jpg'); }); </script> Replace with new logo url Thanks so much!!! Link to comment
iamRob Posted October 31, 2021 Share Posted October 31, 2021 Hi @tuanphan, is there a way to get a bigger logo on the homepage with a personal plan as well? Thanks 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