[yilmaz]

1. yoursite.ext/admincp/usergroup.php?do=modify

2. Go to edit Usergroup Manager yoursite.ext/admincp/usergroup.php?do=edit&usergroupid=6

3.Use this in Username HTML Markup first input box

<span class="userBanner userBanner--Admin">

enter this in the second input box

</span>

and click the update button at the bottom
----------------------------
It's time to add css code
4. Search in Templates yoursite.ext/template.php?do=search

5. Paste this into the search box and search for additional.css

6. In the results found, click on the additional.css template to edit it in the style you used.

7. It may be empty or previously added special css codes, add this css code to the beginning or the end without breaking the code there.

.userBanner {
    font-size: 80%;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    text-align: center;
    display: inline-block;
    line-height: 1.26;
    text-decoration: none;
}
.userBanner.userBanner--Admin {
    color: #ffffff!important;
    background: #d80000;
    border: 1px none #a50000;
}

And Save.

So much
-----

Repeat if you want to make other Usergroups
Sample:
Use this for super moderator

<span class="userBanner userBanner--S_Mod">

.userBanner.userBanner--S_Mod {
    color: #ffffff!important;
    background: #008000;
    border: 1px none #004d00;
}

Note: Add the css codes at the bottom of the options.css or vbulletin.css template in mobile style