Hi guys, Welcome to the Advanced Video Search Engine, and you are watching Best Code Snippets for Every Squarespace Website // Top 5 Squarespace CSS Codes. That video is uploaded by InsideTheSquare - Squarespace Tutorials at 2023-04-01T03:00:19-07:00. We are promoting this video only for entertainment and educational purpose only. So, I hope you like & enjoy it. [TZz6n_rIqtM]
| Name | Best Code Snippets for Every Squarespace Website // Top 5 Squarespace CSS Codes |
| Video Uploader | Video From InsideTheSquare - Squarespace Tutorials |
| Upload Date | This Video Uploaded At 01-04-2023 10:00:19 |
| Video Discription | 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: https://www.youtube.com/watch?v=zRKto5d80P0 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: https://www.youtube.com/watch?v=7FBp-tkijYM 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 โ https://youtube.com/philpallen ร PHILโS INSTAGRAM โ https://www.instagram.com/philpallen ร PHILโS WEBSITE โ https://philpallen.co x BECCA'S CHANNEL โ https://youtube.com/insidethesquare ร BECCAโS INSTAGRAM โ https://www.instagram.com/thinkinsidethesquare ร BECCAโS WEBSITE โ https://insidethesquare.co ----------------------------------- TZz6n_rIqtM |
| Category | Education |
| Tags | squarespace | squarespace css | custom css squarespace | css tutorial | squarespace custom css | how to use css in squarespace | customize squarespace | custom css squarespace | squarespace hacks | squarespace css | squarespace css tutorial | squarespace tutorial | css tutorial |
