Shopify themes, liquid, logos, and UX
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!
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!
Do you know how I can change the color of 'F' in the header instead of the 'B'
Not possible through CSS, you'd need HTML adjustments too.
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!
Do you know how to do it for the "f" not the "b"
I think it's not possible
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!
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025