Do It Yourself – Website Tutorials
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
—
In this tutorial you’ll learn how to create custom styles for list items.
One of the features of a list section is turning on the card background, which creates a solid color background behind each list item. In your site styles menu you can change the color of the card, but we can do SO much more with code! In this tutorial, you’ll learn how to give that card a gradient background, a border, and how to create a hover effect for it too.
The codes from this tutorial are listed below BUT there are some important things you’ll want to change so be sure to watch the training so you know exactly which ones you want to use to make your Squarespace site look awesome!
//– Give the card a border
.list-item[data-is-card-enabled=”true”] {border:5px solid blue}
//– Create a rounded corner with border radius
.list-item[data-is-card-enabled=”true”] {border-radius:25px}
//–Create a linear gradient background (learn more about gradients at https://insidethesquare.co/gradient
.list-item[data-is-card-enabled=”true”] {background: linear-gradient(to right, blue, red)}
//–Change border color on a hover
.list-item[data-is-card-enabled=”true”]:hover {border-color:red}
//–Give it a box shadow on a hover
.list-item[data-is-card-enabled=”true”]:hover {box-shadow: 5px 5px 10px #000}
🔗 To learn more about this new type of page section, check out my free training at https://insidethesquare.co/list
—
🥳 Ready to give Squarespace a try? Use the code PARTNER10 for 10% off your first year (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 #squarespacehacks #designsquarespace #squarespacetip #howtousesquarespace #squarespacetutorial
source