Background color of text block ?

  • daveporter
    April 7, 2026 at 1:32 am

    Hi everyone,
    On the page linked there are containers that have a title followed by an icon & text.
    I am using the same styling on a number of pages, and the number varies.
    I have noticed that some of the text areas have an orange background, which is really odd, as I have no idea where it is coming from.
    The CSS is:

    element.style {
    background-color: rgb(239, 108, 0);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
}

    And I see the CSS inline when viewing the HTML!
    Thoughts ?
    TIA, Dave

  • George
    April 7, 2026 at 3:50 am

    Hello,

    Doe that text appear as GB text in the backend? Did you maybe pasted this text from a formatted Google document or similar?

  • daveporter
    April 7, 2026 at 5:23 am

    Thanks George,

    No it does not show the background color in the admin.

    And I’m pretty careful to ensure my copy and paste is from a plain text editor.

    I just tried something, I copied the text, pasted it locally, duplicated the text block, removed the existing text, and pasted in my plain text. But that background color is still there on both.

    I also looked at Edit as HTML, and no sign of anything causing it.
    But I see the inline CSS.
    I just spent 20 minutes getting Claude to analyse it, with nothing specific to help!

    Most odd thing I have experienced in ages!

    Dave

  • George
    April 7, 2026 at 5:30 am

    Hi Dave,

    Is it possible to share credentials in the private section so I could have a look? You can also install the Temporary Login Without Password plugin and send us a login link without using a password. Again, please, use the private area of your reply to send those details.

  • daveporter
    April 7, 2026 at 5:14 pm

    Thanks George,

    I have updated the Private information…

    Dave

  • Alvind
    April 7, 2026 at 8:18 pm

    Hi Dave,

    In your Perfmatters Code Snippets, there is a JS snippet called Color status that scans every <span> on the page and applies a colored background to any text containing specific keywords like “GOOD STOCK”, “LOW STOCKS”, “VERY”, “UNAVAILABLE”, etc.

    In this case, the Cowpeas and Chicory descriptions on the page both contain the word “very” in their natural text, which triggers the script to apply the orange background meant for status badges.

    To fix it, you could make the keyword more specific (e.g., change ‘VERY’ to ‘VERY LOW’), or exclude the script from running on product pages if it’s not needed there.

  • daveporter
    April 7, 2026 at 10:23 pm

    Thanks Alvind,
    Well spotted, I would never have found that!
    That is only required for one page, so I’ll update the CSS trigger…
    Cheers, Dave

  • Alvind
    April 7, 2026 at 11:33 pm

    Glad to hear that Dave!

  • daveporter
    April 7, 2026 at 11:35 pm

    All fixed, thanks again!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.