How to create a multi color list section in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
List sections are one of my favorite ways to display content in Squarespace, but the design features aren’t as creative as I would like them to be. Luckily we can use CSS to make some really great-looking list sections!
I have a few past tutorials on list section styles, linked below. In this tutorial, you’ll learn how to use custom code to change the background of individual list items. We’ll change them one by one, then all the odd and even ones, and then I’ll share a neat trick I use to change them in sets of three for repeating content.
As always, the codes are listed in the description below, but make sure you watch the video to learn how to use them before you add them to your Squarespace website!
Video tutorial
Code Example
Here are the codes from this tutorial. Make sure you update the color codes to match the style of your own unique website:
Change individual items
.list-item:nth-of-type(1) {background: #E5F5F6}
.list-item:nth-of-type(2) {background: #F6EDCE}
.list-item:nth-of-type(3) {background: #F8E0D9}
Even and odd
.list-item:nth-of-type(even) {background: #E5F5F6}
.list-item:nth-of-type(odd) {background: #F6EDCE}
Every Three
.list-item:nth-of-type(3n+1) {background: #E5F5F6}
.list-item:nth-of-type(3n+2) {background: #F6EDCE}
.list-item:nth-of-type(3n+3) {background: #F8E0D9}
