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!

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

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

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!

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!

11

You can definitely change the background and font color for just one section without affecting the rest of your theme. Since Turbo 2.0 lets you add section-specific CSS, you can target the collection section directly. For example:

/* Target the collection section by its ID or class */
#CollectionSection {
    background-color: #808080; /* example gray */
    color: #ffffff; /* white text */
}

/* Optional: make sure headings and links inside also change */
#CollectionSection h2,
#CollectionSection p,
#CollectionSection a {
    color: #ffffff;
}

You’ll just need to replace #CollectionSection with the actual ID or class of your collection section — you can find it by inspecting the page in your browser.

I also made an app, Easy Edits, that you can use to change all this stuff without touching code. You just click and change, or talk to the AI to have it edit for you.

12

You can achieve that effect without much coding. Essentially, you want the “body” or page wrapper to have a background color, and then constrain the main content to your normal width so the edges show the cream color. For example:

body {
    background-color: #f8f4e6; /* light cream */
}

.main-content-wrapper {
    background-color: #ffffff; /* your normal page content */
    margin: 0 auto; /* centers content */
    max-width: 1200px; /* adjust to your page width */
    padding: 20px; /* optional spacing */
}

This way, the desktop view has the cream on the sides, but your content stays centered. On mobile, the content fills the screen as usual, so it looks good automatically.

I also made Easy Edits — you can click and drag to set background colors, spacing, and content widths, or just ask the AI to make the change like you’re talking to a person.

13

Hello,

I had to pay back then to have hard coded on the theme.

I took a look at your app, great by the way. I will definitely consider it if I ever need to change anything.

Thank you!