Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Bug pelo slide
Hoje à(s) 19:41 por Luiz

» Script de Suporte
Hoje à(s) 19:38 por Luiz

» Status do servidor
Hoje à(s) 19:31 por ranzatti

» Ranks para meu Fórum
Hoje à(s) 19:03 por Holkis

» Banner para meu fórum
Hoje à(s) 18:27 por Holkis

» Slides bugado
Hoje à(s) 18:10 por Luiz

» [Ajuda] HTML & CSS
Hoje à(s) 17:30 por Luiz

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Ketholy123
 
Kyo Panda
 
iScroll
 
xDominiC_.
 
Holkis
 
Shek
 
GutaUKP
 
dudha
 
Railison Ramon
 

Quem está conectado
210 usuários online :: 9 usuários cadastrados, 1 Invisível e 200 Visitantes :: 2 Motores de busca

DustyRhodes, Heikki, Holkis, iScroll, Ketholy123, Loadder, Luiz, ranzatti, xDominiC_.

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 12:05

Rank em CSS

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

Resolvido Rank em CSS

Mensagem por YouTube3 em Sab 25 Jun 2016 - 0: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: http://i.imgur.com/VB4M1NX.png
Eu gostaria de um rank neste estilo: http://i.imgur.com/1jbVQ6I.jpg


Última edição por YouTube3 em Sab 25 Jun 2016 - 13:12, editado 1 vez(es)
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

Ver perfil do usuário http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Rank em CSS

Mensagem por Fraise em Sab 25 Jun 2016 - 1:30

Boas @YouTube3!

Teria o link onde viu tal rank?

Abraço.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Rank em CSS

Mensagem por YouTube3 em Sab 25 Jun 2016 - 10:10

avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

Ver perfil do usuário http://Ajuda.Forumeiros.com

Resolvido Re: Rank em CSS

Mensagem por while em Sab 25 Jun 2016 - 12: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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Rank em CSS

Mensagem por YouTube3 em Sab 25 Jun 2016 - 12:26

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

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

Ver perfil do usuário http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Rank em CSS

Mensagem por while em Sab 25 Jun 2016 - 12: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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Rank em CSS

Mensagem por YouTube3 em Sab 25 Jun 2016 - 12: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: http://i.imgur.com/UYxgNmA.jpg
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

Ver perfil do usuário http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Rank em CSS

Mensagem por while em Sab 25 Jun 2016 - 13: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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Rank em CSS

Mensagem por YouTube3 em Sab 25 Jun 2016 - 13:11

Resolvido obrigado while Muito feliz
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

Ver perfil do usuário http://Ajuda.Forumeiros.com

Resolvido Re: Rank em CSS

Mensagem por while em Sab 25 Jun 2016 - 13: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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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