Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

Christian_M
Tourist
8 1 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!

Accepted Solutions (2)
Christian_M
Tourist
8 1 1

This is an accepted solution.

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!

View solution in original post

PageFly-Richard
Shopify Partner
4801 1084 1749

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 9 (9)

kgbfashionista
Navigator
345 24 47
.section {
background-color: grey !important;
}

h2 {
color: white !important;
}

p{
color: white !important;
}

 

 

Hi,

 

This should do it.

Feel free to like my post if it was helpful at all
Christian_M
Tourist
8 1 1

Thank you!

BP_Dev
Shopify Partner
14 1 4

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!

AnaPaola007
Shopify Partner
2 0 0

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

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

PageFly-Richard
Shopify Partner
4801 1084 1749

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

 

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Christian_M
Tourist
8 1 1

This is an accepted solution.

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!

PageFly-Richard
Shopify Partner
4801 1084 1749

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Christian_M
Tourist
8 1 1

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!

Christian_M
Tourist
8 1 1

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!