Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How to change text colour in a specific text box on the product page -Craft 13 Theme

Solved

How to change text colour in a specific text box on the product page -Craft 13 Theme

BAFC
Excursionist
36 1 4

Hi All,

 

Craft Theme 13

 

I would like to change the colour of the text in one specific text box on my product pages:

 

Screenshot 2024-07-18 at 8.42.45 AM.png

 

Specifically the: "BUY ANY 3 PRODUCTS GET 5% DISCOUNT, BUY ANY 6 PRODUCTS GET 7% DISCOUNT, BUY ANY 10 PRODUCTS GET 10% DISCOUNT - DISCOUNTS APPLIED PER ORDER ONLY (Applies to GM products only. Not in conjunction with other offers. No further discounts apply)" 

 

I can see the code when I look via Chrome:

 

Screenshot 2024-07-18 at 8.44.08 AM.png

 

I tried looking in Base.css, but I cannot locate it or how to change the colour of that text.

 

Any help would be appreciated. 

 

Thanks

 

BAFC

 

Accepted Solution (1)
BAFC
Excursionist
36 1 4

This is an accepted solution.

Thanks MaverickStudio

 

I wasn't sure I had to replace the previous code snippet, I added it as well as. 

 

Done what you have said, and now it is working perfectly.

 

Many thanks for all your help and time. 

 

Regards,

 

BAFC

View solution in original post

Replies 10 (10)

MaverickStudio
Shopify Partner
101 32 34

Hey @BAFC ,

That's a simple fix. Add the following to base.css with your desired color. Just change red to any hex or rgb value. Good luck Mate

 

.product__text.inline-richtext strong {
	color: red !important;
}

 

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

BAFC
Excursionist
36 1 4

Hi Maverickstudio. 

 

I have applied the fix and it works, thank you.

 

However it has also changed the colour of my "Description" header text? Is there a way to change this back without changing the required adjusted text? 

 

It was originally black. 

 

Screenshot 2024-07-18 at 9.51.15 AM.png

Cheers. 

 

 

MaverickStudio
Shopify Partner
101 32 34

Hey @BAFC ,
Can you pop over the live link of the dev store? I'll have a squiz and get back to you asap. Cheers

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

BAFC
Excursionist
36 1 4

Hi Maverickstudio,

 

Live link:

 

https://www.bradshawaustralia.com.au/

 

Thanks.

 

BAFC

MaverickStudio
Shopify Partner
101 32 34

Hi @BAFC ,

 

Okay, i came up with a bit of a hack to do it without affecting any of the other headings. 

Tested with a dummy site with information on your website. Just use strong and italics together so we can accurately target the element and then reset the font style to normal.

Use the same text settings as the image and you're good to go.

.product__text.inline-richtext em strong {
    color: #00f !important;
    font-style: normal !important;
}






Screenshot 2024-07-18 143705.png

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

BAFC
Excursionist
36 1 4

Thanks Maverickstudio,

 

I tried this but could not get it to work? 

 

Where should I add that code snippet? 

 

BAFC

MaverickStudio
Shopify Partner
101 32 34

Hi @BAFC ,

For the snippet replace the one we previously used with the new one in base.css.

For the text, make sure that you select the existing text and mark it as italics. Currently they aren't marked as Italic

The aforementioned steps should work swimmingly, I'm happy to jump in as a collaborator account if needed. 

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

BAFC
Excursionist
36 1 4

This is an accepted solution.

Thanks MaverickStudio

 

I wasn't sure I had to replace the previous code snippet, I added it as well as. 

 

Done what you have said, and now it is working perfectly.

 

Many thanks for all your help and time. 

 

Regards,

 

BAFC

Janine78
Visitor
1 0 0

Hi, i am having trouble changing text colour just on my added page which is my story page, i can change all other sections but not pages section! 

BAFC
Excursionist
36 1 4

Hi Tono,

 

Thanks for this very comprehensive solution. I will look into this when I have more time, but have applied a "quick fix" for now. 

 

Regards,

 

BAFC