How can I change font and background color in a Turbo Theme 2.0 section using custom CSS?

Store Design
, , ,
1

Hello,

I am looking to change the font color and background color using custom CSS for just a section of the theme, specifically the collection section on the link below. I would like to have a gray background with a white font. I can figure it out the right shade of gray later.

I could not find the answer anywhere.

I use the Turbo Theme 2.0, which provides the option to add custom CSS to just a section: https://jardinfdflowers.com

Would anyone please help me?

Thank you!

2 
.section {
background-color: grey !important;
}

h2 {
color: white !important;
}

p{
color: white !important;
}

Hi,

This should do it.

3

Hey there, if you’re using the custom css box located on the section within the customizer, you can probably target the ‘div’ itself or use the ID of the section. Try simply putting..

div {
background-color:grey;
color:white;
}

You can use ‘#ffffff’ hex codes for the colors as well, just replace color name with the #xxcode. If that doesn’t work, try targeting the section ID with..

div#shopify-section-template--16710726910167__1634830391d4116e9a {
background-color:grey;
color:white;
{

background-color for the background color

color: property for font color.

If that doesn’t work, try targeting the ID (second box above) by placing this at the bottom of your themes css file in the theme editor instead of in the customizer. Hope that helps!

2 Likes
4

Hi @Christian_M ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/custom.css->paste below code at the bottom of the file:

#shopify-section-template--16710726910167__1634830391d4116e9a {
    background: gray;
}
#shopify-section-template--16710726910167__1634830391d4116e9a h2,
#shopify-section-template--16710726910167__1634830391d4116e9a .title,
#shopify-section-template--16710726910167__1634830391d4116e9a .money,
#shopify-section-template--16710726910167__1634830391d4116e9a .from {
    color: #fff !important;
}

PageFlyRichard_0-1677686511542.png
PageFlyRichard_0-1677686511542.png1620×654 238 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
5

Thank you!

6

Hi Richard,

Thank you for your help, I appreciate it. I used your solution and it works.

Would you please tell me if is it possible to change the shade of grey. When I mentioned I knew how to do it, I thought the solution would have the color numbers #… :). I don’t anything about coding.

Thank you!

7

Hi @Christian_M

yes you can change Gray to the hex code you want. Example: background: #bbb

I hope it would help you

Best regards,

Richard | PageFly

1 Like
8

Hey Richard,

Great, just changed it!

By the way, I checked out your app and it’s fantastic! I have it on my short list now.

Again, thank you so much for your help!

Take care!

1 Like
9

Hello @BP_Dev I tried your using the code you mentioned above:

div {
background-color:grey;
color:white;
}

But it only works in the middle of the top bar, no full width, how can I adjust it?

AnaPaola007_0-1678688996462.png
AnaPaola007_0-1678688996462.png1891×221 31.5 KB

What I am trying to do is to add the following linear gradient to that Custom CSS section, here is my code, but it gives me an error:

div {
background-color: linear-gradient;(310deg, rgba(135, 96, 13, 1) 4%, rgba(252, 231, 157, 1) 54%, rgba(182, 143, 53, 1) 97%)
  max-width: 100%;
  font-display:black
}

It says, “CssSyntaxError: Unknown word (2:44)” or, missing semicolon

10

Hi Richard,

I hope you can help me!

Some apps had to do some changes to their codes to work correctly on Shopify 2.0. I mentioned to them that after the changes, I lost the dark background on the homepage that you helped me with. They said that is besides their scope.

The code is still there, but it does not work. Also, a line needs to be added for when the product is sold out (the text is still black)

Would you take a look at it?

Thank you!