Gerir função Rank em CSS

Olá, queria adicionar ranks por método  de CSS.
Por favor me expliquem DETALHADAMENTE.
Me falaram um código mais não entendi detalhadamente oque deve-se fazer para adicionar. (irei enviar e vocês me expliquem oque deve-se fazer):

Código:

<div class="rank admin">
 <span class="stars"></span>
 Administrador
</div>
<div class="rank co-admin">
 <span class="stars"></span>
 Co-Admin
</div>
<div class="rank mod">
 <span class="stars"></span>
 Moderador
</div>

 

Código:

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

.rank{
   background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,.1)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.1)),color-stop(0.75,rgba(255,255,255,.1)),color-stop(0.75,transparent),to(transparent));
   background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.1)25%,transparent 25%,transparent 50%,rgba(255,255,255,.1)50%,rgba(255,255,255,.1)75%,transparent 75%,transparent);
   background-image: -moz-linear-gradient(45deg,rgba(255,255,255,.1)25%,transparent 25%,transparent 50%,rgba(255,255,255,.1)50%,rgba(255,255,255,.1)75%,transparent 75%,transparent);
   background-image: linear-gradient(45deg,rgba(255,255,255,.1)25%,transparent 25%,transparent 50%,rgba(255,255,255,.1)50%,rgba(255,255,255,.1)75%,transparent 75%,transparent);
  background-size: 10px 10px;
 padding: 3px;
 width: 150px;
 margin: 5px;
 text-align: center;
 text-shadow: #000 1px 1px 0;
 color: #fff;
 border-radius: 3px;
 box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.5), rgba(0,0,0,.3) 0 1px 1px;
 font: 13px 'Open Sans', Arial, sans-serif;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
 cursor: default;
}
.stars{
 height: 16px;
 width: 31px;
 margin: 5px 0 0 3px;
 background: url('https://cdn1.iconfinder.com/data/icons/fatcow/16/star.png') repeat-x;
 background-size: 10px;
 float: left;
}
.admin{
 background-color: #ac0000;
}
.mod{
 background-color: #009;
}
.co-admin{
 background-color: #a2712b;
}
.co-admin .stars{
 width: 20px;
}
.mod .stars{
 width: 10px;
}

Olá. Tente conceber ao seguinte caminho:

Painel de Controle > Visualização > Gestão de imagens e cores > Cores > Folha de estilo CSS.

Para possíveis riscos, você pode tentar utilizar temas temporários.

Até mais.

Saudações!

Aceda à "Administração dos Ranks":
Painel de Controle Usuários & Grupos Ranks Administração dos ranks

Clique em () caso tenha um rank já criado;
Clique em () caso queira criar um novo rank;
Em "Título do Rank" ponha o código abaixo:

Código:

<span class="userAdministrador">Administrador</span>

:seta2:Coloque em "userAdministrador" o que desejar e em "Administrador" o nome do respectivo grupo.

Agora vamos ao segundo passo, que no caso é o CSS!

Aceda à "Folha de estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Lá adicione este código:

Código:

.userAdministrador {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #65a830;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 700;
margin-top: 5px;
padding: 3px 8px;
text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
}

.userAdministrador {
background: #881418;
}

Troque o "userAdministrador" conforme o que colocou no código corresponde ao "Título do Rank".

Feito isto, salve!

Até mais.