Change font color for each section (Debut Theme)

MJC_Beard_Oil
Tourist
6 0 4

I found out how to change the background for certain sections on my homepage in the Debut theme. I ended up putting a dark image in the background of one of my images but now I can't seem to figure out how to change the font color to white. I used the css below to try it and it only changed the headline white but when I removed it and applied it again, the color never changed:

div#shopify-section-1515631652339 {
  text-decoration-color: white;
}

How do you change the font color for a single section?

Replies 8 (8)
MJC_Beard_Oil
Tourist
6 0 4

Found the solution. You have to add the child of the section in order to change the font color. See below:

div#shopify-section-1515631652339 {
  background-image: url(IMAGE URL);
}
div#shopify-section-1515631652339 * {
  color: white;
}

Hope this helps someone else.

Niklas_Klotz
New Member
1 0 0

Thank you for posting your result! Worked for me :)

ambientmoto
New Member
5 0 0

Thanks for posting this.

sarahhh
Tourist
6 0 1

Hi there 

Sorry where are you pasting this code? I have managed to add an image background to my newsletter section by posting the below code at the bottom of theme.css, however I cannot work out how to change the text colour in this field only to white. 

}.newsletter-section {

background: url(https://cdn.shopify.com/s/files/1/0583/9424/7331/files/feeties.jpg?v=1632638515);
background-color: $color-body;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center;

 

Thank you 

Sarah 

 

diego_ezfy
Shopify Partner
2300 413 542

@sarahhh 

This should work to change the text color:

 

.newsletter-section * {
color: #cccccc !important;
}

 


We'd need to see your website to offer more accurate help, without seeing the actual website's code it's a shot in the dark, though this should do. You can change the font color #cccccc to any hex.

Kind regards,
Diego


 

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
sarahhh
Tourist
6 0 1

nks so much Diego, that worked  

 

Is there also a way I can add more fields to this section? I would like to add a first name and last name field and remove the background from these fields. 

 

This is what it currently looks like 

sarahhh_1-1632785243849.png

 

And this is what I would like it to look like 

sarahhh_0-1632785225884.png

 

Thank you 

Sarah 

diego_ezfy
Shopify Partner
2300 413 542

Hi @sarahhh 

It's certainly possible but would require some more complex work. If this is something you'd like to get done feel free to contact me personally,

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
sarahhh
Tourist
6 0 1

Thank you Diego, I will do that. In the meantime, I have noticed that the text in the email field (when the customer types in their email) is also white, so the customer is unable to see what they are typing. Can you please let me know how to change this? 

Thank you 

Sarah