Do It Yourself – Website Tutorials

Brand new to CSS? Awesome! 😍 I want to teach you the basics – check out my free training here 👉 https://insidethesquare.co/learn-css
—
This tutorial is for any version of Squarespace, 7 or 7.1!
—

This tutorial will show you how to create a vertical line in Squarespace. A few important things to note before you copy and paste this into your own site:

+ There is more than one way to do this! This is just one approach of many because code is super customizable.

+ There are a TON of creative things you can do with border codes. To learn more about borders, visit https://insidethesquare.co/borders

+The block ID chrome extension I am using in this tutorial can be found here. Important note: I am not affiliated with that extension or company in any way, I just use it myself! https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

//– solid line
#block-123456789 {border-left: 5px solid #50bdb8}

//– dotted line
#block-123456789 {border-left: 5px solid #50bdb8}

//– faded edges line
#block-123456789 {border-width: 5px; border-style: solid;
border-image: linear-gradient( to bottom, rgba(0,0,0,0), #000, rgba(0, 0, 0, 0)) 1 100%;
border-right:none}

//– rainbow line
#block-123456789 {border-width: 5px; border-style: solid;
border-image: linear-gradient( to bottom, red, yellow, blue, purple) 1 100%;
border-right:none}

//–mobile only – don’t forget the extra curly bracket at the end to close your media query!
@media only screen and (min-width:480px){#block-12345698…..}

▸▸▸ Ready for more?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css

▸▸▸ Ready to be an expert?
Copy & pasting CSS is a great way to get started, but if you really want to level up your skills and write your own code, then you’re ready for the Custom Code Academy. I created this course to teach you everything I know about CSS for Squarespace. Enrollment is open right now, and access lasts a lifetime. Join the academy today at https://CustomCodeAcademy.com

—
Not sure which version you are using? That makes a big difference in how you create code! My Getting Started with CSS guide can help you make sure you are using the right code snippet. Download it for free here 👉 https://insidethesquare.co/learn-css
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks

The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.

source