Jump to content

Multi-coloured list items

Go to solution Solved by Ziggy,

Recommended Posts

(Password spine123)

Hello!

I've got a summary block at the bottom of the home page and I'd like to make them all different colours (pink, yellow and blue) like in the screenshot attached.

Is there some coding that could be inserted to achieve this? 

I created the ones above but I don't like how they clash when they go to mobile so would much rather use a pre-set layout to avoid this.

Thank you!

Screenshot 2023-08-24 at 10.09.54.png

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, lauren-offpaper said:

Sorry, it asked for the URL in the form but didn't realise it didn't feature in the post!

No problem!

Your logo is great BTW, well designed and playful.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Use this Custom CSS, it will just target that section, and it will make the 1st, 4th, 7th... pink, the 2nd, 5th, 8th... yellow, and 3rd, 6th, 9th... teal.

section[data-section-id="64e71b386425281248358655"] {
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+1) {
    background-color:#df83a4;
  }
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+2) {
    background-color:#f9b800;
  }
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+3) {
    background-color:#4fa7b2;
  }
}

Add comma-separated section IDs if you want it to apply to more sections.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Add this if you want the button to be wider:

#siteWrapper .user-items-list-item-container.user-items-list-simple[data-button-font-unit="rem"] .list-item-content__button {
    width: 100%;
}
Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
22 minutes ago, Ziggy said:

Use this Custom CSS, it will just target that section, and it will make the 1st, 4th, 7th... pink, the 2nd, 5th, 8th... yellow, and 3rd, 6th, 9th... teal.

section[data-section-id="64e71b386425281248358655"] {
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+1) {
    background-color:#df83a4;
  }
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+2) {
    background-color:#f9b800;
  }
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+3) {
    background-color:#4fa7b2;
  }
}

Add comma-separated section IDs if you want it to apply to more sections.

Thank you so much! Really appreciate it 🙂

Is there a way to get the buttons just transparent with white text and the white border like I had before? Been fiddling with the colour settings but it doesn't have this functionality.

Link to comment
21 minutes ago, lauren-offpaper said:

Is there a way to get the buttons just transparent with white text and the white border like I had before? Been fiddling with the colour settings but it doesn't have this functionality.

Yes, we can adjust that...

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Add this within the collection ID brackets (just before the final curly bracket in the previous code):

.list-item-content__button {
  background-color: rgba(255,255,255,0.0) !important; 
  border: 2px solid #ffffff !important; 
  color:#ffffff !important;
}
.list-item-content__button:hover{
  background-color:#ffffff !important; 
  color:#000000 !important;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 8/24/2023 at 12:47 PM, Ziggy said:

Add this within the collection ID brackets (just before the final curly bracket in the previous code):

.list-item-content__button {
  background-color: rgba(255,255,255,0.0) !important; 
  border: 2px solid #ffffff !important; 
  color:#ffffff !important;
}
.list-item-content__button:hover{
  background-color:#ffffff !important; 
  color:#000000 !important;
}

 

You are a STAR, thank you!!!

Link to comment
  • 7 months later...
On 8/24/2023 at 6:50 AM, Ziggy said:

Use this Custom CSS, it will just target that section, and it will make the 1st, 4th, 7th... pink, the 2nd, 5th, 8th... yellow, and 3rd, 6th, 9th... teal.

section[data-section-id="64e71b386425281248358655"] {
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+1) {
    background-color:#df83a4;
  }
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+2) {
    background-color:#f9b800;
  }
  .user-items-list-simple .list-item[data-is-card-enabled="true"]:nth-child(3n+3) {
    background-color:#4fa7b2;
  }
}

Add comma-separated section IDs if you want it to apply to more sections.

@Ziggy trying to use your code for a banner list section I've altered that I want to have every other background color change for. Wondering if you can help.

https://helicon-oval-8wh9.squarespace.com/portfolio-test

PW: admin

Link to comment
On 4/4/2024 at 4:10 AM, E-W said:

 trying to use your code for a banner list section I've altered that I want to have every other background color change for. Wondering if you can help.

https://helicon-oval-8wh9.squarespace.com/portfolio-test

PW: admin

The url doesn't work

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.