Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Aprendendo CSS e HTML Vanessa S.

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

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.

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

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

8 Comentários

  1. Isaura Mirela disse:

    Olá, adorei seu blog, suas explicações são ótimas, mas estou com um probleminha, faço tudo certinho como vc ensina, mas não consigo salvar a variável. Dá erro. O que devo fazer?

    Desde muito obrigada.

  2. Lucas J. de Almeida disse:

    Tentei no meu blog, mas não deu certo… abaixo o código que usei e consegui salvar, mas quando vou em design/avançado não consigo mudar a fonte.

  3. Sergio-F disse:

    Excelete uma da melhores dicas, Falta agora para largura.
    o de cima não seria o slider de postagem.

  4. Jamis Henrique disse:

    Oi Clau,

    Ja venho procurando na internet a muito tempo mais nunca acho uma explicação das variaveis abaixo:


    $startSide
    $endSide

    Se você puder me explicar ficaria grato 🙂

    @JamisHenrique_

  5. Bre disse:

    Olá , gostaria de pedir uma ajudinha, não sei se é problema nas variable definitions, mas quando posto algo muito grande no blog, o layout fica fora de lugar e aparece uma faixa branca no meio do topo e o post, ja fiz de tudo e não consigo ajeitar. Será que você saberia o que é? Eu agradeceria muitissimo!!
    o link é : lepetitcerise.blogspot.com

  6. ::Clau:: disse:

    @MDA Eventos:
    Este tutorial irá te ajudar:
    Personalizar a área do post.

  7. MDA Eventos disse:

    olá, gostaria de saber se é possivel colocar uma imagem no área do post, especificamente nas guias Variable Definitions….ou seja, ao inv´s de cor, colocar uma imagem?

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.