Continuando a série: Aprendendo CSS e HTML no Blogger, hoje vamos conhecer as Variáveis CSS de Cores e Fontes.
No topo da folha de estilos do seu blog, no Blogger,você encontrará Variable Definitions.
Variable Definitions são valores que podem ser modificados diretamente através do Painel do Blogger. São pré definições de cores, fontes e tamanho de fontes.
A maioria dos templates existentes, como os padrões do Blogger (mínima ou designer de modelo) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel do Blogger, na aba "Designer de Modelo", no modeo "Avançado".
Se no CSS estiverem estabelecidas as pré definições, você poderá alterar cores, fontes e tamanho de fontes, pelo painel do Blogger sem precisar mexer no código do seu template.
Se esses valores não estiverem estabelecidos, você poderá definí-los, criando suas próprias variáveis.
Quanto mais variáveis forem criadas, maior a facilidade de mudar cores e fontes dos elementos da página, através do painel na aba "Designer".
Em muitos casos, não se consegue mudar a cor ou fonte de um determinado template por que o autor do template não usou as variáveis, não definindo e especificando um determinado valor diretamente em uma propriedade, e se não há definição para esses valores, dificulta quaisquer tentativa de alteração.
As variáveis se apresentam em 2 tipos:
1) Variável Cor:
Em vermelho: é o nome da variável - pode ser qualquer nome que você quiser escolher, mas não deve conter espaços.
Em azul: é a descrição que aparecerá no painel Fontes e Cores, e pode conter espaços.
Em verde: é tipo de variável, que neste caso é "cor"
Em laranja: é o valor padrão, funciona na falta de um outro valor fornecido.
Em marron: é o valor da cor fornecida.
2) Variável Fonte:
Em vermelho: é o nome da variável, sem espaços.
Em azul:é a descrição da variável, pode conter espaços
Em verde:é o tipo da variável, que neste caso é font.
Em laranja:é a fonte padrão.
Em marron: é a fonte escolhida.
Como Criar Variáveis do tipo Cor:
Veremos agora como criar variáveis de cores no seu template.
Copie o trecho abaixo, e substitua os nomes e tipo como quiser.
Você deve colar o código logo abaixo do trecho:
/* Variable definitions
====================
Exemplo de variável do tipo "cor":
Eu criei uma variável do tipo cor, de nome "linecolor", ela pode ser aplicada em todas as linhas do meu blog, sempre que quiser aplicar estilos de cores a uma linha, farei assim:
border-bottom: 1px solid $linecolor;
Veja demonstrativo:
Criada a variável, podemos aplicá-la a qualquer propriedade de qualquer seletor onde for possível aplicar cor.
Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Não esqueça: Esta variável pode ser utilizada em qualquer propriedade, não apenas em linhas.
Caso eu queira aplicar essa cor como background da sidebar, por exemplo, eu farei assim:
.sidebar {
background-color:$linecolor;
}
Não se esqueça de colocar o $ antes do nome, ou a aplicação Não funcionará!
Como Criar Variáveis do tipo Fonte:
Veremos agora como criar variáveis de fontes no seu template.
No template Minima, por padrão, as variáveis do tipo fonte são: bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont.
Para exemplificar, digamos que eu queira criar uma nova variável do tipo fonte para ser aplicada aos Titulos da área do Footer do blog. Deverei cria-la desta maneira:
Nesta variável que eu acabei de criar, eu estabeleci que a letra que a primeira fonte a ser procurada pelo navegador deverá ser a Arial, e na falta dela, Verdana e assim por diante.
Criada a variável do tipo fonte, podemos aplicá-la a qualquer propriedade de qualquer seletor onde quisermos definir qual tipo de fonte o seletor deverá ter.
Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Para definir onde a variável deverá ser aplicada (que no nosso exemplo será nos titulos do footer),eu precisarei incluir os valores diretamente na regra CSS na propriedade "h2" do seletor "Footer", criando a seguinte regra:
.footer h2{
font: $footertitlefont;
}
Após determinada uma nova variável, retorne ao painel do blogger, clicando na aba "Design >> Designer de Modelo >> Avançado".
Você notará que existe uma nova variável de nome "Footer Title Font" e se quiser trocar o tipo ou tamanho de fonte, poderá faze-lo diretamente pelo painel do Blogger.
Imagens por Mundo Blogger
No topo da folha de estilos do seu blog, no Blogger,você encontrará Variable Definitions.
Variable Definitions são valores que podem ser modificados diretamente através do Painel do Blogger. São pré definições de cores, fontes e tamanho de fontes.
A maioria dos templates existentes, como os padrões do Blogger (mínima ou designer de modelo) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel do Blogger, na aba "Designer de Modelo", no modeo "Avançado".
Se no CSS estiverem estabelecidas as pré definições, você poderá alterar cores, fontes e tamanho de fontes, pelo painel do Blogger sem precisar mexer no código do seu template.
Se esses valores não estiverem estabelecidos, você poderá definí-los, criando suas próprias variáveis.
Quanto mais variáveis forem criadas, maior a facilidade de mudar cores e fontes dos elementos da página, através do painel na aba "Designer".
Em muitos casos, não se consegue mudar a cor ou fonte de um determinado template por que o autor do template não usou as variáveis, não definindo e especificando um determinado valor diretamente em uma propriedade, e se não há definição para esses valores, dificulta quaisquer tentativa de alteração.
As variáveis se apresentam em 2 tipos:
1) Variável Cor:
<Variable name="bgcolor"description="Page Background Color"type="color" default="#fff" value="#ffffff">Em vermelho: é o nome da variável - pode ser qualquer nome que você quiser escolher, mas não deve conter espaços.
Em azul: é a descrição que aparecerá no painel Fontes e Cores, e pode conter espaços.
Em verde: é tipo de variável, que neste caso é "cor"
Em laranja: é o valor padrão, funciona na falta de um outro valor fornecido.
Em marron: é o valor da cor fornecida.
2) Variável Fonte:
<Variable name="bodyfont"description="Text Font"type="font" default="normal normal 100% Georgia, Serif"
value="normal normal 100% Georgia,Serif">Em vermelho: é o nome da variável, sem espaços.
Em azul:é a descrição da variável, pode conter espaços
Em verde:é o tipo da variável, que neste caso é font.
Em laranja:é a fonte padrão.
Em marron: é a fonte escolhida.
Como Criar Variáveis do tipo Cor:
Veremos agora como criar variáveis de cores no seu template.
Copie o trecho abaixo, e substitua os nomes e tipo como quiser.
Você deve colar o código logo abaixo do trecho:
/* Variable definitions
====================
<variable name="NOME"description="DESCRIÇÃO" type="color" default="#XXX"value="#XXXXXX">Exemplo de variável do tipo "cor":
<Variable name="linecolor" description="Linhas" type="color"default="#599"value="#6F0599">Eu criei uma variável do tipo cor, de nome "linecolor", ela pode ser aplicada em todas as linhas do meu blog, sempre que quiser aplicar estilos de cores a uma linha, farei assim:
border-bottom: 1px solid $linecolor;
Veja demonstrativo:
Criada a variável, podemos aplicá-la a qualquer propriedade de qualquer seletor onde for possível aplicar cor.
Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Não esqueça: Esta variável pode ser utilizada em qualquer propriedade, não apenas em linhas.
Caso eu queira aplicar essa cor como background da sidebar, por exemplo, eu farei assim:
.sidebar {
background-color:$linecolor;
}
Não se esqueça de colocar o $ antes do nome, ou a aplicação Não funcionará!
Como Criar Variáveis do tipo Fonte:
Veremos agora como criar variáveis de fontes no seu template.
No template Minima, por padrão, as variáveis do tipo fonte são: bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont.
Para exemplificar, digamos que eu queira criar uma nova variável do tipo fonte para ser aplicada aos Titulos da área do Footer do blog. Deverei cria-la desta maneira:
<Variable name="footertitlefont" description="Footer Title Font" type="font" default="normal normal 100% Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif" value="normal normal 100% Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif">Nesta variável que eu acabei de criar, eu estabeleci que a letra que a primeira fonte a ser procurada pelo navegador deverá ser a Arial, e na falta dela, Verdana e assim por diante.
Criada a variável do tipo fonte, podemos aplicá-la a qualquer propriedade de qualquer seletor onde quisermos definir qual tipo de fonte o seletor deverá ter.
Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Para definir onde a variável deverá ser aplicada (que no nosso exemplo será nos titulos do footer),eu precisarei incluir os valores diretamente na regra CSS na propriedade "h2" do seletor "Footer", criando a seguinte regra:
.footer h2{
font: $footertitlefont;
}
Após determinada uma nova variável, retorne ao painel do blogger, clicando na aba "Design >> Designer de Modelo >> Avançado".
Você notará que existe uma nova variável de nome "Footer Title Font" e se quiser trocar o tipo ou tamanho de fonte, poderá faze-lo diretamente pelo painel do Blogger.
Imagens por Mundo Blogger
Nenhum comentário:
Postar um comentário