Re: Changing colour for single letter in word

Changing colour for single letter in word

njlee
Tourist
11 0 1

Hi

Please help! 

I want to change the colour of a single letter in a word

 

https://theimpossiblesauces.com/

 

In the main page,

"Welcome to the I.mpossible Sauces Factory"

 

How do I change the . to green colour? Currently it is blue colour

 

Thank you! 

 

Replies 8 (8)

PageFly-Richard
Shopify Partner
4416 1006 1657

Hi @Njlee

I’m Richard Nguyen from PageFly- Free Landing Page Builder

-Go to Online Store->Theme->Edit code

-Asset-> section-image-banner.css  paste the below code at the bottom of the file.

h2.banner__heading.h1{color:green

}

 

RichardNguyen_0-1666260657343.png

 

Hope my solution works perfectly for you!

 

Best Regards;

Richard | PageFly



Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

njlee
Tourist
11 0 1

Hi RichardNguyen, 

Actually i would like just the . to be green

Not the whole sentence. Just the "Full Stop" to be green. Other words to remain as Blue

 

Thank you

oscprofessional
Shopify Partner
15961 2387 3095

@njlee 

Hello,

.banner__heading::first-letter {
	color: #27b014;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->section-image-banner.scss.liquid

Like This

oscprofessional_0-1666266533071.png

 



Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
njlee
Tourist
11 0 1
Hi

How do i change the other letters?

Example i want the 2nd or 3rd letter to change colour

Thank u
oscprofessional
Shopify Partner
15961 2387 3095

Hello @njlee 

First, you define a class like -

 

<h2 class="banner__heading h1">Welcome to The I <span class="word__dott"> . </span>impossible Sauces Factory</h2>

 

And Apply through CSS -

 

.banner__heading.h1 span{
color: #27b014;
}

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
njlee
Tourist
11 0 1

Hi there! 

 

thank you for reply

 

where do I put both codes? which section do i add it in ?

 

thank you

oscprofessional
Shopify Partner
15961 2387 3095

@njlee 
Hello,
Add this css at the bottom of Online Store->Theme->Edit code->Assets->section-image-banner.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
njlee
Tourist
11 0 1

Hi sorry

 

it doesnt seem to work. apologies

 

maybe can start from 

Step 1

Step 2

..

..

 

thank you so much