XenForo Tutorials

Highlight new menu item

Submitted by Yondu, , Thread ID: 197753

Yondu
Marry Poppins Y'all
Administrators
Level:
34
Reputation:
190
Posts:
1.48K
Likes:
324
Credits:
3.49K
12-02-2021, 09:10 PM
#1
This is a DIY tutorial to achieve this:

[Image: c3ZY6Cs.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 you extra.less template and add the code:

Code:
/*** Highlight new menu item ***/
.menu-row.menu-row--separated.menu-row--clickable.menu-row--highlighted {
    &: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');.
[Image: wsUuw16j6oyxLLRnnK.gif]

RE: Highlight new menu item

Junior Member
Level:
6
Reputation:
0
Posts:
70
Likes:
2
Credits:
5
18-01-2022, 05:55 PM
#2
this is not working there should be something else to go with this i think

Users browsing this thread: 1 Guest(s)