Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
—
This tutorial is for all versions of Squarespace, from the latest 7.1 to older sites like Brine and Bedford theme templates.
—
In this tutorial, we are going to use a little simple CSS to create custom bullet points in Squarespace. But we are even going to go a step further and customize them for each different text type! That’s right – you can have a custom bullet point for your H1 or H3 or paragraph text – any text type can have a unique bullet point style.
The codes from this tutorial are listed in the first comment below because YouTube won’t let me add that greater than symbol inside a video description… 😑
Oh! And the list of Unicode characters that I tested on my demo site on Chrome, Safari and a few mobile devices is available at https://insidethesquare.co/unicode
You can just copy and paste the character from that page into the code, placing it between the quotation marks.
Okay – I think that’s it for this one! Have fun 😁
//–All text types
ul li(greater-than-symbol-goes-here)*:first-child::before {content: “→”;}
//–Heading One Text Example
ul li(greater-than-symbol-goes-here)h1:first-child::before {content: “→”;}
//–Heading Three Text Example
ul li(greater-than-symbol-goes-here)h3:first-child::before {content: “→”;}
//–Paragraph Text
ul li(greater-than-symbol-goes-here)p:first-child::before{content: “→”;}
//–Change the color too
ul li(greater-than-symbol-goes-here)*:first-child::before {content: “→”; color: red}
//–Change the color & font size
ul li(greater-than-symbol-goes-here)*:first-child::before {content: “→”; color: re; font-size: 2rem}
//–Change the color, font, and add a rotation
ul li(greater-than-symbol-goes-here)*:first-child::before {content: “→”; color: red; transform: rotate(45deg)}
—
🤩 Ready for more codes? 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 👉 https://InsideTheSquare.co/css
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
