Rank em CSS Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Rank em CSS

3 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ir para baixo

Tópico resolvido Rank em CSS

Mensagem por YouTube3 25.06.16 4:03

Detalhes da questão


Endereço do fórum: http://demotd2.forumeiros.com/
Versão do fórum: PunBB

Descrição


Bom, há muitos tutoriais ensinando fazer rank em css.
Porem quero saber como faço para deixar o rank em css neste estilo.

A maioria dos ranks em css e assim: https://i.imgur.com/VB4M1NX.png
Eu gostaria de um rank neste estilo: https://i.imgur.com/1jbVQ6I.jpg


Última edição por YouTube3 em 25.06.16 17:12, editado 1 vez(es)
YouTube3
YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por Fraise 25.06.16 5:30

Boas @YouTube3!

Teria o link onde viu tal rank?

Abraço.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por YouTube3 25.06.16 14:10

YouTube3
YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por while 25.06.16 16:08

Seguinte, vamos começar do 0 ok?
Certo, retire os css que você adicionou desse tópico que passei.

Altere o nome do rank "Administrador" que estais a utilizar na sua conta "Admin" do fórum para:
<div class="rank adm"><span class="stars"></span>Owner</div>

Depois disto, vá no seu css e adicione esse código:
Código:
.rank {
    background: url(http://i.imgur.com/nmBh3WZ.png);
    border-radius: 3px;
    box-shadow: 1px 2px 11px rgba(0,0,0,0.29);
    color: #fff;
    font-family: 'Roboto Condensed'!important;
    font-size: 13px;
    font-weight: 400;
    height: 25px;
    line-height: 25px;
    margin: 10px auto 0;
    max-width: 120px;
    padding: 0;
    position: relative;
    text-shadow: 1px -1px rgba(0,0,0,0.29);
    text-transform: uppercase;
}
div.rank.adm {
            background-color: #37AD25!important;
            text-align:center;
}
.rank:before {
    border-right: 1px solid rgba(255,255,255,0.55);
    content: "BPF";
    float: left;
    margin-top: -5px;
    padding: 5px 5px 0;
}

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por YouTube3 25.06.16 16:26

Opá, botei porem o "Administrador" ta ficando em baixo do rank olhe.
print: https://i.imgur.com/NIoenh4.jpg
YouTube3
YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por while 25.06.16 16:49

Olá procure por .rank na sua folha de estilo css e ponha essa propriedade entre os { }

Código:
width:150px!important;

Ficará assim:
Código:
.rank {
    background: url(http://i.imgur.com/nmBh3WZ.png);
    border-radius: 3px;
    border-top: 1px solid rgba(0,0,0,0.15);
    box-shadow: 1px 2px 11px rgba(0,0,0,0.29);
    color: #fff;
    display: block;
    font-family: 'Roboto Condensed'!important;
    font-size: 11px!important;
    font-weight: 400;
    height: 25px;
    line-height: 25px;
    margin: 10px auto 0;
    max-width: 150px!important;
    padding: 2px 0!important;
    position: relative;
    text-shadow: 1px -1px rgba(0,0,0,0.29);
    text-transform: uppercase;
    width: 150px;
}
Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por YouTube3 25.06.16 16:58

Última coisa não sei se teria como resolver nesse mesmo tópico.
Teria como tirar aquele espaço branco abaixo do RANK onde está marcado de vermelho.
PRINT: https://i.imgur.com/UYxgNmA.jpg
YouTube3
YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por while 25.06.16 17:03

Como desejar, adicione esse código em sua folha de estilo css (no topo):
Código:
.pun .user .user-ident .user-basic-info {margin-bottom:-35px!important;}

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por YouTube3 25.06.16 17:11

Resolvido obrigado while Muito feliz
YouTube3
YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank em CSS

Mensagem por while 25.06.16 17:14

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Ir para o topo

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

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