XF 2.1 How to make certain prefix changes background colour?

[Martyn]

I have a prefex called "Approved" isnt it possible to make this change the background of the whole thread to stand out a little more?

for example like this?

 

[Paul B]

Creating custom prefix styling

By default, XF comes with the following prefix styles: Creating custom styling using the Other, using custom CSS class name option is fairly straightforward. This guide will explain how to. The easiest way by far to add new prefix styling...

xenforo.com

 

[Martyn]

think thats for making the colours of the prefix a different colour? don't see it talk about making the thread change colour too??/

its currently like this

ideally when a thread is approved, it would change the colour of the whole thread, making it stand out more?


Thought I remember seeing something, but unable to find it via searching

 

[Paul B]

Ahh, I missed it was for the thread.

I'm on my tablet so can't check the code but you can likely use the prefix ID in extra.less.

Press F12 for the browser inspector to check the CSS.

 

[021]

.LESS code for example

.structItem--thread
{
    &.is-prefix{your_prefix_id}
    {
        background: {your_background};
    }
}

 

[Martyn]

.LESS code for example

.structItem--thread
{
    &.is-prefix{your_prefix_id}
    {
        background: {your_background};
    }
}

so

am struggling?

.structItem--thread
{
    &.is-prefix{1}
    {
        background: #FFF;
    }
}

tried prefix id with and without the {} guess it means ID as in number? not the name?

which place to stick it? tried core.less/extra.less

 

[Paul B]

Yes, in the extra.less template.

You will need to add the specific ID for that prefix.

Note that if you are using a custom style, the default CSS may not work - you would need to contact the author of the style in that case.

 

[Martyn]

I've just been testing on the default theme with no luck either :s need to pop out, will try again when I get back

 

[Paul B]

This works for me in the default style:

.structItem--thread
{
    &.is-prefix1
    {
        background: orange;
    }
}

 

[Martyn]

Hmmm
one of these addons are stopping it working.. isn't the custom theme/addons for it as I disabled it, yet it worked on a test installed of Xenforo with the custom theme installed (on default theme)

christ, why is nothing ever simple??? >.<

 

[Russ]

Are you using the default prefix colors or setting a custom class? If you're using the default colors... you'll need different CSS:

.structItem .label.label--blue {
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
    border: 1px solid rgb(0, 128, 0);
}

Something like that would change the blue prefix (assuming you have the blue selected which I assume you do).