Jump to content

How To Change Multiple Text Background Colors

Go to solution Solved by jenartsquare,

Recommended Posts

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!

Screen Shot 2023-01-19 at 11.51.13 PM.png

Link to comment
  • Replies 6
  • Views 295
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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 
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
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
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 
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

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 
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
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:


 

Screen Shot 2023-01-20 at 12.25.54 PM.png

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.