Change color for single words in a header (image banner)

Hi, I’m trying to change the color of some of the text on my H1 here: https://sugarfreeeu.com/ (better sweets, better you"

I would like to word YOU. to be white, but I’m not sure where should I edit the code and how.

From Wordpress I know you can simply type it in as span, but this won’t work here :disappointed_face:

Dawn theme

Please help

@Eli90 add below css into base.css file

h1.videoBoxInfoTitle {
    color: white !important;
}

Hi @Eli90

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

#shopify-section-template–18965853765963__83cac2b1-c110-41b9-af88-0b03cf353df6 h1.videoBoxInfoTitle {

color: white !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

@PageFly-Lucas thank you for replying. I would like only the word “YOU.” to be in white

@Ujjaval thank you for replying. I would like only the word “YOU.” to be in white

@Eli90 add below code into theme.liquid
Before closing tag


Before closing tag


result :

Hi @Eli90 ,

I understand that you want to change the specific word in the h1. If you know a bit of coding you can try this one. What I did is add in the HTML to call in CSS.

# 
                            Better SWEETS, better YOU.
                        

And the css style.

h1.videoBoxInfoTitle span {
    color: black;
}

Result:

I hope it help.

@Made4uo-Ribe thank you very much!! yes I can, but I’m not sure where should I add the codes to ? like which files :slightly_smiling_face:

@Ujjaval worked like magic!! thank you very much!

btw, is there a way to use it for more words? for instance if I would like to make another word pink, but leave this one green.

That would be hard for me to find the specific folder for the HTML edits because it have different folder name. But you can try to find in Sections file the folder name is like videobox or videoboxinftitle. And you can paste the css style in the base.css file.

@Eli90 yeah it’s work. even though for single character we can change the font color.

@Ujjaval thank you for the lesson! I tried to change some of the others, but its not working for me:

span.headingbetter { color: pink !important; }

am i doing something wrong ?

@Eli90 try below one :