How To Target One Thing in Squarespace with Code // CSS Targeting Tips for Squarespace

Подписаться 26 тыс.

Просмотров 12 тыс.

50% 1

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 insidethesquar...
---
This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code.
We’ll take a look at the three main types of unique ID’s - collection, section, and block - and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site!
I am using my Squarespace version 7.1 demo site; block ID’s exist in version 7 but things like page sections and collections are a little different depending on what theme you are using.
This is a link to the free chrome extension I use in the video. I am not affiliated with them in any way, just a fan! chrome.google....
Here is a quick recap of order of ops discussed in the video:
#collection-id [data-section-id] #block-id .selector
Here is a quick rundown of the typical symbols used:
Using a data section? Add [square brackets]
Using a block ID? Start with a #
Making one code change to multiple targets? Separate them with a comma.
Here is an example of changing H2 text color in a block id:
#block-123456 h2{color: orange}
And here is an example of changing all the buttons in a data section to blue:
[data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important}
---
🤩 Want over 60+ pages of custom codes & pro tips specifically for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 insidethesquar...
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar... ❤️
---
🙋 Need some help? Visit insidethesquar... to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace
Edited
Just Starting with Squarespace CSS?
Awesome! 😍
I want to teach you the basics - grab my free Getting Started Guide here 👉 insidethesquar...
---
This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code.
We’ll take a look at the three main types of unique ID’s - collection, section, and block - and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site!
I am using my Squarespace version 7.1 demo site; block IDs exist in version 7, but elements like page sections and collections are a little different depending on what theme you are using.
This is a link to the free Chrome extension I use in the video. I am not affiliated with them in any way, just a fan! chrome.google....
Here is a quick recap of order of ops discussed in the video:
#collection-id [data-section-id] #block-id .selector
Here is a quick rundown of the typical symbols used:
Using a data section?
Add [square brackets]
Using a block ID?
Start with a #
Making one code change to multiple targets?
Separate them with a comma
Here is an example of changing the H2 text color in a block id:
#block-123456 h2{color: orange}
And here is an example of changing all the buttons in a data section to blue:
[data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important}
---
🤩 Want over 60+ pages of custom codes and pro tips for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 insidethesquar...
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar... ❤️
---
🙋 Need some help? Visit insidethesquar... to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Опубликовано:

2 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 51

@InsideTheSquare Год назад

⚠ 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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-euJqHXs_L1M.html

@fitzmauriceworks 2 года назад

Terrific. So well explained and enabling.

@InsideTheSquare 2 года назад

You’re welcome! Happy to help. 😎

@ydillon96 3 месяца назад

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.

@InsideTheSquare 3 месяца назад

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 }

@JeannetteWeinstein 6 месяцев назад

Hello - thank you for all of your help. Is there a way to put the summary image below the title and description?

@InsideTheSquare 6 месяцев назад

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 🙌

@cinemaric 3 года назад

Thank you becca for all that you do. You are very much appreciated!

@InsideTheSquare 3 года назад

You are so welcome! 🥰

@AmyFeiman 4 месяца назад

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?

@InsideTheSquare 4 месяца назад

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!

@ruthhowsamdesign7268 Год назад

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!!

@InsideTheSquare Год назад

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!

@elijahaaron 2 года назад

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)

@InsideTheSquare 2 года назад

Hey Elijah! You can customize just about anything in Squarespace with CSS if you know the selector name. 👍👍

@elijahaaron 2 года назад

@@InsideTheSquare but how do I find the selector name? I bought your css book. It’s awesome 😎

@sarahnikas8634 6 месяцев назад

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!

@InsideTheSquare 6 месяцев назад

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

@KatharineForgan 4 месяца назад

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}}

@InsideTheSquare 4 месяца назад

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

@KatharineForgan 4 месяца назад

@@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!

@zahraarcher Год назад

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.

@InsideTheSquare Год назад

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!

@gabriellewong211 4 месяца назад

what extension is this on chrome?

@InsideTheSquare 4 месяца назад

Squarespace id finder. Not affiliated; just a fan. Here is a quick link for ya: insidethesquare.co/chromeext

@regenhealth4238 2 года назад

So helpful and so much appreciated

@InsideTheSquare 2 года назад

You are so welcome - happy to help! :)

@marie-stellamakoumbou2709 Год назад

I rarely comment on RU-vid 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!

@InsideTheSquare Год назад

Yay! So happy I could help - thanks for letting me know it worked!! 🙌

@browsersydney90 5 месяцев назад

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.

@InsideTheSquare 5 месяцев назад

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

@BlueMAnimations Год назад

Hi! I have a question... How do you change the Language text to uppercase?

@InsideTheSquare Год назад

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 :)

@and.coaching 3 года назад

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

@InsideTheSquare 3 года назад

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

@n8n565 2 года назад

This is sooooooo helpful

@MARVELousBros 2 года назад

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!?!?

@InsideTheSquare 2 года назад

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

@ElishaZepeda Год назад

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?

@anawile3152 3 года назад

Not kidding, my first thought was Is it Tuesday? 😁

@InsideTheSquare 3 года назад

Haha - don't worry - I have another fun tutorial for tomorrow too 😉

@patriciomartinez9350 3 года назад

You are a star! Thanks for sharing all this knowledge. The best SS tutorials.

@InsideTheSquare 2 года назад

You are so welcome - thanks for the kind words 🥰

@ElishaZepeda Год назад

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.

@InsideTheSquare Год назад

Thanks for the thoughtful feedback, and I’m glad you like my work! There's no "perfect" platform, and each designer has their preference.

@jgalvan09 Год назад

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

@fezenstein Год назад

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?

@InsideTheSquare Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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! 💙