Gerir função Rank em CSS

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Gerir função Rank em CSS

Mensagem por -SNouT em 11/08/14, 09:52 pm

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;
}
avatar

-SNouT
Nível 2

Masculino
Inscrito dia : 08/08/2014
Mensagens : 8
Pontos Ativos : 19

Ver perfil do usuário http://flux-pixel.forumeiros.com

Resolvido Re: Gerir função Rank em CSS

Mensagem por viniliff em 11/08/14, 10:41 pm

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.
avatar

viniliff
Membro do Fórum

Masculino
Inscrito dia : 04/06/2014
Mensagens : 1710
Pontos Ativos : 2079

Ver perfil do usuário http://publieiros.forumeiros.com https://twitter.com/ViniliffOficial

Resolvido Re: Gerir função Rank em CSS

Mensagem por Sennior em 12/08/14, 11:25 am

Saudações!

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


:seta2: Clique em (Editar) caso tenha um rank já criado;
:seta2: Clique em (Adicionar) caso queira criar um novo rank;
:seta2: 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 Seta Visualização Seta Imagens e Cores Seta Cores Seta 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;
}

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

Feito isto, salve!

Até mais. Piscada
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum