Trocar imagens de rank por texto com fundo de cor

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

Resolvido Trocar imagens de rank por texto com fundo de cor

Mensagem por #d0C em 22/09/13, 04:07 pm

Qual é minha questão:
Olá a todos.
Mais uma vez tenho uma duvida para a personalização de meu novo forum!

Neste caso, como todos sabem, maioria dos fóruns nos ranks utilizam imagens, eu queria alterar isso para um texto simples com um fundo com cor que eu mesmo escolho.

EXEMPLO: 


Cumprimentos.

Endereço do meu fórum:
http://corrente-grafica.forumeiro.com

Versão do fórum:
PUNBB


Última edição por CorrenteGráfica em 24/09/13, 03:28 am, editado 1 vez(es)
avatar

#d0C
Membro do Fórum

Masculino
Inscrito dia : 13/09/2013
Mensagens : 1058
Pontos Ativos : 1452

Ver perfil do usuário http://vortextips.wix.com/vortex

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por Tofu em 22/09/13, 04:23 pm

Poderia ativar o rank e nos dar um link onde ele possa estar?

Grato.

Geam.

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por MateusA em 23/09/13, 10:38 am

Olá,

Veja o tutorial dentro do spoiler:
Spoiler:


Rank estilo CSS

Neste tutorial, vamos lhe explicar, á como fazer um rank somente com CSS.

- Título do Para criar um rank, aceda a:

Painel de Controle -> Usuários & Grupos -> Ranks -> Administração dos Ranks -> Clique em Editar em algum rank!



Seta Teremos de trocar o nome do rank por isso:
Código:
        <span class="Admin">Administrador</span>
No código acima, devemos alterar o nome Administrador pelo nome do seu rank!




- Aplicando CSS:
Para isto você terá de ter um pouco de conhecimento com a folha de estilos CSS, aceda a:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> Folha de Estilo CSS


E aplique o seguinte código:
Código:
        .admin{
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #65a830;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        margin-top: 5px;
        padding: 3px 8px;
        text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
        }

        .admin {
        background: #881418;
        }



© Programando

Até.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por #d0C em 23/09/13, 01:08 pm

Sem qualquer alteração amigo Crazy. Chorando ou muito tr
avatar

#d0C
Membro do Fórum

Masculino
Inscrito dia : 13/09/2013
Mensagens : 1058
Pontos Ativos : 1452

Ver perfil do usuário http://vortextips.wix.com/vortex

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por Tofu em 23/09/13, 04:24 pm

Meu caro, não pense que alguém irá registrar para prestar suporte.

Por favor, desbloqueie o fórum, e nos forneça um link onde o rank aparece.
Assim poderemos ajudar Feliz

Geam.

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por #d0C em 23/09/13, 04:40 pm

Como assim amigo?
Não percebi.
Está dizendo que não consegue ver o post?

Tente este: Post Exemplo
avatar

#d0C
Membro do Fórum

Masculino
Inscrito dia : 13/09/2013
Mensagens : 1058
Pontos Ativos : 1452

Ver perfil do usuário http://vortextips.wix.com/vortex

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por Tofu em 23/09/13, 05:00 pm

Não estou vendo nenhum rank :/

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por Gilgamesh em 23/09/13, 05:51 pm

Olá amigo,

sugiro que adquira o Photoshop e solicite um PSD de fácil customização.

Boa sorte. Piscada 
avatar

Gilgamesh
Usuário experiente

Masculino
Inscrito dia : 24/08/2013
Mensagens : 2976
Pontos Ativos : 3970

Ver perfil do usuário http://artelib.forumeiros.com/

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por Sennior em 24/09/13, 01:46 am

Saudações!

Aceda à "Administração dos Ranks":
Painel de Controle Seta Usuários & Grupos Seta Ranks Seta Administração dos ranks


:seta2: Clique em (Editar) caso tenha um rank já criado;
:seta2: Clique em (Adicionar) caso queira criar um novo rank;
:seta2: Em "Título do Rank" ponha o código abaixo:

Código:
<span class="userAdministrador">Administrador</span>
:seta2:Coloque em "userAdministrador" o que desejar e em "Administrador" o nome do respectivo grupo.

Agora vamos ao segundo passo, que no caso é o CSS!

Aceda à "Folha de estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores :seta Folha de estilo CSS


Lá adicione este código:
Código:
.userAdministrador {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #65a830;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 700;
margin-top: 5px;
padding: 3px 8px;
text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
}

.userAdministrador {
background: #881418;
}

:seta2:Troque o "userAdministrador" conforme o que colocou no código corresponde ao "Título do Rank".

Feito isto, salve!

Até mais. Piscada
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Trocar imagens de rank por texto com fundo de cor

Mensagem por #d0C em 24/09/13, 03:28 am

Olá Sennior!
Te adoro! apaixonado Rindo 
Já funcionou como eu desejava, muito obrigado!
avatar

#d0C
Membro do Fórum

Masculino
Inscrito dia : 13/09/2013
Mensagens : 1058
Pontos Ativos : 1452

Ver perfil do usuário http://vortextips.wix.com/vortex

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