How can I change the color of a specific word in CSS?

[Boreome]

I cant figure out how to change the color of a single word in shopify css.. i tried all the solutions i could find on here..

On my main image banner in dawn i have written ''RESILIENCE LONGEVITY & STRENGTH. PINE POLLEN'' I only want pine pollen to be yellow. Can anyone enlighten me? thank you.

[Harsita]

Hi @Boreome 

Thank you for reaching out to Shopify community.

In customize section, add pine pollen between span tag in Heading of Image Banner. Ex- 

RESILIENCE LONGEVITY & STRENGTH. <span>PINE POLLEN</span>

 Now go to your base.css file, target span of banner heading and change the color(copy the below code in the bottom of your css file)

.banner__heading span{
  color: yellow;
}

This should change the text color of "Pine Pollen"

Screen shots for your reference:-

If the color didn't change, please send me your store URL so that I could provide you with detailed solution.

Do give it a try and let me know if this was helpful.

Thanks.

[Boreome]

Thanks Harista,

I tried and i cant get it to work. My heading text customization box seams different than yours.. would you know why?

Its another problem i have.. I want to be able to put some spaces between sentences on some text content on other image banners (using Shift + Enter). It only seems possible with the type of text box that is on the screen shot you shared (with the text tools on top).

Anyway one problem at a time.

my web url is www.boreome.com

password: Wjust@196!ja$09QwNf

thanks!

[Made4uo-Ribe]

If you like to put some space between "STRENGTH.&nbspPINE POLLEN" if you like to locate down the PINE POLLEN add "STRENGTH.<br>PINE POLLEN". I hope it help. 

[Boreome]

Hi Ribe, I still cant get the single word to change color even if i follow what you suggested.. Like i said my text box isnt the same as yours. do you have an idea what else i could try?

Here is my url: www.boreome.com

password: Wjust@196!ja$09QwNf

[Made4uo-Ribe]

Hello, Oh I thought you already did with harsita's solution. I have another solution you can try. 

You can edit the The text right? Can you write only the "RESILIENCE LONGEVITY & STRENGTH.". Then add this code. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

h2.banner__heading.h0:after {
    content: "PINE POLLEN";
    color: yellow;
}

Result:

I hoe it help. 

[Boreome]

Hi Ribe, it worked but i have my website translated in french. Since this way of coding genericaly drops "Pine pollen" ant the end of the header it dosent translate it in the french version.

I understand i need to create a style in base.css and the use span to let it know what word i want to have assigned to the style.

Could you help my smooth brain understand how to code that style in my base.css and how to assign a word to that style.

Here is what i have been trying.. dont laugh

Thank you so much for your time.

[Made4uo-Ribe]

You'll error your banner. 😅 I try something. 

Still go to the Costumize. 

And add this one in the Heading. 

<p>RESILIENCE LONGEVITY & STRENGTH. <span class="custom-color">PINE POLLEN<span></p>

Then paste this one in the base.css. 

h2.banner__heading.inline-richtext.h1 span {
    color: yellow;
}

Then SAVE. 

[Boreome]

Hi Ribe, I did what you said and it wont work. here are the pictures.

Like in the first post. I dont seem to have the same text box that you in my theme editor.

[Made4uo-Ribe]

What dawn theme version are you? Im using Version 10. 

[Boreome]

Im using 8.0.0.. Im not sure i can update without losing everything.. Would you have a solution for this version?

[Saravik]

Hello, how are you doing, could you help me to do the same on some content paragraphs I have on my store?

Thank you.

[Made4uo-Ribe]

Hi @Boreome ,

Would you mind to share your URL website? with password if its protected. Thanks!

[Boreome]

Thanks for the reply Ribe,

www.boreome.com

password:
Wjust@196!ja$09QwNf

Thank you

[Levi]

Hello everyone,

in case anyone is still having trouble colorizing individual words in your theme, I got so tired of trying different workarounds that I decided to build my own app for it. It’s straightforward, free, and might make your life a bit easier. 🙂 

https://apps.shopify.com/pulsar

Best,

Levi