XF 2.3 Change row color of thread with certain prefix

beerForo

Well-known member

• Jan 5, 2026

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #2

PS. This is for
What's New
New Posts
Forum View
and other lists.

 

Upvote 0 Downvote

beerForo

Well-known member

• Jan 9, 2026

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #3

Anyone know how this would be done?

 

Upvote 0 Downvote

Jeremy P

XenForo developer

Staff member

• Jan 9, 2026

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #4

The rows have a class of .is-prefix{id} so you can use that to target them for whatever CSS you want.

 

Upvote 0 Downvote

beerForo

Well-known member

• Jan 9, 2026

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #5

Oh cool! Could you provide an example, not even sure how to target a row. Thank you!

 

Upvote 0 Downvote

Jeremy P

XenForo developer

Staff member

• Jan 9, 2026

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #6

Less:

.structItem.structItem--thread.is-prefix1
{
    background-color: yellow;
}

 

Upvote 1 Downvote

Solution

beerForo

Well-known member

• Jan 9, 2026

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #7

Sweet! It works! Can I ask how to target dark and light modes or is that too much to ask?

 

Upvote 0 Downvote

Jeremy P

XenForo developer

Staff member

• Jan 9, 2026

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #8

The same technique described here applies:

XF 2.3 Post in thread 'Custom prefixes'

Jul 1, 2024

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):

Less:

.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:

Less:

.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will...

• Jeremy P

• 
• 

 

Upvote 0 Downvote

beerForo

Well-known member

• Jan 10, 2026

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #9

Brilliant! I'm using it with @Siropu's Ads Manger for promo threads that have a dedicated prefix, now they are highlighted!

Not sure I am coding it right but it works for light and dark.

Code:

.structItem.structItem--thread.is-prefixA
{
    background-color: #AAAAAA;
}
.m-colorScheme(dark,
    {
    .structItem.structItem--thread.is-prefixA
    {
    background-color: #BBBBBB;
    }
    }
);

 

Upvote 0 Downvote