SP-Design

Seja bem-vindo ao SP-Design. Aqui, lhe ajudaremos com o tema de seu Fórum/Blog/site, vocês poderão solicitar e fornecer ajuda a outros usuários sobre o design e estrutura, tanto grafica, tanto em css e templantes.


Regulamento e informações:      
Equipe SP-Design
Regras do fórum
Como entrar na equipe Staff
Seções do fórum:
Pedidos Graficos
Pedidos de Códigos
SP-Design e você
Antes de postar uma dúvida:
Função busca
Perguntas e respostas frequêntes
Tutoriais, dicas e astúcias
Feliz ano novo para você!
Leia a carta de boas festas da equipe SPD.
Área Vip, os códigos mais inovadores
Obtenha os códigos mais inovadores de nosso fórum, atraves de pontos de Cash.
Leia as Regras do SP-Design
Acabou de chegar? Para se "enturmar" rapidamente leia as regras desse fórum.
Tutoriais e Dicas
Veja aqui nossos tutoriais inéditos, e muitos outros tutoriais sobre Design.
Publique no SPublicidade
Publique, peça opinião de pessoas experientes, divulgue o seu trabalho com o SPublicidade
Modifique o visual do seu fórum
Dúvidas sobre códigos HTML, CSS, BBCode e JQuery. Também, poderá tirar dúvidas sobre Templantes.
Faça Pedidos Gráficos para seu fórum
Este é um serviço gratuito para customização e criação de banners, logos, avatares, ícones...
Novo Administrador na comunidade
Pro Administradores adicionam novo administrador na equipe SPD.

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

avatar

Administrador
Desenvolvedor Web

em Dom 09 Dez 2012, 2:36 pm



[TUTORIAL] Personalizando os ranks

Olá pessoal, neste tutorial, irei ensinar a como personalizar os ranks do estilo do RMBR, além desse estilo, irei expor vários outros estilos para ranks também.

CRÉDITOS!
Todos os créditos desse tutorial a:
www.rmbr.forumeiros.com e www.spdesign.ativoforum.com
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Personalizando os ranks


- Criando um novo rank...
Vá em:

Painel > Usuarios e Grupos > Ranks > Administração dos ranks >> Adicionar Novo Rank
Título do Rank : Dê qualquer título ao rank (ex: Helper).
Rank Especial : Nesse caso vamos marcar sim, se colocarmos não, automaticamente ele iria para todos os membros.
Número mínimo de mensagens : (Ligado a: Rank especial - Não) Nesse caso ele ativaria o rank ao membro se ele tivesse o numero de mensagens especificado.
URL da imagem do Rank (http://URL_DE_L'IMAGE.gif) : Url da imagem do rank, nesse cso não iremos usar esta área.


- Adicionando classes para ligar no rank...
Vá em:

Painel > Visualização > Imagens e Cores > Cores >> Folha de estilo CSS
Para criar uma classe, primeiramente é nescessário você ter uma noção básica em css, como comandar os eventos, etc.

Vamos criar a nossa primeira classe, a que eu vou escolher é "h" (escolha as iniciais do nome do rank, para ficar menor na hora de adiciona-la e para não esquecer).

Como estamos referindo a textos e não tabelas, o código na folha ficaria assim:

Código:

.h{
ATRIBUTOS CSS
}

- Adicionando essa classe ao rank...
Devemos ir ao rank que nós criamos,e em "Título do Rank :" nós iremos adicionar o seguinte código:

Código:

<div class="h">NOME DO RANK</div>
Vamos entender as partes do código:

DIV: Tag HTML.
CLASS: Inicia a classe css que nós criamos.
H: Classe CSS que criamos.
NOME DO RANK: Aqui você irá colocar o nome do rank (ex: Helper).


- Estilos css para o rank...
Os códigos abaixo, vocês iraão colocar dentro da parte destacada:


.h{
ATRIBUTOS CSS
}

Estilo 1 (RMBR):
CLIQUE AQUI PARA ABRIR:
Código:
color:#F29A16;text-shadow:2px 0.5px 2px #B5986D
Exemplo:
Helper

Estilo 2
CLIQUE AQUI PARA ABRIR:
Código:
width:auto;padding:3px;border:1px solid grey; border-radius:3px;color:#F29A16;text-shadow:2px 0.5px 2px #B5986D
Exemplo:
Helper

Estilo 3
CLIQUE AQUI PARA ABRIR:
Código:
background:F7F7F7;box-shadow:0px 0px 5px grey inset;width:auto;padding:3px;border:1px solid grey; border-radius:3px;color:#F29A16;text-shadow:2px 0.5px 2px #B5986D
Exemplo:
Helper

Esses são alguns estilos que eu disponibilizei para facilitar suas vidas, ms é claro que vc tendo um pouco de conhecimento de css, vc pode fazer seus própios estilos.

  • Funciona em quais versões?
    Todas




© RMBR & SPDesign


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Personalizando os ranks


Staff SPD

Olá Convidado, bem vindo ao SP-Design
Aconselhamos que fique atendo a esses detalhes.
Respeite as regras e conheça a equipe.
Faça seus pedidos na Área Design.
Não pratique o Flood
Não peça suporte por MP
Pedidos de Códigos
SP-Design
avatar

sou nível 12

em Qua 20 Fev 2013, 7:36 am

esse e o melhor tutorial de hoje
nota 10

avatar

sou nível 5

em Qui 18 Abr 2013, 4:30 pm

parabens


Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Você não está conectado. Conecte-se ou registre-se



Permissão deste fórum:
Você não pode responder aos tópicos neste fórum

 

Atualizado com e-referrer
Publicidade | SEJA NOSSO PARCEIRO
Naruto Rpg FutureLes power infoMaster ExpShiftactifThe forum of Codes

2012 © SP-Design - Ajuda na criação de códigos e na aparência de seu Fórum™ - Design de Cyllaz - Todos os direitos reservados ®