User Drop Down Icons + Message drop down icons (CSS only)

User Drop Down Icons + Message drop down icons (CSS only) - vb5.2.5

Mod Version: 1.00, by napy8gen

vB Version: 5.2.5	Rating: (4 votes - 5.00 average)	Installs: 10
Released: 31 Jan 2017	Last Update: Never	Downloads: 0
Not Supported

This is better than previous mod because the unread and read messages icons are different.
Previous mod cannot be used in vb5.2.5 because changes in CSS classes.

1. Put font awesome in head_include template
style manager> style name> edit templates>head_include

HTML Code:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2. Put this in css_additional.css
style manager> style name> edit templates> CSS templates> css_additional.css

HTML Code:

/*-- top right menu icons --*/
.username-container .b-comp-menu-dropdown .b-comp-menu-dropdown__content-item:first-child a:before {
    font-family: "FontAwesome";
    content: "\f2be";
    padding-right: 10px;
    top: -1px;
    position: relative;
}
.username-container .b-comp-menu-dropdown .b-comp-menu-dropdown__content-item:nth-child(2) a:before {
    font-family: "FontAwesome";
    content: "\f0e6";
    padding-right: 10px;
    top: -1px;
    position: relative;
}
.username-container .b-comp-menu-dropdown .b-comp-menu-dropdown__content-item:nth-child(3) a:before {
    font-family: "FontAwesome";
    content: "\f013";
    padding-right: 10px;
    top: -1px;
    position: relative;
}
.username-container .b-comp-menu-dropdown .b-comp-menu-dropdown__content-item:last-child a:before {
    font-family: "FontAwesome";
    content: "\f08b";
    padding-right: 10px;
    top: -1px;
    position: relative;
}
/*--- messages menu ---*/
.js-pmchat__dropdown-submenu .js-pmchat__submenu__ephemeral a:before {
    font-family: "FontAwesome";
    content: "\f2b6";
    padding-right: 10px;
    top: -1px;
    position: relative;
}
.js-pmchat__dropdown-submenu .js-pmchat__submenu__ephemeral.b-comp-menu-dropdown__content-item--unread a:before {
    font-family: "FontAwesome";
    content: "\f0e0";
    padding-right: 10px;
    top: -1px;
    position: relative;
}
.js-pmchat__dropdown-submenu .b-comp-menu-dropdown__content-item.b-comp-menu-dropdown__content-item--divider a:before {
    font-family: "FontAwesome";
    content: "\f040";
    padding-right: 10px;
    top: -1px;
    position: relative;
}
.js-pmchat__dropdown-submenu .b-comp-menu-dropdown__content-item:nth-last-child(2) a:before {
    font-family: "FontAwesome";
    content: "\f01c";
    padding-right: 10px;
    top: -1px;
    position: relative;
}

Download

No files for download.

Screenshots

Miscellaneous Hacks User Drop Down Icons + Message drop down icons (CSS only) - vb5.2.3/vb5.2.4	vBulletin 5.x Template Modifications
Post Icons - drop down list (good for lots of icons!)	vBulletin 3.0 Full Releases

vBulletin LTS