Change the color of one letter in a word

flammagreg
Trailblazer
237 0 38

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!

Replies 7 (7)

GabrielS
Shopify Partner
483 106 114

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.

GabrielS_0-1714849663496.png

 

 

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

 

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
flammagreg
Trailblazer
237 0 38

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

GabrielS
Shopify Partner
483 106 114

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

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.

thirtycoders
Shopify Partner
135 21 26

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!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
flammagreg
Trailblazer
237 0 38

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

thirtycoders
Shopify Partner
135 21 26

I think it's not possible

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

BSSCommerce-B2B
Shopify Expert
352 58 66

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.

view.png

- 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! 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development