CSS – Variable Definitions no Blogger

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 de Modelo, no Modelo Avançado”.

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 Côr:

Ex:. abaixo

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:

Ex:. abaixo

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:

Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="cc6600">
Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc">
Variable name="sidebarcolor" description="Sidebar Color" type="color" default="#999" value="#999999">
Variable name="sidebartextcolor" description="Sidebar Title Color" type="color" default="#666" value="#666666">
Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999">
variable name="linecolor" description="linhas" type="color" deafault="599" value="#6F0599">
variable Name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia,Serif" value="normal normal 100% Georgia,Serif">
variable name="headerfont" description="Sidebar Title Font" type=" font" value="normal normal 78% 'Trebuchet MS' Trebuchet,Arial,Verdana,Sans Serif">

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á!

Agora que você determinou uma variável, salve e retorne ao painel do blogger, clicando no menu “Modelo>>Personalizar>>Avançado”“. Você notará que existe uma nova variável de nome “Linhas” e se quiser trocar a cor, poderá mudá-la pelo painel. Veja imagem demonstrativa: 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 no menu “Modelo>>Personalizar>>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.
Clique na imagem para vê-la ampliada

 Acompanhe o próximo post desta série, para ver mais sobre as Variáveis do tipo fonte.<br />

. Vanessa-Mundo Blogger