Creating custom thread and resource prefix CSS

[guclusat]

Creating custom thread and resource prefix CSS

This resource is not affiliated with XenForo Ltd.

I'm sure lots of people will want to create their own thread and resource prefix CSS, so this guide will help you do that.

The following code should be added to EXTRA.css

In the example below we're going to create two classes; CTA1 and CTA2.
Of course you can choose whichever class names you like.

.prefix.prefixCTA1 {
color: @textCtrlBackground;
background-color: @primaryDarker;
border-color: @primaryDark;
}
    a.prefixLink:hover .prefix.prefixCTA1 {
    color: red;
    background-color: yellow;
    border-color: blue;
    }

.prefix.prefixCTA2 {
color: @textCtrlBackground;
background-color: @primaryLightish;
border-color: @primaryMedium;
}
    a.prefixLink:hover .prefix.prefixCTA2 {
    color: black;
    background-color: white;
    border-color: red;
    }

As you can see, the CSS is quite basic consisting of just text, background and border colours.
You can add whatever additional styling you like.

Each class also has CSS for hover, so individual prefixes can have different hover effects. Again, the CSS can be expanded to suit.

Once you've created your CSS, simply choose the Other, using custom CSS class name option for the prefix in question, and enter it as follows: prefix prefixCTA1
Note that there are no . before the class names and they are separated by a space.

If you have multiple styles installed, you will need to add the code to EXTRA.css in each style.
It doesn't have to be the same, you can change it to suit each style.

I wish you success.