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 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">
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;
}
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: 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
.
Estou ralando bastante para memorizar estes códigos.
ResponderExcluirA dica é memorizar gradativamente.Estuda um pouco de HTML e CSS e por ai vai.
Excluir