1 [PHPBB 3] Widgets Qui Jul 26, 2012 8:25 am
Admin
Bom galera, vou fazer meu primeiro tutorial de Programação, que usaremos CSS.
Bom, o tutorial será sobre os Widget's do fórum.
Então, primeiramente você deve saber qual é a classe do Widgets, que é .module.
Então, aqui está o widget's sem nenhum efeito.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E aqui está ele pronto no final do tutorial.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Bom, então primeiro vamos arredondar as bordas.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora vamos botar a cor na borda, que usei a cor preta.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E agora vamos mudar a cor do fundo, que mudei para branco.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora vamos alinhar o texto dentro do widget.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E a parte final, vamos colocar uma sombra na borda.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Então é isso, desculpem pelas imagens " ruins " porque fiz em um computador que não tem Photoshop.
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.
Bom, o tutorial será sobre os Widget's do fórum.
Então, primeiramente você deve saber qual é a classe do Widgets, que é .module.
Então, aqui está o widget's sem nenhum efeito.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E aqui está ele pronto no final do tutorial.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Bom, então primeiro vamos arredondar as bordas.
- Código:
.module {
border-radius: 10px 0px 10px 0px;
}
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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;
}
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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;
}
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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;
}
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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;
}
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Então é isso, desculpem pelas imagens " ruins " porque fiz em um computador que não tem Photoshop.
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.
Última edição por Firenando em Sex Ago 10, 2012 6:22 pm, editado 3 vez(es)