Customizing the Squarespace Simple List with CSS
Use these copy & paste codes to customize the Squarespace Simple List with CSS
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE'S THE CSS:
// ADD A BORDER TO THE CARD //
// Tip! Make sure you have Card toggled on in the Style settings //
.user-items-list-simple .list-item {
border: 3px solid #7cccbd; }
// ADD A BORDER TO THE IMAGE //
.user-items-list-simple .list-item-media-inner {
border: 3px solid #7cccbd; }
// ROUND CORNERS OF THE CARD //
// Tip! Make sure you have Card toggled on in the Style settings //
.user-items-list-simple .list-item {
border-radius: 8px !important; }
// ROUND CORNERS OF THE IMAGE //
.user-items-list-simple .list-item-media-inner {
border-radius: 8px !important; }
// CHANGE TITLE COLOR /
.user-items-list-simple .list-item .list-item-content__title {
color: #7cccbd !important; }
// CHANGE DESCRIPTION COLOR //
// Tip! You can add any other CSS for the text here //
.user-items-list-simple .list-item .list-item-content__description {
color: #7cccbd !important; }
// CHANGE BOLD DESCRIPTION COLOR //
// Tip! You can add any other CSS for the text here //
.user-items-list-simple .list-item-content__description b, strong {
color: #7cccbd; }
// CHANGE BACKGROUND COLOR //
// Tip! Make sure you have Card toggled on in the Style settings //
.user-items-list-simple .list-item {
background: #000000 !important; }
// CHANGE BUTTON COLORS //
.user-items-list-simple .list-item .sqs-block-button-element {
background: #fac827 !important; color: #000000 !important; }
WANT TO APPLY THIS TO A SINGLE CARD AS A FUN CALLOUT?
All you need to do is tell the CSS which list item you want changed. Just change the number to match the list item you’re hoping to target:
.user-items-list-simple .list-item:nth-child(4)
So, for example, if you want to add a border to just one list item:
.user-items-list-simple .list-item:nth-child(4) {
border: 3px solid #7cccbd; }
——————
WANT TO EDIT THE AUTO LIST CAROUSEL INSTEAD?
Check out our post for that →
https://www.ajmexperience.com/learn-p...
ONLY WANT TO APPLY THIS TO ONE SECTION?
Here’s how to target blocks, sections, or pages →
https://www.ajmexperience.com/learn-p...
And here’s how to find block, section, and page IDs →
https://www.ajmexperience.com/learn-p...
WANT TO USE A CUSTOM WIDGET INSTEAD?
Get our favorite photo gallery widget →
https://go.elfsight.io/click?pid=1575...
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
——————
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)