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.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» Problema com assinatura. Fórum não exibe!
Hoje à(s) 8:42 por Milo Mello

» Visualização dos "Usuários online"
Hoje à(s) 4:34 por MarcosSchultz

» Setar rank automático
Hoje à(s) 4:19 por Cream

» [Pedido] Banner
Hoje à(s) 4:11 por -xGabriel..

» Botões de ação
Hoje à(s) 4:01 por iScroll

» Aparência do fórum
Hoje à(s) 2:56 por Cream

» Botão com ícones do font awesome
Hoje à(s) 2:41 por Cream

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
Cream
 
while
 
Holkis
 
Shek
 
-xGabriel..
 
Nean
 
iScroll
 
Mr.Probz
 
Sennior
 
Cepheus
 

Quem está conectado
68 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 68 Visitantes :: 2 Motores de busca

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15: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 - 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: 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 - 17:12, editado 1 vez(es)

YouTube3
Usuário destaque

Masculino
Inscrito dia : 04/01/2015
Mensagens : 776
Pontos Ativos : 1741

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Rank em CSS

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

Boas @YouTube3!

Teria o link onde viu tal rank?

Abraço.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4954
Pontos Ativos : 7064

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

Resolvido Re: Rank em CSS

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

Olá! Fraise Está aqui http://brasilplayfreedomofc.forumeiros.com/

YouTube3
Usuário destaque

Masculino
Inscrito dia : 04/01/2015
Mensagens : 776
Pontos Ativos : 1741

http://Ajuda.Forumeiros.com

Resolvido Re: Rank em CSS

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


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2496
Pontos Ativos : 3639

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

Resolvido Re: Rank em CSS

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

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

YouTube3
Usuário destaque

Masculino
Inscrito dia : 04/01/2015
Mensagens : 776
Pontos Ativos : 1741

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Rank em CSS

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


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2496
Pontos Ativos : 3639

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

Resolvido Re: Rank em CSS

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

YouTube3
Usuário destaque

Masculino
Inscrito dia : 04/01/2015
Mensagens : 776
Pontos Ativos : 1741

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Rank em CSS

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


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2496
Pontos Ativos : 3639

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

Resolvido Re: Rank em CSS

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

Resolvido obrigado while Muito feliz

YouTube3
Usuário destaque

Masculino
Inscrito dia : 04/01/2015
Mensagens : 776
Pontos Ativos : 1741

http://Ajuda.Forumeiros.com

Resolvido Re: Rank em CSS

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


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2496
Pontos Ativos : 3639

http://www.ajuda.forumeiros.com https://www.facebook.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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5