Jump to content

Change the color of my logo on a different page

Go to solution Solved by tuanphan,

Recommended Posts

  • leilollipop changed the title to Change the color of my logo on a different page

Hey @leilollipop I don't have a quick fix for an SVG but I do have an older tutorial that can show you how to use a unique logo on an individual page; hope it helps! 

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment
  • Solution
On 7/23/2023 at 4:50 AM, leilollipop said:

Hthis was very helpful, but how do I reflect this change on the mobile version?

Use this code instead

<style>
  header#header img {
  	content: url(paste new logo image url here);
  }
</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

Hello, we managed to get a white logo for the homepage, but when I click on the hamburger icon on mobile, it appears white instead of black on the menu overlay. All other pages have a black logo. How can I change the color of the icon to black on the menu overlay? but keep it white on the homepage

image.png

Link to comment
On 8/1/2023 at 5:16 AM, leilollipop said:

Hello, we managed to get a white logo for the homepage, but when I click on the hamburger icon on mobile, it appears white instead of black on the menu overlay. All other pages have a black logo. How can I change the color of the icon to black on the menu overlay? but keep it white on the homepage

image.png

What is your site url? We can check 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
9 hours ago, leilollipop said:

@tuanphan here is the site: corecompassing.squarespace.com

Thank you so much for all your help!

Change this code

<style>
header#header img {
  	content: url(https://static1.squarespace.com/static/64ade351acf63e69c39ea855/t/64bdef3b011e0221bc1f8632/1690932009584/Logo.svg.png);
  }
</style>

to this

<style>
body:not(.header--menu-open) header#header img {
  	content: url(https://static1.squarespace.com/static/64ade351acf63e69c39ea855/t/64bdef3b011e0221bc1f8632/1690932009584/Logo.svg.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
  • 3 weeks later...

Okay, so this is a super-helpful thread, and using the code, I managed to insert an alternative black logo onto the other pages (without images). The problem I have now is the the custom CSS logos are not the same size as the original white png, because I adjusted the logo heights. How do I account for this adjustment in the CSS?

🙏🏾💚🌈

image.thumb.png.dc0e5617caa0721199748a844a6dc5f2.png

Screenshot2023-08-25at22_39_00.thumb.png.0155499d7c148924ddb488f4ef0478c8.png

Logo Height
 
Mobile Logo Max Height

 

Link to comment
On 8/25/2023 at 9:40 PM, howtodiehappy said:

Okay, so this is a super-helpful thread, and using the code, I managed to insert an alternative black logo onto the other pages (without images). The problem I have now is the the custom CSS logos are not the same size as the original white png, because I adjusted the logo heights. How do I account for this adjustment in the CSS?

🙏🏾💚🌈

image.thumb.png.dc0e5617caa0721199748a844a6dc5f2.png

Screenshot2023-08-25at22_39_00.thumb.png.0155499d7c148924ddb488f4ef0478c8.png

Logo Height
 
 
Mobile Logo Max Height

 

Can you share link to page where you have problem?

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

I'd love to, but the site isn't live yet. 

The issue is that I've used SS's standard image sizing tool in the main header (as per the screengrab), so (obviously) when I add the same image into the CSS, it's smaller (the original size). Options as I see them are:

  1. Add the image size to the CSS;
  2. Insert a larger image into the CSS.

The question is: is option 1 a possibility?

🙏🏾

Link to comment
On 8/29/2023 at 11:41 AM, howtodiehappy said:

I'd love to, but the site isn't live yet. 

The issue is that I've used SS's standard image sizing tool in the main header (as per the screengrab), so (obviously) when I add the same image into the CSS, it's smaller (the original size). Options as I see them are:

  1. Add the image size to the CSS;
  2. Insert a larger image into the CSS.

The question is: is option 1 a possibility?

🙏🏾

You can follow this to share url

 

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
20 hours ago, sofia_fischer said:

Can this be done any other way without having a premium account? I can't post any personalized CSS into single pages...

Yes. Possible. You can edit page > Add a Code Block (any where on page) > Paste code. Code Block and Page Header are similar and Personal/Basic Plan supports Code Block

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.