Olá amigos, hoje trago um tutorial de como adicionar e personalizar ranks personalizados ao seu fórum, com puro CSS
O efeito alcançado deverá ser semelhante a este aqui
Porém ao invés de imagens, você usara HTML e CSS...
Vá em Usuários e Grupos → Ranks → Administração dos Ranks
E crie ou edite um novo rank;
No nome do rank adicione o seguinte HTML
Agora adicione isso no seu CSS
Vamos criar um rank de moderador também
E agora isso no CSS
Espero que seja útil a alguém
O efeito alcançado deverá ser semelhante a este aqui
Porém ao invés de imagens, você usara HTML e CSS...
Vá em Usuários e Grupos → Ranks → Administração dos Ranks
E crie ou edite um novo rank;
No nome do rank adicione o seguinte HTML
- Código:
<div id="rank" class="admin"><div id="image"></div><div id="text">Administrador</div></div>
Agora adicione isso no seu CSS
- Código:
/*
// Ranks administrativos personalizados
// Autor: Wagner'
// Acesse: www.jscript.forumeiros.com
// Para mais informações!
// Favor não retirar os créditos;
*/
/*default*/
#rank{
background-image: url('http://i.imgur.com/6KHiROK.png') repeat-x;
padding: 7px;
border-radius: 3px;
color: #fff;
font: 13px "Trebuchet MS";
}
#image{
background: url('https://cdn1.iconfinder.com/data/icons/PixeloPhilia_2/PNG/medal.png') no-repeat;
width: 32px;
height: 32px;
float: left;
}
#text{
text-align: center;
cursor: default;
text-shadow: rgba(0,0,0,.5) 0 1px 0;
}
/*cores*/
.admin{
background-color: #d00000;
box-shadow: 0 1px 0 0 #ED0000 inset, 0 2px 3px rgba(0, 0, 0, 0.2);
border:1px solid #780909;
}
Vamos criar um rank de moderador também
- Código:
<div id="rank" class="mod"><div id="image"></div><div id="text">Moderador</div></div>
E agora isso no CSS
- Código:
.mod{
background-color: #008bd1;
box-shadow: 0 1px 0 0 #009eed inset, 0 2px 3px rgba(0, 0, 0, 0.2);
border:1px solid #085378;
}
Espero que seja útil a alguém