Best Code Snippets for Every Squarespace Website // Top 5 Squarespace CSS Codes
Вставка
- Опубліковано 31 бер 2023
- In this video, you’ll learn five custom code snippets my friend (and brand strategist) Phil Pallen uses on every Squarespace website he creates for his clients.
First, he'll show you how to use the root function to set colors universally on your Squarespace website, giving colors names instead of relying on HEX codes, and matching Squarespace's site styles to make writing code even easier. Then, you'll learn how to apply a smooth scroll effect to your anchor links, create a thicker horizontal line, set custom P3 font, and hide your footer on mobile only.
We are covering a LOT in this tutorial, so use the timestamps below if you want to jump ahead:
00:42 - Give colors names (instead of relying on HEX codes) and match those colors to Squarespace's site styles
Replace "XXXXXX" below with your HEX codes and paste into your CSS:
:root {
--lightest: #XXXXXX !important;
--light: #XXXXXX !important;
--accent: #XXXXXX !important;
--dark: #XXXXXX !important;
--darkest: #XXXXXX !important;
}
01:42 - Add a smooth scroll effect to your anchor links by pasting this snippet into your CSS:
html {
scroll-behavior: smooth;
}
Don't forget that your anchor links require a code block with ID, hyperlinked with a hashtag. Instructions in this video: • How to Create Anchor L...
03:08 - Make a horizontal line thicker by adding this code snippet (and adjusting the thickness - this is set to 2 pixels high as shown in the example):
hr {height: 2px !important;}
For more help on this, check out this tutorial: • How To Change The Hori...
05:01 - Custom style your P3 text (beyond what site styles in Squarespace allows) with this code snippet and adjust accordingly:
.sqsrte-small{
letter-spacing: 0.2em !important;
text-transform: uppercase!important;
font-weight: 600;
line-height: 1.6em !important;}
06:02 - Hide footer on mobile with this code snippet:
@media only screen and (max-width: 768px) {
footer {
display: none !important;
}
}
-----------------------------------
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 ♥
-----------------------------------
× LIKE, COMMENT, AND SUBSCRIBE ×
-----------------------------------
x PHIL'S CHANNEL → / philpallen
× PHIL’S INSTAGRAM → / philpallen
× PHIL’S WEBSITE → philpallen.co
x BECCA'S CHANNEL → / insidethesquare
× BECCA’S INSTAGRAM → / thinkinsidethesquare
× BECCA’S WEBSITE → insidethesquare.co
-----------------------------------
⚠️ 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
A switch, how fun! Thank you so much. These are such easy little tricks for important aspects of my design process! So helpful.
Excellent! Thanks much for these snippets!
You're VERY welcome!
I like the anchor tip- I've been looking for it! Thank you :) . I also plan to use the 3rd Paragraph special style tip! Keep em' coming please!
Awesome - so glad these ideas will work for your site! 🙌 I’ll keep brainstorm more to share 👍
i love this guy.. more from him.
Isn't Phil the best?! I'll definitely pitch another collab in the not too distant future ;)
Too fun you two!
We DEFINITELY entertained ourselves with this collab! 🤪
Nice vid! One thing I haven’t seen is creating a custom testimonial section. I’d be nice to see a video about this 🔥
I've got you covered 😎 ua-cam.com/video/lBtXkdrwvyw/v-deo.html
Thank you!
You're welcome! :)
Oh my goodness lol, Iove this swap😅.
Yay! So glad you love this. 😎
I agree about the no-footer look on mobile, but curious if you put terms & conditions, privacy policy, and copyright info somewhere else?
Very good point! If I'm hiding the footer, I would definitely put those at the bottom of the mobile menu so someone can find them if they want them!
Great snippets. Regarding custom CSS in SS and the Navigation menu, could you share custom code that will allow me to put Icons in front of the Main Navigation menu items, but does NOT carry those icons in the sub-folders of those main items? TY
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉
How is he "commenting out" his css with only //// comment //// no asterisks.?
/// works, // works, and /* works. I prefer /* because I like stars 😉