New Shopify Certification now available: Liquid Storefronts for Theme Developers

Set font colour of image banner heading text

Solved
OliviaMichaelCo
Pathfinder
118 9 23

Hello all.

 

I'm quite new to Shopify and while the FAQs and help pages here have been of tremendous use, I cannot quite find the answer to a problem I have with font colours.

 

I have an image banner on a few pages and unlike when you have a text box behind the header text, the font doesn't change colour based on the background image. It defaults to a white font, which makes it hard to read since most of my images are lighter in nature.

 

Is there a way to customise the font colour for a specific image banner and change it from white to black?

 

Note, not all image banners have this issue, so I'd like to just target those where I have used a lighter image.

 

Many thanks.

Rosalind.

Accepted Solution (1)
OliviaMichaelCo
Pathfinder
118 9 23

This is an accepted solution.

Hello Ketan,

 

Thank you for the offer to help. I actually found this shortly after posting. I had to find the relevant theme file and add it manually there.

 

I found this:

 

.banner__heading > *,
.banner__text > * {
word-wrap: break-word;
color: white !important;
}

 

Within the section-image-banner.css file and changed 'white' to 'black', as it happens, I don't like it black so leaving it as the theme intended. 

Thank you.

View solution in original post

Replies 2 (2)
KetanKumar
Shopify Partner
36721 3634 11914

@OliviaMichaelCo 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
OliviaMichaelCo
Pathfinder
118 9 23

This is an accepted solution.

Hello Ketan,

 

Thank you for the offer to help. I actually found this shortly after posting. I had to find the relevant theme file and add it manually there.

 

I found this:

 

.banner__heading > *,
.banner__text > * {
word-wrap: break-word;
color: white !important;
}

 

Within the section-image-banner.css file and changed 'white' to 'black', as it happens, I don't like it black so leaving it as the theme intended. 

Thank you.