What's new

XENFORO 2.2 [cXF] Highlight new menu item

Snape

Administrator
Staff member
Reputation: 42%
Downloaded
40.8 MB
Uploaded
2.4 GB
Ratio
59.66
Seedbonus
10,148
Upload Count
33 (18)
This is a DIY tutorial to achieve this:
1.gif

As you can see you can get an icon that changes on hover only on new items just to highlight them a bit more.

Open your extra.less template and add the code:
Less:
/*** Highlight new menu item ***/
.menu-row.menu-row--separated.menu-row--clickable.is-unread {
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-dot-circle);
        float: right;
        color: @xf-paletteAccent2;
    }
    &:hover:before {
        .m-faBase('Pro', @faWeight-solid);
        .m-faContent(@fa-var-dot-circle);
    }
}
/**********/

To edit the icon check class &:before. To change the Font Awesome icon edit the word dot-circle (in above example) with any other icon name.

To change the icon color edit the color property.

To edit icon when hover check class &:hover:before.

Want a Pro icon of a specific style?
Edit .m-faBase(); and change it to .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); or .m-faBase('Pro', @faWeight-light);.

Want a Brand icon?
Edit .m-faBase(); and change it to .m-faBase('Brands');.
 
Back
Top