⚠ 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
Great tutorial - but after the latest update here in August there doesn't seem to be any small, medium and large buttons only primary, secondary and tertiary. Just replacing the name in the code from large -> primary doesn't seem to help. I'm completely new to Squarespace and finding information about the newest update and the changes is quite difficult.
I am also having this issue. I have managed to target all the primary buttons with the 'medium' code, but I'm now trying to apply it to a secondary button, and although 'large' is targeting it, it won't add the image, it just makes it transparent!
@@stinesrensen1133 i was able to target all 3 buttons (primary, secondary, and tertiary) with a single CSS element ID: .sqs-block-button-element ... IMPORTANT: to make the image appear in my buttons, i needed to re-create all buttons! whew. only took me 3 hours to figure this out.
Love your videos, you're a great speaker! Is there a way to make the text transparent too so just the image is showing? I'm basically trying to make the nav button just a custom PNG. (latest SS version) cheers!
I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
I'd be happy to help! This tutorial covers all kinds of form customizations, including the submit button: insidethesquare.co/squarespace-tutorials/contact-form-style
this is great thanks @InsideTheSquare Question. If one was doing this same effect as in your video (gold brush stroke) and wanted the affect on all 3 buttons... isn't there a way to amalgamate all that CSS so it's nice and tidy and not repeated 3 times for each button size? I'm trying to get tidier with my CSS so thought I'd ask. Cheers
Great question! You can separate multiple selectors with a comma and have the same properties and values applied to them. This example would turn an h1 and h3 text red: h1, h3 {color:red}
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid
Hey Gabrielle - great question - and totally! Just use the "Code name" for that button type. Are you using 7.1 or Bedford? Or a different template? Let me know and I will help you track down the right one :)
Is this possible for individual buttons? Let's say I want a different background photo for each button I have. The code that you showed changes it for all the buttons of the same type I believe.
I cant seem to get this to work. I tried this as well as the code in the css cheat sheet and the error message I got back was: expected ')' got ''' Can you assist please?
Hey Lauren! You an add a button to any image - click on the image block itself, and on the content tab, click on link and select button. This will put a button under or on the image, depending on the design you select on the design tab. Hope that info helps! You've inspired me to do a tiny tutorial on this so stay tuned 😎
That's the fastest way, but you can also search my free tutorial library for a specific button type tutorial. 👍👍 I have a ton of free tutorials on my blog that cover blog post read more buttons, form submit, newsletter, lightbox, header 7.1 or header Bedford, all 6 image types etc. There are so many types that there aren't enough characters in a RUclips description to fit them all in here!! 😂 Visit insidethesquare.co/buttons if you want to learn about more than just these 4 main ones 😁
Hey There! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
Ruh-roh; that's not supposed to happen! It's ha Feel free to submit a help request with more info and I'd be happy to hop into the source code to see why it's not working the way it should :) insidethesquare.co/contact/help
@@InsideTheSquare Please tell us, what was the solution? I'm trying this with 7.1 and when I save the code - either as page-specific (which is how I really need it) or in the general CSS panel, the page reloads and the button just blinks then goes back to its original appearance.
Make sure the code you are using is the right one for your theme and version. Squarespace 7 sites are built in different themes and don't use the same code names for the same features. Squarespace 7.1 sites also have some unique code names. If you don't know what version you are using, check out this article for help. insidethesquare.co/resources/squarespace-theme-families
⚠ 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
Great tutorial - but after the latest update here in August there doesn't seem to be any small, medium and large buttons only primary, secondary and tertiary. Just replacing the name in the code from large -> primary doesn't seem to help. I'm completely new to Squarespace and finding information about the newest update and the changes is quite difficult.
I am also having this issue. I have managed to target all the primary buttons with the 'medium' code, but I'm now trying to apply it to a secondary button, and although 'large' is targeting it, it won't add the image, it just makes it transparent!
@@stinesrensen1133 i was able to target all 3 buttons (primary, secondary, and tertiary) with a single CSS element ID: .sqs-block-button-element ... IMPORTANT: to make the image appear in my buttons, i needed to re-create all buttons! whew. only took me 3 hours to figure this out.
This is fantastic. The way you laid everything out was clear and concise. Thank you.
You're very welcome - glad I could help!
This is absolutely amazing!!! What a gift~ Thank you and I can't wait to watch more of your tutorials!
Thank you so much! You are a very good teacher
Thanks Tram! ♥
Love your videos, you're a great speaker! Is there a way to make the text transparent too so just the image is showing? I'm basically trying to make the nav button just a custom PNG. (latest SS version) cheers!
I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
This is the coolest thing ever and the solution I've been looking for! Thanks for creating such helpful and amazing videos!
Yay - so happy I could help! :)
Is there a way you can zoom in to the codes? I can not read it
Wow wow wow speechless! You are an amazing teacher! thanks
Hello. Can you tell me how I can change the form button? I'd like to make it match the other buttons on my site. Skål!
I'd be happy to help! This tutorial covers all kinds of form customizations, including the submit button: insidethesquare.co/squarespace-tutorials/contact-form-style
Thank you so much! This is exactly what I was wanting.
Thanks a million for your Tutorial
this is great thanks @InsideTheSquare Question. If one was doing this same effect as in your video (gold brush stroke) and wanted the affect on all 3 buttons... isn't there a way to amalgamate all that CSS so it's nice and tidy and not repeated 3 times for each button size? I'm trying to get tidier with my CSS so thought I'd ask. Cheers
Great question! You can separate multiple selectors with a comma and have the same properties and values applied to them. This example would turn an h1 and h3 text red: h1, h3 {color:red}
@@InsideTheSquare thank you!
How big should the image be? I'm having difficulty getting my image to be big enough. Thanks!
Is it possible to use just the image as a button so without any text on it?
For that situation, I would skip the button aspect and just add a link to the image! Hope that suggestion helps and best of luck with your project :)
Thank you so much for answering! The thing is, I wanted to place this in my header to replace the button
@insidethesquare can this be done for radio buttons? really interested in that such that the radio button clicked is an image??
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid
This is great! Is there a way to isolate the image background to a button in the header?
Hey Gabrielle - great question - and totally! Just use the "Code name" for that button type. Are you using 7.1 or Bedford? Or a different template? Let me know and I will help you track down the right one :)
Is this possible for individual buttons? Let's say I want a different background photo for each button I have. The code that you showed changes it for all the buttons of the same type I believe.
You can 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 cant seem to get this to work. I tried this as well as the code in the css cheat sheet and the error message I got back was:
expected ')' got '''
Can you assist please?
did you ever get this figured out?
@@ragedsycokiller Same here.
How do you put a button on an image ? For instance a graphic with purses and the button underneath says shop now (but it's on that image)
Hey Lauren! You an add a button to any image - click on the image block itself, and on the content tab, click on link and select button. This will put a button under or on the image, depending on the design you select on the design tab. Hope that info helps! You've inspired me to do a tiny tutorial on this so stay tuned 😎
Just a clarification: To get the codes for the other types of buttons i have to buy your cheat sheet?
That's the fastest way, but you can also search my free tutorial library for a specific button type tutorial. 👍👍 I have a ton of free tutorials on my blog that cover blog post read more buttons, form submit, newsletter, lightbox, header 7.1 or header Bedford, all 6 image types etc. There are so many types that there aren't enough characters in a RUclips description to fit them all in here!! 😂 Visit insidethesquare.co/buttons if you want to learn about more than just these 4 main ones 😁
Hi, I love your videos. This code gives an error "expected ')' got '''
did you ever get a solution for this
@@bythangho .sqs-block-button-element, .image-button a, .header-actions .btn {
background-image:url('your url image here');
background-size:cover;
background-position: center;
text-color: transparent,!important;
color:white;
border: 2px solid white;
&:hover{
border: 4px solid white;
margin:-2px;
}
&:active{
transform:scale(.98)
}
}
@@JoseAngelFlores when I use this it still repeats the image
It doesn't work for me I have four big buttons and the image it doesn't appear in any of them.
Hey There! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
I'm using 7.1 but my photo isn't showing up. The button just disappears completely :( help!
Ruh-roh; that's not supposed to happen! It's ha Feel free to submit a help request with more info and I'd be happy to hop into the source code to see why it's not working the way it should :)
insidethesquare.co/contact/help
Mine did the same thing!
@@InsideTheSquare Please tell us, what was the solution? I'm trying this with 7.1 and when I save the code - either as page-specific (which is how I really need it) or in the general CSS panel, the page reloads and the button just blinks then goes back to its original appearance.
This isn’t working for me
Make sure the code you are using is the right one for your theme and version. Squarespace 7 sites are built in different themes and don't use the same code names for the same features. Squarespace 7.1 sites also have some unique code names. If you don't know what version you are using, check out this article for help. insidethesquare.co/resources/squarespace-theme-families