Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics for free 👉 https://insidethesquare.co/learn
—
In this tutorial, you’ll learn how to customize the archive block in Squarespace using CSS. A few things to note before we get started:
⚠️ This was recorded in my Squarespace 7.1 demo site but the codes are the exact same for any version and theme.
✨ There is more than one way to do this! This is just one approach of many because code is super customizable.
🌈 You can learn more about borders at (https://insidethesquare.co/border) and more about color options at (https://insidethesquare.co/colors)
📄 You can install these on a single page using page header code injection or a code block. Here is a link to a tutorial on how to set that up: https://insidethesquare.co/singlepage
🙋 If you need any help along the way, head on over to insidethesquare.co/code-help to see my current support options.
Here are the code names from the tutorial. Combine these with any font, typography, border, background or other CSS styles you want to use to make it look perfect for your own site!
Entire Block
.archive-group-list
Group Name
.archive-group-name-link
Group Count
.archive-group-count
Archive Link
.archive-item-link
Dropdown
.archive-dropdown-toggle-label
Dropdown List
.archive-block-setting-layout-dropdown .archive-group-list
Here is a code that will add a border and background color with a little bit of padding to an archive block:
.archive-group-list {background: rgba(100,0,100,0.1); padding: 15px!important; border: 5px solid purple; border-radius: 25px}
Learn about more custom styles for archive blocks at https://insidethesquare.co/squarespace-tutorials/archive
—
🤩 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 50 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 video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace
