Rank maior no CSS

2 participantes

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

Tópico resolvido Rank maior no CSS

Mensagem por weverson lopes 15.04.17 4:46

Detalhes da questão


Endereço do fórum: http://www.mdhoficial.net/
Versão do fórum: PunBB

Descrição


oi gente tudo bem? bom eu queria um rank igual a esse

nesse formato exatamente assim: https://imgur.com/a/RdEX3

eu vi nesse fórum: http://www.bestskins.net/

eu ja tenho um parecido pelo CSS mas o tamanho é pequeno da um ligue: https://imgur.com/a/WkgnQ
weverson lopes

weverson lopes
*****

Membro desde : 01/04/2017
Mensagens : 410
Pontos : 595

http://www.mdhoficial.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por weverson lopes 16.04.17 1:37

#UP
weverson lopes

weverson lopes
*****

Membro desde : 01/04/2017
Mensagens : 410
Pontos : 595

http://www.mdhoficial.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por weverson lopes 17.04.17 5:01

UP
weverson lopes

weverson lopes
*****

Membro desde : 01/04/2017
Mensagens : 410
Pontos : 595

http://www.mdhoficial.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por Kyo Panda 17.04.17 15:14

Igual não podemos fazer. Mas:

Código:
.rank span {
    padding: 5px 10px 5px 40px;
    position: relative;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

.rank span:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    border-right: 1px #fff solid;
    text-align: center;
    font-size: 16px;
    line-height: 29px;
}

.rank .membercheater:before {
    content: 'CF';
}

E adicione um desse:

Código:
.rank .membercheater:before {
    content: 'CF';
}

Para cada rank do seu fórum. o/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por weverson lopes 17.04.17 15:36

desculpa, sou lerdo, aonde eu coloco o 2 codigo? e pq é diferente dos que eu ja editei
weverson lopes

weverson lopes
*****

Membro desde : 01/04/2017
Mensagens : 410
Pontos : 595

http://www.mdhoficial.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por Kyo Panda 17.04.17 15:39

O código 2 e todas as suas variações devem ser colocados abaixo do código 1, ambos no CSS:

Código:
.rank span {
    padding: 5px 10px 5px 40px;
    position: relative;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
 
.rank span:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    border-right: 1px #fff solid;
    text-align: center;
    font-size: 16px;
    line-height: 29px;
}
 
.rank .membercheater:before {
    content: 'CF';
}

.rank .memberbacana:before {
    content: 'BC';
}

.rank .membermemer:before {
    content: 'MM';
}

.rank .memberrage:before {
    content: 'RG';
}

E assim por diante.

Eles são diferentes por que mexem em atributos diferentes dos rankings. o/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por weverson lopes 17.04.17 15:42

entendo, mas tipo, no caso eu deveria colocar um codigo no grupo de ranks ne? e se for qual codigo eu deveria colocar? desculpa é que sou novato nesse assunto.
weverson lopes

weverson lopes
*****

Membro desde : 01/04/2017
Mensagens : 410
Pontos : 595

http://www.mdhoficial.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por Kyo Panda 17.04.17 15:52

A primeira parte deve ser colocada apenas uma vez no CSS:

Código:
.rank span {
    padding: 5px 10px 5px 40px;
    position: relative;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
 
.rank span:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    border-right: 1px #fff solid;
    text-align: center;
    font-size: 16px;
    line-height: 29px;
}

Essa é igual e fará com que todos os rankings tenham um aspecto semelhante.

A segunda parte é personalizada para cada ranking, seguindo o nome que o senhor já definiu nos rankings para deixá-los com as cores personalizadas.

Por exemplo, no seu fórum existem os rankings Membro Enfurecido, Membro Ativo e Moderador Global, e estes possuem as classes memberenfurecido, memberativo e moderador. No CSS ficariam dessa forma:

Código:
.rank .memberenfurecido:before {
    content: 'EF';
}

.rank .memberativo:before {
    content: 'AT';
}

.rank .moderador:before {
    content: 'MD';
}

É só seguir os nomes que pintam os rankings no seu fórum. o/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por weverson lopes 17.04.17 16:04

Obrigadoja entendi, vlw mais uma vez e desculpa qualquer coisa.
weverson lopes

weverson lopes
*****

Membro desde : 01/04/2017
Mensagens : 410
Pontos : 595

http://www.mdhoficial.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank maior no CSS

Mensagem por Kyo Panda 17.04.17 16:58

Sem problemas. o/
rank - Rank maior no CSS Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos