Use colorful badge in postbit

[PARADOX987]

You can use multiple group images with the help of Omar's plugin....

but here i am going to show you how can you set a badge or tag in postbit...

Requirement :- Template conditional Plugin

i have done it with a staff badge , you can customise yourself...

add this css to your global.css or make a new css named userbadge.css

css :- 

/** userBanner username styling css **/
.userBanner{
font-size:75%;
	font-weight:400;
	font-style:normal;
	padding:1px 6px;
	border:1px solid transparent;
	border-radius:2px;
	text-align:center;
	display:inline-block
}

.userBanner--staff{font-weight:bold;color:#fff;background-image:linear-gradient(210deg, #8f343a, #26a65b, #1c86ee, #ffbe1c, #176093, #7af26d, #8e44ad, #c60, #cf4d35, #e0eeee) !important;background-size:1200% 1200% !important;-webkit-animation:TurkBinGazi 15s ease infinite !important;-moz-animation:TurkBinGazi 15s ease infinite !important;-o-animation:TurkBinGazi 15s ease infinite !important;animation:TurkBinGazi 15s ease infinite !important}@-webkit-keyframes TurkBinGazi{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@-moz-keyframes TurkBinGazi{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@-o-keyframes TurkBinGazi{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes TurkBinGazi{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.message-userBanner.userBanner{display:block;margin-top:3px}

.userBanner.userBanner--staff{color:#FFF;background:#404650;border-color:#131417;background:linear-gradient(to bottom, #404650, #292d34 100%);box-shadow:inset 0px 1px 0px 0px #8992a0}

.userBanner.userBanner--staff,.userBanner.userBanner--primary{color:#404650;background:#f9f9f9;border-color:#e0e0e0}

.userBanner.userBanner--staff{color:#FFF;background:#404650;border-color:#131417;background:linear-gradient(to bottom, #404650, #292d34 100%);box-shadow:inset 0px 1px 0px 0px #8992a0}

.message-userBanner.userBanner{display:inline-block;text-align:left;margin:0}
/** end **/

On postbit template or postbit_classic template find

{$usergroup['image']}

add above that..

<if in_array($post['usergroup'], array('3', '4', '6')) then><div class="userBanner userBanner--staff message-userBanner" dir="auto" itemprop="jobTitle"><span class="userBanner-before"></span><strong>Staff member</strong><span class="userBanner-after"></span></div><br /></if>

make sure your all staff members usergroup id is
 4 - Administratior
3- Super Moderator
6 - Moderator

For Preview :- check this page.
Note :- This is only a example of staff badge...

for your own custom use you can customise it as you like...

[DevLife]

Thanks for the Tutorial.

[DiegoPino]

+1 Thank You... 

Very  excellent tutorial