How to create Font-Awesome CSS Only user group bars

Offline

Admin
#1
This is a simple MyBB hack to create CSS only user group bars using font-awesome.

Firstly, you need to understand that we will be using the Usertitle profile field to accomplish this, which means that it is a good idea to set it so that your members cannot change their default usertitle, if they do change it they will no logner be displayed with the new CSS only badge.
This tutorial assumes you are using the default usertitles, if you have custom ones, you need to change the CSS class names accordingly.


Firstly, we need to modify out postbit templates.
Go to your theme > postbit templates >postbit and find:
Code:
{$post['usertitle']}
And replace it with:
Code:
<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>
Do the same in your theme > postbit templates >postbit_classic.

Next we need to add the CSS. Go to your theme > stylesheets > global.css
Add to the bottom our base CSS:
Code:
.grouptag {
    display: inline-block;
    background: #efefef;
    padding: 3px 5px;
    border-radius: 3px;
    border: 1px solid #d4d4d4;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
}
This is the basic styling of the userbar, we then need to add different colors and icons to the bars, for example for the usergroup Registered with the usertitle Registered, we will make a class like this:
Code:
.grouptag.Registered {
background: blue;
color: white;
}
To add a font-awesome icon specific to that group we need to add a before class:
Code:
.grouptag.Registered::before {font-family: "Font Awesome 5 Free"; font-weight: 600; content: "\f007";}
You can change content: "\f007" to any unicode for an icon found on font-awesome.com(presuming you're already loading the font-awesome library).

We need to do this for each group, a class stating a background color and a font color, and if you desire an icon you will need to do the before class for each group too.
Here is a really simple CSS setup for the basic groups:
Code:
.grouptag.Unregistered::before {content: "\f00d";}
.grouptag.Admin::before {content: "\f085";}
.grouptag.Moderator::before {content: "\f0e3";}
.grouptag.Banned::before {content: "\f4b9";}
.grouptag.Registered::before {content: "\f007";}
.grouptag.Admin {
border:1px solid #2f97ef;
background:#2f97ef;
color:#fff;
}
Hi
Offline

Valued Member
#2
Mind optimizing the css a little by using the master class?

Code:
.grouptag::before{font-family: "Font Awesome 5 Free"; font-weight: 600;}
.grouptag.Unregistered::before {content: "\f00d";}
.grouptag.Admin::before {content: "\f085";}
.grouptag.Moderator::before {content: "\f0e3";}
.grouptag.Banned::before {content: "\f4b9";}
.grouptag.Registered::before {content: "\f007";}
Offline

Admin
#3
(01-05-2018, 09:16 PM)effone Wrote: Mind optimizing the css a little by using the master class?

Modified first post, good spot! Thanks effone Big Grin
Offline

Valued Member
#4
Nothing displays for me https://icypromotion.icyboards.net/showt...d=46#pid46
Offline

Admin
#5
Did you modify the correct template? For your theme you will want to be modifying postbit_classic.
Thanks,
[Image: forumonic-logo.png] Harry.
Offline

Valued Member
#6
Yes I did https://prnt.sc/jlsrkd
Offline

Admin
#7
You haven't modified the correct template it seems. You need to be editing the following template:
Your theme > postbit templates >postbit_classic.
BunFunny likes this post
Thanks,
[Image: forumonic-logo.png] Harry.
Offline

Valued Member
#8
You actually need Fontawesome installed right?
Offline

Admin
#9
You would need font-awesome installed if you want to use the icons.
Hi

You may also be interested in...
Font-Awesome Like button with jQuery by Harry KLast Post: Harry K




Users browsing this thread: 1 Guest(s)