Ranks personalizados com puro CSS
4 participantes
Página 1 de 1
Ranks personalizados com puro CSS
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
Re: Ranks personalizados com puro CSS
Excelente amigo! Sem requisições, sem pesos de conexão e o melhor: Sem scripts!!!
5 * from me,
JS
5 * from me,
JS
Re: Ranks personalizados com puro CSS
Obrigado amigos, após finalizar alguns projetos para meu fórum vou postar mais alguns conteúdos legais
Re: Ranks personalizados com puro CSS
Muito útil sim, obrigado por compartilhar conosco!
CSS bem limpo!
CSS bem limpo!
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos