Highlight new menu item

Yondu · 12-02-2021, 09:10 PM

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');.

Highlight new menu item

Submitted by Yondu, 12-02-2021, 09:10 PM, Thread ID: 197753