Login
Registrar![[Tutorial]Personalizando WIDGET com CSS Icon_quicknav](https://2img.net/h/www.ipbforumskins.com/skindemo/public/style_images/overlayr34x/icon_quicknav.png){kind=icon}
Chongas
Reputação : 1
Inscrito dia : 25/04/2013
Mensagens : 3
Money : 8 ![[Tutorial]Personalizando WIDGET com CSS Colors](https://2img.net/h/cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/colors.png){kind=icon} | Personalizando Widgets com CSS. |
Versões : PUNBB & PHPBB
PunBB
Neste Tutorial,Iremos aprender a personalizar o cabeçalho e o conteúdo do widget utilizando Códigos CSS,Para Personalizar Fundo,Fonte e Etc,Ainda irei adicionar outras versões (caso queiram);
Vocês Podem Personalizar e Deixar ao seu Gosto.
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
![[Tutorial]Personalizando WIDGET com CSS 1114](https://i.servimg.com/u/f71/11/61/24/05/1114.gif)
1 - Personalizando Cabeçalho do Widget
Primeiramente,Estarei Disponibilizando as Imagens de Widgets Prontos com as Explicações de Cada Código.
Cabeçalho Sem Imagem De Fundo
![[Tutorial]Personalizando WIDGET com CSS VNSBE](https://i.imgur.com/VNSBE.png)
- Spoiler:
- Código:
.main .main-head {
background-color: #177468;
font-family: Arial;
font-size: 16px;
text-shadow: 0px 0px 3px #10CEA8;
color: whiteSmoke;
border-radius: 14px 14px 0px 0px;
text-align: center;
}
>Personalizado o Código
.main .main-head {
background-color: #CORDEFUNDO;
font-family: FONTE;
font-size: TAMANHOpx;
text-shadow: 0px 0px 3px #COR;
color: #CORDOTEXTO;
border-radius: 14px 14px 0px 0px;
text-align: (center,left ou right);
}
Cabeçalho Com Imagem De Fundo
![[Tutorial]Personalizando WIDGET com CSS K6ek1](https://i.imgur.com/k6ek1.png)
- Spoiler:
- Código:
.main .main-head {
background-image: url(LINKDAIMAGEM);
font-family: Century Gothic;
font-size: 18px;
text-shadow: 0px 0px 4px black;
color: white;
border-radius: 14px 14px 0px 0px;
text-align: center;
background-position-x: 236px;
background-position-y: -113px;
}
>Personalizado o Código
.main .main-head {
background-image: url(LINKDAIMAGEM);
font-family: FONTE;
font-size: TAMANHODAFONTEpx;
text-shadow: 0px 0px 4px #COR;
color: #CORDOTEXTO;
border-radius: 14px 14px 0px 0px;
text-align: (center,left ou right);
background-position-x: 236px ( < Posição : Quanto maior,mas para o lado );
background-position-y: -113px ( < Posição : Quanto maior,mas para baixo );
}
2 - Personalizando Conteúdo do Widget
Conteúdo sem Imagem De Fundo
![[Tutorial]Personalizando WIDGET com CSS W2HSJ](https://i.imgur.com/w2HSJ.png)
- Spoiler:
- Código:
.module .main-content {
padding: 1em;
background-color: #00B8FF;
border-radius: 0px 0px 20px 20px;
border: 2px solid #0096B3;
}
>Personalizado o Código
.module .main-content {
padding: 1em;
background-color: #CORDEFUNDO;
border-radius: 0px 0px 20px 20px;
border: 2px solid #CORDABORDA;
}
Conteúdo Com Imagem De Fundo
![[Tutorial]Personalizando WIDGET com CSS YMocT](https://i.imgur.com/yMocT.png)
- Spoiler:
- Código:
.module .main-content {
padding: 1em;
background-image: url(LINKDAIMAGEM);
border-radius: 0px 0px 20px 20px;
border: 2px solid #0096B3;
}
>Personalizado o Código
.module .main-content {
padding: 1em;
background-image: url(LINKDAIMAGEM);
border-radius: 0px 0px 20px 20px;
border: 2px solid #CORDABORDA;
}
Espero que eu possa ter ajudado vocês,Mais Versões serão Adicionadas !
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Personalizando Widgets com CSS
--> Perguntas e Respostas <--
Personalizando Widgets com CSS
Personalizando Widgets com CSS
1 - Posso Juntar os Códigos de "Cabeçalho" e "Conteúdo" na Minha Folha CSS ?
Sim,Deste Jeito irá obter um efeito duplo e bonito.
2 - Posso Alterar/Adicionar Outras Classes CSS?
Sim,Como desejar..
PhpBB3:
* Imagens do Resultado foram tiradas do Tutorial para PunBB,O Resultado pode ficar parecido.
Neste Tutorial,Iremos aprender a personalizar o cabeçalho e o conteúdo do widget utilizando Códigos CSS,Para Personalizar Fundo,Fonte e Etc,Ainda irei adicionar outras versões;
Vocês Podem Personalizar e Deixar ao seu Gosto.
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
1 - Personalizando Cabeçalho do Widget
Primeiramente,Estarei Disponibilizando as Imagens de Widgets Prontos com as Explicações de Cada Código.
Cabeçalho Sem Imagem De Fundo
- Spoiler:
- Código:
.module .inner .h3 {
background-color: #177468;
font-family: Arial;
font-size: 16px;
text-shadow: 0px 0px 3px #10CEA8;
color: whiteSmoke;
border-radius: 0px 0px 10px 10px;
text-align: center;
margin-top: -15px;
}
>Personalizado o Código
.module .inner .h3 {
background-color: #CORDEFUNDO;
font-family: FONTE;
font-size: TAMANHOpx;
text-shadow: 0px 0px 3px #COR;
color: #CORDOTEXTO;
border-radius: 0px 0px 10px 10px;
text-align: (center,left ou right);
margin-top: -15px;
}
Cabeçalho Com Imagem De Fundo
- Spoiler:
- Código:
.module .inner .h3 {
background-image: url(LINKDAIMAGEM);
font-family: Arial;
font-size: 16px;
text-shadow: 0px 0px 3px #10CEA8;
color: whiteSmoke;
border-radius: 0px 0px 10px 10px;
text-align: center;
background-position-x: 236px;
background-position-y: -113px;
}
>Personalizado o Código
module .inner{
background-image: url(LINKDAIMAGEM);
font-family: FONTE;
font-size: TAMANHODAFONTEpx;
text-shadow: 0px 0px 4px #COR;
color: #CORDOTEXTO;
border-radius: 14px 14px 0px 0px;
text-align: (center,left ou right);
background-position-x: 236px ( < Posição : Quanto maior,mas para o lado );
background-position-y: -113px ( < Posição : Quanto maior,mas para baixo );
}
2 - Personalizando Conteúdo do Widget
Conteúdo sem Imagem De Fundo
- Spoiler:
- Código:
module .inner {
padding: 1em;
background-color: #00B8FF;
border-radius: 0px 0px 20px 20px;
border: 2px solid #0096B3;
}
>Personalizado o Código
.module .inner {
padding: 1em;
background-color: #CORDEFUNDO;
border-radius: 0px 0px 20px 20px;
border: 2px solid #CORDABORDA;
}
Conteúdo Com Imagem De Fundo
- Spoiler:
- Código:
.module .inner {
padding: 1em;
background-image: url(LINKDAIMAGEM);
border-radius: 0px 0px 20px 20px;
border: 2px solid #0096B3;
}
>Personalizado o Código
module .inner {
padding: 1em;
background-image: url(LINKDAIMAGEM);
border-radius: 0px 0px 20px 20px;
border: 2px solid #CORDABORDA;
}
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Personalizando Widgets com CSS
--> Perguntas e Respostas <--
Personalizando Widgets com CSS
Personalizando Widgets com CSS
1 - Posso Juntar os Códigos de "Cabeçalho" e "Conteúdo" na Minha Folha CSS ?
Sim,Deste Jeito irá obter um efeito duplo e bonito.
2 - Posso Alterar/Adicionar Outras Classes CSS?
Sim,Como desejar..
![[Tutorial]Personalizando WIDGET com CSS Top](https://2img.net/h/www.ipbforumskins.com/skindemo/public/style_images/baisik34x/top.png)
