Admin KP - Temalar & Şablonlar - Temalar - Sitenizde kullandığınız temaya tıklayın ve ardından yeni bir css dosyası oluşturun. Css dosyasını oluşturduktan sonra kendi içeriğimi yazmak istiyoruma tıklayın ve aşağıdaki kodları yapıştırınız.
Admin KP - Temalar & Şablonlar - Şablonlar - Kullandığınız Tema - Gruplandırılmış Şablonlar - Headerinclude şablonuna giriyoruz, {$stylesheets} kodunun üzerine aşağıdaki kodları ekliyoruz.
Admin KP - Temalar & Şablonlar - Şablonlar - Sitenizde kullandığınız temanın şablonlarına tıklayın ve ardından postbit şablonlarına girin. Postbit şablonlarına girdikten sonra postbit_groupimage şablonunda aşağıdaki kodu aratınız.
Yukarıdaki kodu silip aşağıdaki kodu yerine ekleyiniz.
Admin KP - Üye & Gruplar - Hangi grubun rank-rütbe sistemini değiştirmek istiyorsanız o gruba girin ve grup resmi yerine aşağıdaki kodu ekleyiniz.
Önizlemek için aşağıdaki linke tıklayınız.
https://codepen.io/holigan/pen/WKJagB
Rank-rütbe sistemini çoğaltmak için kullanıcı grup resmindeki kodda bulunan background rengini değiştirmeniz yeterlidir. :D

Coder By: #Captain.
Kod:
.rank {
border-left:3px solid rgba(0, 0, 0, 0.2);
border-radius:3px;
border-color:#464646;
margin-top:3px;
text-align:center;
height:25px;
line-height:25px;
position:relative;
max-width:170px;
padding:2px 5px;
user-select:none;
color:#FFFFFF;
font-size:13px;
font-weight:normal;
}
.rank strong:before{
content:"\f113";
font-family:"FontAwesome";
background:rgba(0,0,0,0.2) none repeat scroll 0 0;
position:absolute;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-right:1px solid #fff;
top:0;
bottom:0;
left:0;
padding:2px 4px 0px 3px;
min-width:20px;
font-size:100%;
text-align:center;
}
.rank:before{
content:" ";
position:absolute;
right:0;
top:0;
height:24px;
width:38px;
background:rgba(0,0,0,0.2);
-webkit-clip-path:polygon(61% 0, 100% 0%, 100% 100%, 45% 100%);
clip-path:polygon(61% 0, 100% 0%, 100% 100%, 45% 100%)
}
.rank{
max-width:135px;
padding:2px 20px;
color:#fff;
font-size:11px;
font-weight:normal;
}
.rank:before{
height:29px;
}}
Admin KP - Temalar & Şablonlar - Şablonlar - Kullandığınız Tema - Gruplandırılmış Şablonlar - Headerinclude şablonuna giriyoruz, {$stylesheets} kodunun üzerine aşağıdaki kodları ekliyoruz.
Kod:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Admin KP - Temalar & Şablonlar - Şablonlar - Sitenizde kullandığınız temanın şablonlarına tıklayın ve ardından postbit şablonlarına girin. Postbit şablonlarına girdikten sonra postbit_groupimage şablonunda aşağıdaki kodu aratınız.
Kod:
<img src="{$usergroup['image']}" alt="{$usergroup['title']}" title="{$usergroup['title']}" />
Yukarıdaki kodu silip aşağıdaki kodu yerine ekleyiniz.
Kod:
{$usergroup['image']}
Admin KP - Üye & Gruplar - Hangi grubun rank-rütbe sistemini değiştirmek istiyorsanız o gruba girin ve grup resmi yerine aşağıdaki kodu ekleyiniz.
Kod:
<div class="rank" style="background:#2980b9;"><span class="before"></span><strong>Webmaster</strong></></div>
Önizlemek için aşağıdaki linke tıklayınız.
https://codepen.io/holigan/pen/WKJagB
Rank-rütbe sistemini çoğaltmak için kullanıcı grup resmindeki kodda bulunan background rengini değiştirmeniz yeterlidir. :D

Coder By: #Captain.