Rank em CSS

• Descrição:

Olá, gostaria de saber como eu faço para colocar os ranks igual ao do fórum todos em CSS. Grato!!!

• Informações:

Fórum:	[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]	Versão:	PUNBB
Tipo:	Pedido de código	Tags:

Veja: http://www.bestskins.net/t4363-tutorial-dicas-para-fazer-seus-ranks-em-css

Amigo não queria com fundo igual ao tuto do grande waghcwb, queria igual ao do Bestskin se for possível.

Olá veja se está do seu gosto d3v4st




Adicionar no seu CSS:
*Lembrando se você adicionar algum css de rank antes retira para não  ocorre um bug e tambem faça o bacukp do seu CSS!


Este codigo e o efeito que o sr deseja não sei se está do seu gosto , ele tem a função de aplicar o efeito em todo rank como diz o tutorial do waghcwb.Link do Tutorial dele.

Código:

.rank {
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -webkit-user-select: none;
  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;
  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;
  color: #fff;
  cursor: default;
  font-family: Arial,sans-serif;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  margin: 5px auto;
  padding: 3px;
  text-align: center;
  text-shadow: #000 1px 1px 0;
  user-select: none;
  width: 110px;
}

Esse codigo abaixo você adicionará em baixo do outro no CSS , esse tem como função aplicar a cor do rank!

Código:

.rank.mod {
  background-color: #1D38CC!important;
}

*Como editar ?


.rank.mod { = Nome do rank que será setado no codigo abaixo. Sempre você deixar o ".rank" mudar so o ".mod" para o nome do rank, ex: ".adm" ".des"!

background-color: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]!important; = Cor do rank , você deverá editar so á Cor Hex ([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]).


Agora você vai em :

Painel de Controle > Usuários & Grupos > Ranks > Administração dos ranks ,e adionar o rank de acordo com o codigo abaixo.

Código:

<div class="rank mod">Moderador</div>

"rank mod" = Irá mudar só o "rank mod" de acordo com que você colocou no css. Ex o meu foi .rank.mod então vai ser "rank mod".
Moderador = Nome que você quer que aparecer no rank.






Espero ter ajudado até mas.

Vlw Bruno_Michel só estou com dificuldade em Editar se vc puder esclarecer um pouco mais, já que a tempos estou fora da forumeiros.

Coloquei assim no CSS.

Código:

.rank {
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      -webkit-user-select: none;
      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;
      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;
      color: #fff;
      cursor: default;
      font-family: Arial,sans-serif;
      font-size: 12px;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      margin: 5px auto;
      padding: 3px;
      text-align: center;
      text-shadow: #000 1px 1px 0;
      user-select: none;
      width: 110px;
    }
    .rank.administrador {
      background-color: #ff0000!important;
    }
    .rank.membro {
      background-color: #1D38CC!important;
    }

Mais só aparece a cor no Membro no administrador fica apenas branco.

Então essa parte aqui e do efeito que você pediu :

Código:

.rank {
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      -webkit-user-select: none;
      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;
      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;
      color: #fff;
      cursor: default;
      font-family: Arial,sans-serif;
      font-size: 12px;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      margin: 5px auto;
      padding: 3px;
      text-align: center;
      text-shadow: #000 1px 1px 0;
      user-select: none;
      width: 110px;
    }

**IMPORTANTE : Eu esqueci de cita que quando você bota um cor exata igual do nick o rank não aparecer o efeito , então colocar a mesma cor porem mas forte so um pouco.


Em questão dos ranks branco pelo teste que fiz aqui e por causa do nome do rank : Ex

O seu ta assim : 
.rank.administrador

.rank.membro



Para evitar esses bugs coloque so as iniciais da palavra :
.rank.adm 
.rank.mbr


Teste agora para ver se tenha resultados .

Resolvido, pode fechar ^^

tem como oferecer prints dessa CCS de rank ?