Change the color of one letter in a word

Change the color of one letter in a word

flammagreg
Trailblazer
276 0 39

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
486 107 115

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
276 0 39

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

GabrielS
Shopify Partner
486 107 115

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 28

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
276 0 39

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

thirtycoders
Shopify Partner
135 21 28

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 Partner
1972 564 564

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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now