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?

0 Likes
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 :)

0 Likes
ambientmoto
New Member
5 0 0

Thanks for posting this.

0 Likes
sarahhh
New Member
2 0 0

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 

 

0 Likes

@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 section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
sarahhh
New Member
2 0 0

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 

0 Likes

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 section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes