⚠ 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: ruclips.net/video/euJqHXs_L1M/видео.html
I rarely comment on RUclips videos, but THANK YOU SO MUCH! I was trying to upload videos with the 9:16, so I watched your video about how to change the video block ratio on SquareSpace, which, worked, but it did so for ALL the videos on the site!
Hi, I was curious if you knew of a way to make multiple product variation buttons all different styles. I found a way to use an image as a product variant button, only problem is it uses that image for all the buttons and not just my 1st product variant.
This is a great question! You can target specific variant buttons using nth selectors. This code would give a red background to the second button on the third variant of a product: .variant-option:nth-child(3) .sqs-button-element--secondary:nth-of-type(2){ background: red!important }
thank you so much. You've saved me several times already. I was wondering if you are able to add CSS code to one element across your whole site. Eg. Change all image carousels or all people carousels but it won't change it in simple list.
Great question - and yes - it's totally possible! It's all about how you target the thing in your code. You can use the selector class, the block id, or both! I have a video with. more info that can help you figure out the perfect way to write code for your project: insidethesquare.co/squarespace-tutorials/css-targeting-tricks
Hey Becca! Thanks for the great code. I'm trying to use this to target about 15 different text/images on one page, same section. I'm trying to target multiple block-ids within the same section, but when I add a comma to separate them, it doesn't work, and code only applies to the last block-id I enter. For example, here I am trying to target 2 block ID's: @media only screen and (min-width: 640px){ #block-yui_3_17_2_1_1694528858998_6548, #block-0b61a32fa7be91cf579f { opacity: 0; transition: opacity 1s } #block-yui_3_17_2_1_1694528858998_6548, #block-0b61a32fa7be91cf579f:hover { opacity: 1; transition: opacity 1s } } But the effect only works on the last block-id (in this case, the one ending in 79f). Ideally, I'd like to target 15 text/images, just separated by a comma - is this possible? I've been trying for about a week to be able to do this but really struggling! THANKS!!
You were totally on the right track separating the selectors with a comma! The tricky part is the hover - you have to add that state to every selector too, like this: #block-yui_3_17_2_1_1694528858998_6548:hover, #block-0b61a32fa7be91cf579f:hover, #block-yui-1234567:hover, #block-yui-89012345:hover Hope that helps and best of luck with your project!
I have my color palette set, but I'd like to change a section background color - outside of my color palette - I have located the section ID but when I code {background-color: #hexcolor} it doesn't change the color. What am I doing wrong?
Page sections have different layers to them so you need to target the specific selector class within the page sections that has the color. Try using [data-section-id] .page-section .section-background {background-color: #hex!important} You can also try using .page-section .section-border Make sure you add !important because you are overwriting the original code. Hope that helps and best of luck with your project!
What about changing atributes to entire blocks on the whole site (like changing how to the add to cart loooks or giving all code injection and image blocks no padding)
Thanks Becca. I've tried and tried and failed with this: I want to hover over text and change the section background colour. I can only manage to get the text background to change colour on hover.
Gotcha @zahrarcher - thanks for the details - helps me troubleshoot 🙌 CSS changes the style of an object - but it can’t change other things that aren’t related… so if you hover over one thing, you can change stuff about that one thing, but you can’t change anything else that isn’t connected. There are some workarounds toucan do when you add other code languages like JavaScript; I’d recommend posting in the forums to see if anyone has advice. Hope that info helps and best of luck!
Interesting question Blue! We can change almost all text to uppercase with the property:value of "text-transform:uppercase" but we need to make sure we are assigning those properties and values to the right selector. So - what is the "language" that you want to change? is it a link in your main navigation or the Weglot translation link? Let me know and I'll help you make it happen :)
hello! I just did this and it worked! But then all of a sudden, my code is showing up at the top of the actual page! I even tried deleting the code all together and it's still there! Help!
When you add CSS code to code injection, you need to label it as CSS code so the computer browsers knows what to do. Make sure your code is in style brackets like this: your code Check out this tutorial for more info: insidethesquare.co/singlepage
Hi, super useful but struggling to integrate with another of your tutorials: I made 2 columns for simple lists on the mobile view by adding your code to the page header code injection, but I only want it to target one data section of the page. Does this targeting not work in the page header code injection? See my attempt to integrate, where am I going wrong as this code still affects the whole page! Thank you so much. [data-section-id=”166203b538e09a34f744ffe34”] @media only screen and (max-width: 640px){.user-items-list-simple:not([data-num-columns="1"]) {grid-template-columns: repeat(2,1fr); grid-gap: 10px!important} .list-item-content__title{font-size: 1rem!important} .list-item{padding: .5rem!important}}
You need to add the data section id before the selectors, like this: @media only screen and (max-width: 640px){[data-section-id=”166203b538e09a34f744ffe34”] .user-items-list-simple:not([data-num-columns="1"]) {grid-template-columns: repeat(2,1fr); grid-gap: 10px!important} [data-section-id=”166203b538e09a34f744ffe34”].list-item-content__title{font-size: 1rem!important} [data-section-id=”166203b538e09a34f744ffe34”] .list-item{padding: .5rem!important}} To learn more, check out my free guide to basic CSS at insidethesquare.co/learn
@@InsideTheSquare thank you kindly for this! It didn't work at first, but I then re-worded the Data Section bit to: section[data-section-id="662022bd442ea802ee8e00b4"] as it pulled from the chrome plugin and it worked perfectly! Thank you again!
Hey RLC Global! You might not be targeting the right selector, property, or value - it's hard to know without seeing the code in action! 🤔 Feel free to submit a code help request with more info at insidethesquare.co/code-help
HELP! I HAVE A GRIDDED PORTFOLIO PAGE AND WHEN U HOVER OVER A THING IN THE GRID IT SAYS THE NAME OF THE PAGE IT TAKES YOU TO OVER IT HOW DO I CHANGE THE FONT OF THAT!?!?
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
I also can't find how to change the font on hover. It doesn't seem like it's connected to any specific header or paragraph. There is also no padding, and the font hits the edge of the image. Did you figure this out?
This is honestly where Squarespace loses me to Wix. They make it so difficult to simple change a specific single item on a page - whereas Wix makes it so that you simply click the exact item you want to change. Want to change the color of a button? On Wix, click that button, all your options are there. Easy! Well on Squarespace, you have to: save your site -> edit site styles in a different window -> choose color (want to change font? different window! start again!) -> scroll down to the specific button (is this a primary, secondary, etc.) -> etc. Or you can learn how to custom code. Which defeats the purpose of "easily" building your site. If it weren't for helpful accounts like these I'd be completely lost.
I mean it's understandable if you don't know how to code but this is super easy stuff if you're 33 like me and you ever had MySpace, then you know CSS very well because it was the very first site to let you customize your entire profile page, essentially known as " changing HTML files content using CSS - cascading style sheets
Hello - I'm targeting specific section on page and am able to do that by searching for data-section-id - and finding the long string of numbers. that's fine once. I want this section to be on many pages, so I save the section - and add it to a new page, but then finding the id again and again makes for cumbersome code? is there a way of saying this section has an id of "sticky-categories" and then everytime I place that section into a page - the styling that is associated with "sticky-categories" gets applied? doing this: [data-section-id=”63d2d9da32af660a9bb515e7”], [data-section-id=”63d3f99f03e4472872bcea8a”], [data-section-id=”63d3f9d3e68141630f2d2375”], [data-section-id=”63d3fa0096f1a24a26e4a399”], [data-section-id=”63d3fa337d11266dadde5407”], [data-section-id=”63d3fa5bfc703f102cee7de3”], [data-section-id=”63d3fa9ff18e2f67b26f99ed”] for every page of a 30-40page website isn't a good solution? any ideas how to streamline this?
Great Question! Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage You can also use a unique block ID to target a specific thing on your site; check out this tutorial for more info: ruclips.net/video/h8qfZdaATbU/видео.html I use this free Chrome extension to grab that info; not affiliated - just a fan! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff Hope that helps! 💙
![Squarespace Understanding Where to Customize Your Website [Code Injection, Custom CSS, and More]](http://i.ytimg.com/vi/pSAk80PMJX4/mqdefault.jpg)
![Squarespace Understanding Where to Customize Your Website [Code Injection, Custom CSS, and More]](/img/tr.png)
⚠ 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: ruclips.net/video/euJqHXs_L1M/видео.html
Thank you becca for all that you do. You are very much appreciated!
You are so welcome! 🥰
I rarely comment on RUclips videos, but THANK YOU SO MUCH! I was trying to upload videos with the 9:16, so I watched your video about how to change the video block ratio on SquareSpace, which, worked, but it did so for ALL the videos on the site!
Yay! So happy I could help - thanks for letting me know it worked!! 🙌
Hello - thank you for all of your help. Is there a way to put the summary image below the title and description?
Great idea! I don't have a code for that just yet, but I will add it to my tutorial to do list, so stay tuned 🙌
Hi, I was curious if you knew of a way to make multiple product variation buttons all different styles. I found a way to use an image as a product variant button, only problem is it uses that image for all the buttons and not just my 1st product variant.
This is a great question! You can target specific variant buttons using nth selectors. This code would give a red background to the second button on the third variant of a product:
.variant-option:nth-child(3) .sqs-button-element--secondary:nth-of-type(2){
background: red!important
}
You are a star! Thanks for sharing all this knowledge. The best SS tutorials.
You are so welcome - thanks for the kind words 🥰
thank you so much. You've saved me several times already. I was wondering if you are able to add CSS code to one element across your whole site. Eg. Change all image carousels or all people carousels but it won't change it in simple list.
Great question - and yes - it's totally possible! It's all about how you target the thing in your code. You can use the selector class, the block id, or both! I have a video with. more info that can help you figure out the perfect way to write code for your project: insidethesquare.co/squarespace-tutorials/css-targeting-tricks
So helpful and so much appreciated
You are so welcome - happy to help! :)
Terrific. So well explained and enabling.
You’re welcome! Happy to help. 😎
This is sooooooo helpful
Hey Becca!
Thanks for the great code.
I'm trying to use this to target about 15 different text/images on one page, same section.
I'm trying to target multiple block-ids within the same section, but when I add a comma to separate them, it doesn't work, and code only applies to the last block-id I enter.
For example, here I am trying to target 2 block ID's:
@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1694528858998_6548, #block-0b61a32fa7be91cf579f {
opacity: 0;
transition: opacity 1s
}
#block-yui_3_17_2_1_1694528858998_6548, #block-0b61a32fa7be91cf579f:hover {
opacity: 1;
transition: opacity 1s
}
}
But the effect only works on the last block-id (in this case, the one ending in 79f).
Ideally, I'd like to target 15 text/images, just separated by a comma - is this possible? I've been trying for about a week to be able to do this but really struggling!
THANKS!!
You were totally on the right track separating the selectors with a comma! The tricky part is the hover - you have to add that state to every selector too, like this: #block-yui_3_17_2_1_1694528858998_6548:hover, #block-0b61a32fa7be91cf579f:hover, #block-yui-1234567:hover, #block-yui-89012345:hover
Hope that helps and best of luck with your project!
I have my color palette set, but I'd like to change a section background color - outside of my color palette - I have located the section ID but when I code {background-color: #hexcolor} it doesn't change the color. What am I doing wrong?
Page sections have different layers to them so you need to target the specific selector class within the page sections that has the color. Try using [data-section-id] .page-section .section-background {background-color: #hex!important}
You can also try using .page-section .section-border
Make sure you add !important because you are overwriting the original code. Hope that helps and best of luck with your project!
What about changing atributes to entire blocks on the whole site (like changing how to the add to cart loooks or giving all code injection and image blocks no padding)
Hey Elijah! You can customize just about anything in Squarespace with CSS if you know the selector name. 👍👍
@@InsideTheSquare but how do I find the selector name? I bought your css book. It’s awesome 😎
Thanks Becca. I've tried and tried and failed with this: I want to hover over text and change the section background colour. I can only manage to get the text background to change colour on hover.
Gotcha @zahrarcher - thanks for the details - helps me troubleshoot 🙌 CSS changes the style of an object - but it can’t change other things that aren’t related… so if you hover over one thing, you can change stuff about that one thing, but you can’t change anything else that isn’t connected. There are some workarounds toucan do when you add other code languages like JavaScript; I’d recommend posting in the forums to see if anyone has advice. Hope that info helps and best of luck!
Hi! I have a question... How do you change the Language text to uppercase?
Interesting question Blue! We can change almost all text to uppercase with the property:value of "text-transform:uppercase" but we need to make sure we are assigning those properties and values to the right selector. So - what is the "language" that you want to change? is it a link in your main navigation or the Weglot translation link? Let me know and I'll help you make it happen :)
what extension is this on chrome?
Squarespace id finder. Not affiliated; just a fan. Here is a quick link for ya: insidethesquare.co/chromeext
hello! I just did this and it worked! But then all of a sudden, my code is showing up at the top of the actual page! I even tried deleting the code all together and it's still there! Help!
When you add CSS code to code injection, you need to label it as CSS code so the computer browsers knows what to do. Make sure your code is in style brackets like this: your code
Check out this tutorial for more info: insidethesquare.co/singlepage
Hi, super useful but struggling to integrate with another of your tutorials: I made 2 columns for simple lists on the mobile view by adding your code to the page header code injection, but I only want it to target one data section of the page. Does this targeting not work in the page header code injection? See my attempt to integrate, where am I going wrong as this code still affects the whole page! Thank you so much.
[data-section-id=”166203b538e09a34f744ffe34”]
@media only screen and (max-width: 640px){.user-items-list-simple:not([data-num-columns="1"]) {grid-template-columns: repeat(2,1fr); grid-gap: 10px!important} .list-item-content__title{font-size: 1rem!important} .list-item{padding: .5rem!important}}
You need to add the data section id before the selectors, like this:
@media only screen and (max-width: 640px){[data-section-id=”166203b538e09a34f744ffe34”] .user-items-list-simple:not([data-num-columns="1"]) {grid-template-columns: repeat(2,1fr); grid-gap: 10px!important} [data-section-id=”166203b538e09a34f744ffe34”].list-item-content__title{font-size: 1rem!important} [data-section-id=”166203b538e09a34f744ffe34”] .list-item{padding: .5rem!important}}
To learn more, check out my free guide to basic CSS at insidethesquare.co/learn
@@InsideTheSquare thank you kindly for this! It didn't work at first, but I then re-worded the Data Section bit to: section[data-section-id="662022bd442ea802ee8e00b4"] as it pulled from the chrome plugin and it worked perfectly! Thank you again!
Appreciate all the content support- however, when I put in the code (and the collection ID) it doesn't do anything? Can you help I'm on 7.1
Hey RLC Global! You might not be targeting the right selector, property, or value - it's hard to know without seeing the code in action! 🤔 Feel free to submit a code help request with more info at insidethesquare.co/code-help
HELP! I HAVE A GRIDDED PORTFOLIO PAGE AND WHEN U HOVER OVER A THING IN THE GRID IT SAYS THE NAME OF THE PAGE IT TAKES YOU TO OVER IT HOW DO I CHANGE THE FONT OF THAT!?!?
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
I also can't find how to change the font on hover. It doesn't seem like it's connected to any specific header or paragraph. There is also no padding, and the font hits the edge of the image. Did you figure this out?
Not kidding, my first thought was Is it Tuesday? 😁
Haha - don't worry - I have another fun tutorial for tomorrow too 😉
This is honestly where Squarespace loses me to Wix. They make it so difficult to simple change a specific single item on a page - whereas Wix makes it so that you simply click the exact item you want to change.
Want to change the color of a button? On Wix, click that button, all your options are there. Easy!
Well on Squarespace, you have to:
save your site -> edit site styles in a different window -> choose color (want to change font? different window! start again!) -> scroll down to the specific button (is this a primary, secondary, etc.) -> etc.
Or you can learn how to custom code. Which defeats the purpose of "easily" building your site.
If it weren't for helpful accounts like these I'd be completely lost.
Thanks for the thoughtful feedback, and I’m glad you like my work! There's no "perfect" platform, and each designer has their preference.
I mean it's understandable if you don't know how to code but this is super easy stuff if you're 33 like me and you ever had MySpace, then you know CSS very well because it was the very first site to let you customize your entire profile page, essentially known as " changing HTML files content using CSS - cascading style sheets
Hello - I'm targeting specific section on page and am able to do that by searching for data-section-id - and finding the long string of numbers. that's fine once. I want this section to be on many pages, so I save the section - and add it to a new page, but then finding the id again and again makes for cumbersome code? is there a way of saying this section has an id of "sticky-categories" and then everytime I place that section into a page - the styling that is associated with "sticky-categories" gets applied?
doing this: [data-section-id=”63d2d9da32af660a9bb515e7”],
[data-section-id=”63d3f99f03e4472872bcea8a”],
[data-section-id=”63d3f9d3e68141630f2d2375”],
[data-section-id=”63d3fa0096f1a24a26e4a399”],
[data-section-id=”63d3fa337d11266dadde5407”],
[data-section-id=”63d3fa5bfc703f102cee7de3”],
[data-section-id=”63d3fa9ff18e2f67b26f99ed”]
for every page of a 30-40page website isn't a good solution? any ideas how to streamline this?
Great Question! Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage
You can also use a unique block ID to target a specific thing on your site; check out this tutorial for more info: ruclips.net/video/h8qfZdaATbU/видео.html
I use this free Chrome extension to grab that info; not affiliated - just a fan! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
Hope that helps! 💙
Hi! Do you have an email I could contact you at? Want to ask if you know whether or not it’s possible to do this thing I want to do in squarespace.
HI there - absolutely! You can reach my on my website at insidethesquare.co/contact
@@InsideTheSquare Done!