jenartsquare Posted January 20 Share Posted January 20 My default text background (and the color of the image card text area) is orange, and I need the text backgrounds (and/or the image cards) to be able to change colors. I've attached a screenshot of the areas I want to change. Can someone tell me how to do this in CSS so I can change text backgrounds to specific HEX? Thanks! Link to comment
Ziggy Posted January 20 Share Posted January 20 How you go about this depends on how you have it set up. 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 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
jenartsquare Posted January 20 Author Share Posted January 20 6 hours ago, Ziggy said: How you go about this depends on how you have it set up. Can you share your website URL? @Ziggy It's a hideous hodge-podge of sections right now, so please don't look at the design with a discerning eye! 😂 I'm playing with things for now. But this piece matters for the separate brands. Thanks so much! https://www.peripheralviewmedia.com/ PW: PVMNew Link to comment
Ziggy Posted January 20 Share Posted January 20 1 hour ago, jenartsquare said: hideous hodge-podge No judgement! We all have a process! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted January 20 Share Posted January 20 I would suggest using CSS like this: section[data-section-id="63ca1089df490857e5c10fd9"] { .sqs-background-enabled:nth-child(1) { background-color:red; } .sqs-background-enabled:nth-child(2) { background-color:yellow; } .sqs-background-enabled:nth-child(3) { background-color:green; } .sqs-background-enabled:nth-child(4) { background-color:blue; } } Using the section ID and nth-child you can set the colours in order and reuse it easily without using individual block IDs. Hope that works for you! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
jenartsquare Posted January 20 Author Share Posted January 20 23 minutes ago, Ziggy said: I would suggest using CSS like this: section[data-section-id="63ca1089df490857e5c10fd9"] { .sqs-background-enabled:nth-child(1) { background-color:red; } .sqs-background-enabled:nth-child(2) { background-color:yellow; } .sqs-background-enabled:nth-child(3) { background-color:green; } .sqs-background-enabled:nth-child(4) { background-color:blue; } } Using the section ID and nth-child you can set the colours in order and reuse it easily without using individual block IDs. Hope that works for you! Thanks, @Ziggy. I appreciate your quick response. When I insert the code, it does in fact change the nth-child (1) to the red you indicated and all the text backgrounds as well, but when I modify and place the HEX code on that nth-child (1) plus add the corresponding hex color to the other children, there's no change except to the blue on the (1) I'm sure I'm missing something simple, but here is what I attempted: section[data-section-id="63ca1089df490857e5c10fd9"] { .sqs-background-enabled:nth-child(1) { background-color:#1863B6; } .sqs-background-enabled:nth-child(2) { background-color:#9EDC03; } .sqs-background-enabled:nth-child(3) { background-color:#FAF001; } .sqs-background-enabled:nth-child(4) { background-color:#26D1EE; } .sqs-background-enabled:nth-child(5) { background-color:#516528; } .sqs-background-enabled:nth-child(6) { background-color:#9F1CD3; } } It looks like this now: Link to comment
Solution jenartsquare Posted January 21 Author Solution Share Posted January 21 @Ziggy I just went ahead and changed each block ID and it worked. I'd love to use the nth-child option if I could find a way to make it work—but for now, I'm good. Thank you for your help! Without it, I would not have gotten to this solution. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment