Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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!
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.
.section {
background-color: grey !important;
}
h2 {
color: white !important;
}
p{
color: white !important;
}
Hi,
This should do it.
Thank you!
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!
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?
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
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;
}
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.
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!
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.
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!
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!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024