Xenforo How to edit individual Xenforo 2 widgets with CSS

TopSilver

web developer
Administrator
Joined
Mar 10, 2017
Messages
326
Likes
77
Best answers
0
#1
This is very simple to do and I will show you. So you have a widget you want to edit with CSS. Maybe you want to give it a font awesome or material icon. Maybe you just want to change the text or background color. Well I will now solve that for you.

What were looking for is the widget key. Click on your widget and look at the widget key you gave it.

Then use the code below and replace "most_replied" with your widget key. Repeat the process for all the widgets you want to style. Basically your just editing the data-widget-key attribute. You can find these by right clicking > inspect element over your widget. I did not provide the styling in the first bit of code. I assume you know CSS so you can add in what you want. Just keep in mind to replace most_replied with your widget key. There is also a widget id that would work in the same fashion. You can also find that by using inspect element.


CSS:
.block[data-widget-key="most_replied"] .block-minorHeader, .p-body-sideNav .block-minorHeader, .block[data-widget-key="most_replied"]
.block-header, .p-body-sideNav .block-header{

}
I will leave you with an example of how to add an icon to individual widgets. Notice the :before pseudo selector. Notice the places it's being used. It's the same process but with :before being added in the place you see it in.

Then because font awesome is enabled by default simply reference the font family (with no space between font and awesome) and add your icon. Be sure to change the widget key to yours. Now you can add specific icons to each widget.

CSS:
.block[data-widget-key="most_replied"] .block-minorHeader:before, .p-body-sideNav .block-minorHeader:before, .block[data-widget-key="most_replied"]
.block-header:before, .p-body-sideNav .block-header:before {
    font-family: FontAwesome;
    content: '\f0c2';
}
If you have any questions leave them below and I will answer them.
 

Nagato

Web Designer Sometimes
Super Moderator
Joined
Mar 11, 2017
Messages
219
Likes
25
Best answers
0
#2
I haven't looked into XenForo 2 much since release. This is very helpful!