⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
You're welcome - happy to help! For the outline setting, the border color responsds to the selector "color", so this code will change that to blue: .header-icon-border-style-outline {color: blue!important} Hope that helps and best of luck with your project!
Great question - and totally! You can use the transform:Scale property to increase the size. Add this to your code - it will make the icon 125% of it's size. transform: scale(1.25)!important
Thank you so much for this. I was able to get the page icons and the footer icons different colors and use the new Patreon icons (avail from the Patreon website as downloads) as well - thanks again!
This is really helpful, and I'm wondering if there's a way to go one step further and assign unique colors for individual social media icons? I ask because I have 4 instagram accounts I'd like to link to my Squarespace and have the color of each Icon reflect the brand it's associated with. ie/ first instagram social media icon is BLUE, second instagram social media icon is Yellow, third instagram social media icon is RED, fourth instagram social media icon is WHITE, and Facebook social media ICON is blue. Thank you!
Great question Myles - this one took me a minute! You can use the nth-child selector and the aria label to isolate multiple variations. It wont respond to the link itself so if you change the order you'll need to change the code; hope that makes sense. If you have it setup like you described above (ig blue, ig yellow, ig red, ig white, fb blue) this code will work. If you add any icons before the first Instagram icon, be sure to update the nth-child # to reflect that! .header-actions .icon--fill[aria-label="Instagram"]:nth-child(1) svg {fill:blue !important} .header-actions .icon--fill[aria-label="Instagram"]:nth-child(2) svg {fill:yellow !important} .header-actions .icon--fill[aria-label="Instagram"]:nth-child(3) svg {fill:red !important} .header-actions .icon--fill[aria-label="Instagram"]:nth-child(4) svg {fill:white !important} .header-actions .icon--fill[aria-label="Facebook"] svg {fill:blue !important}
Hi, I like to thank you very much. Finally I was able to change the instagram logo color. However, I could change the one in header only. How do I do the same thing for the footer. Thank you
Totally! Repeat the selector but add #footer-sections first and it should update. 👍👍 And if you’re not sure how to update the selector, check out my free CSS basics training for more info: insidethesquare.co/learn
this channel is AWESOME! thank you so much for sharing your knowledge with us, it's made a world of difference in customizing my squarespace site. editing the little details really helps in making it your own. bless ^ -^
Interesting question! I don't have a descrirption feature on my my icons so I'm not sure how to help. If you can comment with a link to a site where this is enabled I'll happily take a look!
Super helpful!!! Quick question, when I change the social media icon color on the desktop header, the shopping cart icon doesn't change. Is there a quick code that will change that as well? Thanks!
hi! it seems like the colour changing only works for icons that are pre-loaded into squarespace as i used custom icons via css for other links as well. any idea on how to change custom icons as well? thanks!
It all depends on your file type. If you uploaded a PNG or JPG, you should be able to edit them in a separate program and upload the correct color. Otherwise you can try adding an image filter to the unique icons. Hope that workaround helps and best of luck with your project :)
Thanks Danielle - and great question! There are two ways to add a code to a single page in Squarespace; check out this tutorial for more info: insidethesquare.co/singlepage
Your videos are immensely helpful, thank you! Just recently learned html/css (still green in the gills, clearly), so what is confusing me when trying to use custom CSS in squarespace is the deviation from the conventional method of using one html file where you target the properties, and then a separate CSS file where you style those targets. With your custom CSS, how are you seemingly cutting out the html targeting step? Or are you looking at the source code before coming up with the CSS? Thanks a ton!
You're welcome, glad I could help. Have your looked at this tutorial I have? It should help! insidethesquare.co/squarespace-tutorials/mobile-menu-image-71
I love your videos great great content! However none of the custom codes seem to work for my website. I wanted to purchase your codes however nothing seems to work for me. Is there a certain setting I should be in? Please help lol
Hey Martha! Nice to e-meet you; I'm so glad you like my work ☺️ You might be using a different version or theme of Squarespace which makes a big difference. Definitely check out my free beginners guide for more info & some troubleshooting tips: insidethesquare.co/learn
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
Thank you very much. Great tutorial. Is there a way to change the color of the outline too in header? Thank you.
You're welcome - happy to help! For the outline setting, the border color responsds to the selector "color", so this code will change that to blue:
.header-icon-border-style-outline {color: blue!important}
Hope that helps and best of luck with your project!
@@InsideTheSquare It worked!! Thank you very much!!
And again you've provided some very helpful tips and tricks!
You are so welcome! I’m happy to hear that my work is helping you with yours! ☺️
Love this! It it possible to add the variation of increasing the size upon hover to the navigation as well? Nav including Nav folders...
Great question - and totally! You can use the transform:Scale property to increase the size. Add this to your code - it will make the icon 125% of it's size.
transform: scale(1.25)!important
fantastic, so helpful!!
Awesome - thanks for letting me know! 🥰
Awesome Becca! thank you!!
Thank you so much for this. I was able to get the page icons and the footer icons different colors and use the new Patreon icons (avail from the Patreon website as downloads) as well - thanks again!
That’s great - glad my tutorial helped! 🙌
This is really helpful, and I'm wondering if there's a way to go one step further and assign unique colors for individual social media icons? I ask because I have 4 instagram accounts I'd like to link to my Squarespace and have the color of each Icon reflect the brand it's associated with. ie/ first instagram social media icon is BLUE, second instagram social media icon is Yellow, third instagram social media icon is RED, fourth instagram social media icon is WHITE, and Facebook social media ICON is blue. Thank you!
Great question Myles - this one took me a minute! You can use the nth-child selector and the aria label to isolate multiple variations. It wont respond to the link itself so if you change the order you'll need to change the code; hope that makes sense. If you have it setup like you described above (ig blue, ig yellow, ig red, ig white, fb blue) this code will work. If you add any icons before the first Instagram icon, be sure to update the nth-child # to reflect that!
.header-actions .icon--fill[aria-label="Instagram"]:nth-child(1) svg {fill:blue
!important}
.header-actions .icon--fill[aria-label="Instagram"]:nth-child(2) svg {fill:yellow
!important}
.header-actions .icon--fill[aria-label="Instagram"]:nth-child(3) svg {fill:red
!important}
.header-actions .icon--fill[aria-label="Instagram"]:nth-child(4) svg {fill:white
!important}
.header-actions .icon--fill[aria-label="Facebook"] svg {fill:blue
!important}
@@InsideTheSquare How would you change this code to apply to the on page/footer socials? Thank you!
Hi,
I like to thank you very much. Finally I was able to change the instagram logo color. However, I could change the one in header only. How do I do the same thing for the footer. Thank you
Totally! Repeat the selector but add #footer-sections first and it should update. 👍👍 And if you’re not sure how to update the selector, check out my free CSS basics training for more info: insidethesquare.co/learn
this channel is AWESOME! thank you so much for sharing your knowledge with us, it's made a world of difference in customizing my squarespace site. editing the little details really helps in making it your own. bless ^ -^
You are so welcome - happy I could help! :)
Great video thank you! Hey how about the description as you hover over each icon?
Interesting question! I don't have a descrirption feature on my my icons so I'm not sure how to help. If you can comment with a link to a site where this is enabled I'll happily take a look!
Great Video! Very helpful, thank you! What about footer icons? What code would you use for that?
This worked for me:
.sqs-use--icon {fill:#ffffff !important;}
Hope that helps!
Ahh thank you so easy to understand :)
thanks!! worked like a charm.
Super helpful!!! Quick question, when I change the social media icon color on the desktop header, the shopping cart icon doesn't change. Is there a quick code that will change that as well? Thanks!
Hey there! Give this tutorial a try! insidethesquare.co/squarespace-tutorials/cart-icon-style
@@InsideTheSquare Thank you! Worked perfectly, this website I'm putting together is looking so good thanks to you! 😁❤
hi! it seems like the colour changing only works for icons that are pre-loaded into squarespace as i used custom icons via css for other links as well. any idea on how to change custom icons as well? thanks!
It all depends on your file type. If you uploaded a PNG or JPG, you should be able to edit them in a separate program and upload the correct color. Otherwise you can try adding an image filter to the unique icons. Hope that workaround helps and best of luck with your project :)
super helpful thank you!
Hello! We love your videos! Is there a way too make the code to change social link colors on one specific page (ie. homepage)?
Thanks Danielle - and great question! There are two ways to add a code to a single page in Squarespace; check out this tutorial for more info: insidethesquare.co/singlepage
Your videos are immensely helpful, thank you!
Just recently learned html/css (still green in the gills, clearly), so what is confusing me when trying to use custom CSS in squarespace is the deviation from the conventional method of using one html file where you target the properties, and then a separate CSS file where you style those targets. With your custom CSS, how are you seemingly cutting out the html targeting step? Or are you looking at the source code before coming up with the CSS?
Thanks a ton!
thank you and excellent content. totally inexcusable this isn' t an easy edit option on 7.1
I wish it was a simple thing too, but at least it’s easy to update with a little code! 💕
Hi, great tutorial!
And how can you change the size of the icons? Specially for the mobile version.
Thanks
You're welcome, glad I could help. Have your looked at this tutorial I have? It should help! insidethesquare.co/squarespace-tutorials/mobile-menu-image-71
Can this be done for the footer too? If so, what would the code for that be?
Hi Roni! You can give this a try in the footer: .sqs-use--icon {fill:#ffffff !important;}
@@InsideTheSquare Thanks, needed the footer. The header for another time.
💕 love
I love your videos great great content! However none of the custom codes seem to work for my website. I wanted to purchase your codes however nothing seems to work for me. Is there a certain setting I should be in? Please help lol
Hey Martha! Nice to e-meet you; I'm so glad you like my work ☺️ You might be using a different version or theme of Squarespace which makes a big difference. Definitely check out my free beginners guide for more info & some troubleshooting tips: insidethesquare.co/learn
Changes color of icon "I'm officially a hacker"
Love all your tips!
Haha- - awesome! I know the feeling 😉 Congrats on your first code of many 🙌