Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 'Fusion

avatar
Membro
  [Tutorial] Personalizando a Borda dos Widgets

Descrição
Bom, o tutorial será sobre os Widget's do fórum. Então, primeiramente você deve saber qual é a classe do Widgets, que é ".module"

Funcionalidade: PhpBB3

Bom galera, vou fazer meu primeiro tutorial de Programação, que usaremos CSS.

Então, aqui está o widget's sem nenhum efeito.



E aqui está ele pronto no final do tutorial.



Bom, então primeiro vamos arredondar as bordas.

Código:
.module {
border-radius: 10px 0px 10px 0px;
}



Agora vamos botar a cor na borda, que usei a cor preta.

Código:
.module {
border-radius: 10px 0px 10px 0px;
border: solid 1px #000000;
}



E agora vamos mudar a cor do fundo, que mudei para branco.

Código:
.module {
border-radius: 10px 0px 10px 0px;
border: solid 1px #000000;
background-color: #FFFFFF;
}



Agora vamos alinhar o texto dentro do widget.

Código:
.module {
border-radius: 10px 0px 10px 0px;
border: solid 1px #000000;
background-color: #FFFFFF;
text-align: center;
}



E a parte final, vamos colocar uma sombra na borda.

Código:
.module {
border-radius: 10px 0px 10px 0px;
border: solid 1px #000000;
background-color: #FFFFFF;
text-align: center;
box-shadow: 0 0 3px #000000;
}



Então é isso, desculpem pelas imagens " ruins " porque fiz em um computador que não tem Photoshop.

OBS: Podem copiar este tutorial e colocar em outro fórum, mais deixe os créditos e o link do fórum.


Endereço de Contato: samuca_akira@hotmail.com

Link, Site ou Forum: http://weescheats.forumeiros.com/

Desenvolvido por Firenando | Anônimo
Editado e Postado por Copyright® 2012 Staffer Group BR™
Ver perfil do usuário samuca_akira@hotmail.com

#2
 D'Leandro™

avatar
Fundador
Pequenas modificações foram feitas, para tornar o tutorial padrão.
- Mudança de título para "Personalizando a borda dos widgets"
- Adição de prefixo [Tutorial]
- Adição de Hide coment
Aceito: Movido para o local correspondente.

Ver perfil do usuário

#3
 'Fusion

avatar
Membro
vlw em breve estarei postando mais tutoriais que acho na net.

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#4
 Bookmarlucas654

avatar
Membro
Agora sim, vai combinar exatamente com meu fórum :3
MUITO OBRIGADO!!!!

LEMBRETE: O código é funcional com PunBB, menos a borda
Ver perfil do usuário

#5
 'Fusion

avatar
Membro
de nada se puder agradece ae +

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#6
 D'Leandro™

avatar
Fundador
Para mudar a borda em PunBB basta mudar a classe para .module.main
Ver perfil do usuário

#7
 Bookmarlucas654

avatar
Membro
Agora sim, funcionou direitinho. Obrigado
Ver perfil do usuário

#8
 'Fusion

avatar
Membro
Em breve estarei postando novos tutoriais para voces

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#9
 [F]lames

avatar
Membro
Olá,

Ótimo tutorial, o resultado é lindo, e o código não é tão complexo, qualquer um consegue aplicar, isso que o torna ótimo.

Até mais.
Ver perfil do usuário

#10
 'Fusion

avatar
Membro
=D de nada em breve estarei postando novos tutoriais para vocês espero que estejam gostando Smiley

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#11
 TiagoDJ-7.0

avatar
Membro
vou teste agora
Ver perfil do usuário

#12
 Gmtp

avatar
Membro
Olá

Estou confuso....

@'Fusion escreveu:PS: Eu não fiz o codigo. Autor Desconhecido.

Créditos: Firenando.
OBS: Podem copiar este tutorial e colocar em outro fórum, mais deixe os créditos e o link do fórum.

Até mais

Assinatura:
Olá Convidado Antes De Tudo, Bem Vindo Ao Staffer Group BR™️ !!

Convidado Você Esta No Fórum Deis de E Você Tem 3 Mensagens !
o Fórum Tem 11510 Mensagens Com 890 Membros Registrado. VAMO AJUDA A DIVULGA AE !
Ver perfil do usuário

#13
 D'Leandro™

avatar
Fundador
Conteúdo Atualizado;
Este conteúdo foi atualizado pela moderação!
Ver perfil do usuário

#14
 ®'Martins

avatar
Membro
estou necessitando deste tutorial pois estou dando uma arrumada em meu forum!

Obrigado por compartilhar!
Ver perfil do usuário

#15
 fojogo

avatar
Membro
Muito bom adorei
Ver perfil do usuário

#16
 houdini

avatar
Membro
Combina com o que estava procurando para o meu fórum, queria saber se tem como colocar uma imagem de fundo?
Ver perfil do usuário

#17
 D'Leandro™

avatar
Fundador
Olá!

Sim!

Até mais.
Ver perfil do usuário

#18
 Gmtp

avatar
Membro
Olá, houdiniGru.

Caso queira por peça na área de suporte.

Até mais.
Ver perfil do usuário

#19
 Mr.GamingPT

avatar
Membro
oi
Ver perfil do usuário

#20
 Master Publicitario

avatar
Membro
Muito bom!
Ver perfil do usuário

#21
 Conteúdo patrocinado