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

Store Design

Topic summary

Goal: Change the color of a specific discount message on Craft Theme 13 product pages without affecting other headings.

  • Initial approach: Adding to base.css (theme stylesheet) the selector .product__text.inline-richtext strong { color: red !important; } changed the message color but also unintentionally changed the “Description” header.

  • Final solution: Narrow the selector by wrapping the target message in italics (em) while keeping it bold (strong), then replace the prior rule in base.css with:
    .product__text.inline-richtext em strong { color: #00f !important; font-style: normal !important; }
    This targets bold text inside the italicized block only and resets the display to non-italic. OP confirmed it works.

  • Implementation notes: Replace the earlier CSS rule in base.css, and mark the message text as Italic in the content editor. A live site link was shared to validate the fix.

  • Status: Original issue resolved. A new question about changing text color on a separate “My Story” page (pages section) was raised and remains unanswered.

Summarized with AI on December 17. AI used: gpt-5.
1

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
Screenshot 2024-07-18 at 8.42.45 AM.png709×482 81.9 KB

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|506x323](upload://3MQYL3un7zFv8BPkLdNKAlemfjC.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

2

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;
}
3

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
Screenshot 2024-07-18 at 9.51.15 AM.png557×374 23.6 KB

Cheers.

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

5

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

6

Hi Maverickstudio,

Live link:

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

Thanks.

BAFC

7

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
Screenshot 2024-07-18 143705.png833×857 87.2 KB

8

Thanks Maverickstudio,

I tried this but could not get it to work?

Where should I add that code snippet?

BAFC

9

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.

10

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

11

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!