Jump to content

[Share] List Section Custom Style #1

Recommended Posts

List Section Custom Style #1 (People Section).

#1. First, add a List Section (People Section) - Simple List

image.png.ae6092cbcde8d055c8da8296f15f5274.png

#2. Install Squarespace ID Finder to find ID of List Section. In my example, we will have

section[data-section-id="665d2993e15a350712977aa5"]

image.png.545869a5cb1873071be647c564c43b3b.png

#3. Use this code to Custom CSS box

section[data-section-id="665d2993e15a350712977aa5"] {
li.list-item {
    flex-wrap: nowrap;
    flex-direction: row !important;
    align-items: center;
}
.list-item-media {
    margin-right: 10px !important;
}}

image.thumb.png.9fde0591fccf720de964b7491abb1bcf.png

#4. Result

image.thumb.png.51f9282e50ab85326e2eb7cbbb693255.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

In case you want to replace Image with FontAwesome Icons, you can use this new code.

#1. First, add this code to Code Injection Header (or Page Header Code Injection). Or if you use Personal Plan and doesn't support Code Injection, you can add it to Code Block.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

image.thumb.png.c2403f4e1c656bd28f6ef5fccca2109e.png

#2. Find icons on FontAwesome site

When clicking on each icon >> Find this code

fa6.png.394e801758faadfa7c6c0950eec316e2.png

#3. Use this code to Custom CSS box. Remember to replace with your Section ID (follow #2 in top thread).

section[data-section-id="665d2993e15a350712977aa5"] {
	.list-item-media-inner {
    display: none !important;
}
li:nth-child(1) .list-item-media:before {
    content: "\f67f";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 40px;
}
li:nth-child(2) .list-item-media:before {
    content: "\f518";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 40px;
}
li:nth-child(3) .list-item-media:before {
    content: "\e29c";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 40px;
}
.list-item-media {
    max-width: 80px !important;
}}

#4. Result

image.thumb.png.5141b645068401281184dd77b6248ab7.png

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.