LF Design
Olá,

Seja bem vindo ao LF Design se registra no fórum estamos com muitas vagas e o melhor conteúdo para você

Até
LF Design
Últimos assuntos
» Mundo dos Fóruns
Sex Abr 18, 2014 7:17 am por JQuery

»  Arte Library®
Sex Mar 28, 2014 10:35 am por Wiliam.

» Poderia me fazer uma HTML Veja
Sab Maio 11, 2013 3:46 pm por Quakeline

» Star Forum - Mais que um forum, uma familia
Sab Maio 11, 2013 9:56 am por Quakeline

» Ultra Gaming
Qua Maio 08, 2013 8:03 pm por -Matt

» SUPERAntiSpyware
Qua Maio 08, 2013 7:25 pm por -Matt

» Como fazer isso
Qua Maio 01, 2013 12:28 pm por Quakeline

» [VIP] Compre VIP
Seg Abr 29, 2013 8:58 pm por Quakeline

Os membros mais ativos do mês


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

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

#1 [Tutorial]Personalizando WIDGET com CSS em Qui Abr 25, 2013 3:54 pm

Chongas

avatar
Programador
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. Very Happy


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:

.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
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
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
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


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. Very Happy


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


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..

#2 Re: [Tutorial]Personalizando WIDGET com CSS em Qui Abr 25, 2013 4:16 pm

BabyLoves

avatar
Fundador
Tutorial Aprovado !.

#3 Re: [Tutorial]Personalizando WIDGET com CSS em Qui Abr 25, 2013 5:14 pm

Montillo

avatar
Mooderador Global
Muito Bom,Obrigado por Compartilhar



Conteúdo patrocinado


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

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