Staffer Group BR™

Fórum interativo totalmente gratuito!


 VisualizaçõesPermissão deste fórum:
Não podes responder a tópicos


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

#1
 'Fusion

'Fusion
Membro
[Tutorial] Personalizando a Borda dos Widgets Tutori10  [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.

[Tutorial] Personalizando a Borda dos Widgets 8sNkb

E aqui está ele pronto no final do tutorial.

[Tutorial] Personalizando a Borda dos Widgets VZZXV

Bom, então primeiro vamos arredondar as bordas.

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

[Tutorial] Personalizando a Borda dos Widgets AIDet

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;
}

[Tutorial] Personalizando a Borda dos Widgets Djddh

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;
}

[Tutorial] Personalizando a Borda dos Widgets FUeSX

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;
}

[Tutorial] Personalizando a Borda dos Widgets 51fJS

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;
}

[Tutorial] Personalizando a Borda dos Widgets VZZXV

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.


[Tutorial] Personalizando a Borda dos Widgets Images11 Endereço de Contato: samuca_akira@hotmail.com

[Tutorial] Personalizando a Borda dos Widgets Downlo10 Link, Site ou Forum: http://weescheats.forumeiros.com/

Desenvolvido por Firenando | Anônimo
Editado e Postado por Copyright® 2012 Staffer Group BR™

#2
 D'Leandro™

D'Leandro™
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.

#3
 'Fusion

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

#4
 Bookmarlucas654

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

LEMBRETE: O código é funcional com PunBB, menos a borda [Tutorial] Personalizando a Borda dos Widgets 3601747093

#5
 'Fusion

'Fusion
Membro
de nada se puder agradece ae +

#6
 D'Leandro™

D'Leandro™
Fundador
Para mudar a borda em PunBB basta mudar a classe para .module.main

#7
 Bookmarlucas654

Bookmarlucas654
Membro
Agora sim, funcionou direitinho. Obrigado [Tutorial] Personalizando a Borda dos Widgets 3822388818

#8
 'Fusion

'Fusion
Membro
Em breve estarei postando novos tutoriais para voces

#9
 [F]lames

[F]lames
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.

#10
 'Fusion

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

#11
 TiagoDJ-7.0

TiagoDJ-7.0
Membro
vou teste agora

#12
 Gmtp

Gmtp
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

#13
 D'Leandro™

D'Leandro™
Fundador
Conteúdo Atualizado;
Este conteúdo foi atualizado pela moderação!

#14
 ®'Martins

®'Martins
Membro
estou necessitando deste tutorial pois estou dando uma arrumada em meu forum!

Obrigado por compartilhar!

#15
 fojogo

fojogo
Membro
Muito bom adorei

#16
 houdini

houdini
Membro
Combina com o que estava procurando para o meu fórum, queria saber se tem como colocar uma imagem de fundo?

#17
 D'Leandro™

D'Leandro™
Fundador
Olá!

Sim!

Até mais.

#18
 Gmtp

Gmtp
Membro
Olá, houdiniGru.

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

Até mais.

#19
 Mr.GamingPT

Mr.GamingPT
Membro
oi

#20
 Master Publicitario

Master Publicitario
Membro
Muito bom!

#21
 Conteúdo patrocinado