XF 2.2 Custom CSS for prefixes

[Nicolas FR]

Hello,

I CSSed title of every pages with this

.p-title-value {
    font-size: 26px;
    font-weight: 400;
    color: rgb(242, 94, 35);
    }

And i create custom CSS for some prefixes, like this

.php {
    font-size: 80%;
    background: rgb(240, 0, 114);
    padding : 0 5px;
    border-radius: 2px;
}
a .php {
    color: white;
}

Works fine except when the prefixe is displayed with the thread title, the prefixe text is colored with the color of the thread title rgb(242, 94, 35)
I missing something ? This behaviour doesn't occur with original prefixes.

Thanks !

 

[SyTry]

Hello, maybe you target the wrong class?

Regards, SyTry

 

[Paul B]

I have found this is the easiest way to create new prefix styling.

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

It's not ideal as it involves editing a core less template, which should generally be avoided, but it ensures it works throughout the site and behaves exactly like a core prefix style.

 

[Nicolas FR]

Hello, maybe you target the wrong class?

I don't think so because the custom prefix works fine everywhere except on thread title (which is colored in extra.less too so maybe there is something here to adjust).

 

[Nicolas FR]

I have found this is the easiest way to create new prefix styling.

So the native feature to set a custom css for a prefix is bugged ? You cannot set a text color for the prefix because it will be overrided by the page title color ?

Or maybe this part of code is badly written ?

a .php {
    color: white;
}

But without it you can't set color to the prefix text.
Put the color attribut in the code below doesn't change the text color

.php {
    font-size: 80%;
    color: white;
    background: rgb(240, 0, 114);
    padding : 0 5px;
    border-radius: 2px;
}

Thanks

 

[Paul B]

It works fine for me using the other field and a custom class. so presumably you have custom CSS overriding it somewhere.

 

[Nicolas FR]

Did you set in extra.less a custom color for p-title-value too ?