Change the color of one letter in a word

[flammagreg]

Hi guys, I've been stuck on this for an hour now. Does anybody know how I can change the color of a specific letter in a word? My website is fluzeo.com and I want to change the color of the "F" in "BRIEFINGS" in the header and the "F" in the body section to a grayish color. Both are in the email sign up on the home page. Any help would be greatly appreciated!

[GabrielS]

Hi there,

You can change the first letter in a word by using the below CSS:

.newsletter h2::first-letter {
  color: red;
}

Adding the CSS at the end of your base.css file should render as the following screenshot.

I couldn't find the 'F' in the body section, however, a similar approach should work.

Cheers!

[flammagreg]

Do you know how I can change the color of 'F' in the header instead of the 'B'

[GabrielS]

Not possible through CSS, you'd need HTML adjustments too.

[thirtycoders]

Hello @flammagreg,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid or base.css

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

newsletter h2::first-letter {
    color: grey;
}

Thanks!

[flammagreg]

Do you know how to do it for the "f" not the "b"

[thirtycoders]

I think it's not possible

[BSSCommerce-B2B]

Hi @flammagreg 

You can access the liquid file containing that text, adjust the HTML structure slightly, and add CSS with the ::first-letter pseudo-element.

Here's the demo code I've created; you can refer to it to apply to your website.

- Link demo: https://www.w3schools.com/CSSref/tryit.php?filename=trycss_sel_firstletter 

------------------------------------------------------------------------------------------------------------------------------------------

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

Have a nice day sir!