XF tips Colorful Categories.

xenforo

Well-known member
Staff member
Administrator
Moderator
Premium
Mar 18, 2019
779
3,427
This simple CSS will change you NODE styling to become a colorful per category base, you may use one copy of provided CSS for one category, which including necessary code for sub-node also (code included in ITD Colored Categories.css).


2020-01-10_102601.jpg


Also provided an option to set/change Category icons (Line # 5).

Also provided an option to change NODE icons (see nod-icon.css).

You have to chose 3 shades of color for each Category, in line # 3, dark shade for main Category color, lite shade of same color in line # 15 & 28 for if no un-read items in node and sub-node, and medium shade of same color in line 20 & 33 for node and sub-node having unread items.
2020-01-10_095657.jpg
Legends
  1. Category Icon​
  2. Category Base Color (Dark)​
  3. Node / Sub-Node (Lite color having no unread item)​
  4. Node / Sub-Node (Medium Color Having Un read items)​
  5. Displaying Node Icons (font-Awesome) have separate CSS code. (also included in nod-icon.css)​
  6. Showing [NEW] in front of node having unread item is an other CSS which you may find some ware in xenforo official forum too.​
2020-01-10_102816.jpg
You can download attached CSS files and add the same in EXTRA.LESS after necessary changes as per your requirement.
An Overview

2020-01-10_113148.jpg
 

Attachments

  • 1592072317685.gif
    1592072317685.gif
    42 bytes · Views: 3
  • 1592072317719.gif
    1592072317719.gif
    42 bytes · Views: 2
  • Like
Reactions: Gestionar

Mascot art byDigitalKaiju