Use colorful badge in postbit

[Spartak]

Use colorful badge in postbit

You can use multiple group images with the help of Omar's plugin....<br />
<br />
but here i am going to show you how can you set a badge or tag in postbit...<br />
<br />
<div style="text-align: center;" class="mycode_align"><span style="font-weight: bold;" class="mycode_b"><span style="color: #d900a7;" class="mycode_color"><span style="font-family: Times New Roman;" class="mycode_font">Requirement :- Template conditional Plugin</span></span></span></div>
i have done it with a staff badge , you can customise yourself...<br />
<br />
add this css to your global.css or make a new css named userbadge.css<br />
<br />
css :- <br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php">/** 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 **/</code></pre><br />
On postbit template or postbit_classic template find<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php">{$usergroup['image']}</code></pre><br />
<br />
add above that..<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php">&lt;if in_array($post['usergroup'], array('3', '4', '6')) then&gt;&lt;div class=&quot;userBanner userBanner--staff message-userBanner&quot; dir=&quot;auto&quot; itemprop=&quot;jobTitle&quot;&gt;&lt;span class=&quot;userBanner-before&quot;&gt;&lt;/span&gt;&lt;strong&gt;Staff member&lt;/strong&gt;&lt;span class=&quot;userBanner-after&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;/if&gt;</code></pre><br />
<br />
make sure your all staff members usergroup id is<br />
 4 - Administratior<br />
3- Super Moderator<br />
6 - Moderator<br />
<br />
For Preview :- check <span style="font-weight: bold;" class="mycode_b"><a href="

Please, Log in or Register to view URLs content!

" target="_blank" rel="noopener" class="mycode_url"><span style="color: #e82a1f;" class="mycode_color">this</span></a></span> page.<br />
Note :- This is only a example of staff badge...<br />
<br />
for your own custom use you can customise it as you like...

Please, Log in or Register to view URLs content!