Você já deve ter percebido no começo do código um trecho intitulado de Variable Definitions, e em alguns lugares do blog ao invés de cor (#FFFFFF;) algo como $bordercolor, $linkcolor. Mas o que é isso? Como se define a cor assim?
Sabe aquelas opções em Modelo\Fontes e Cores? Você pode definir essas variáveis lá ou diretamente no código, uma coisa legal também é que tem como criar nossas próprias variáveis e é bem simples.
Hoje vou ensinar a modificar as Variable Definitions direto no html e também a criar a nossa própria.
Vamos lá!
MODIFICANDO VARIABLE DEFINITIONS
<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#FFFFFF">
<Variable name="textcolor" description="Text Color"type="color" default="#B52" value="#3F0B52">
<Variable name="linkcolor" description="Link Color"type="color" default="#1BF" value="#B391BF">
Aqui temos um trecho com três tags de variáveis, em negrito apenas uma tag.
Em vermelho temos o nome da variável, que é como ela deverá ser colocada quando usarmos ela. No caso devemos colocar $bgcolor.
ATENÇÃO: Não se esqueça de colocar o $ antes do nome, ou não funcionará!
Em azul temos a descrição da variável, serve para que saibamos do que se trata, e é o que estiver escrito aí que aparecerá lá na janela de Fontes e Cores.
Em verde temos o tipo de variável, essas três se tratam de cores, mas podia sem de fontes também.
Em cinza temos o valor da cor reduzido, observando códigos percebi que era os últimos três dígitos do valor, não sei bem para que serve. Mesmo quando o default está diferente do value a cor fica normal, mas sempre que mudar a cor direto no código mude também o default por garantia.
Em roxo temos a cor, é ai que você deve mexer na hora de trocar a cor no html, é só por os dígitos da cor escolhida e pronto!
Todos os lugares que estiverem com a variável ficaram com as cores que você escolheu.
CRIANDO VARIABLE DEFINITIONS
Criar uma variável é bem simples, é só copiar o trecho abaixo, substituir como quiser e colar antes da primeira linha, como mostrado:
/* Variable definitions
====================
<Variable name="NOME" description="DESCRIÇÃO" type="color" default="#XXX"value="#XXXXXX">
<Variable name="bgcolor" description="Page Background
Color"type="color" default="#fff" value="#FFFFFF">
Em negrito o que você deve copiar, o que está em cinza é para você saber onde. Como substituir você já sabe, né? Um exemplo:
<Variable name="linecolor" description="Linhas" type="color" default="#599" value="#6F0599">
Eu criei essa variável para todas as linhas do meu blog, sempre que quero pôr uma linha faço assim:
border-bottom: 1px solid $linecolor;Está em borda porque é como eu uso, poderia estar em background, font-color e tudo que se refere a cor!
Então quando eu quero trocar a cor, ou eu mudo direto no código, ou vou em Fontes e Cores, que é bem mais prático e pronto!
É isso! Simples, né?
2 Comments:
Olá Rô,
Realmente seus comentários sobre a reportagem do wordpress me fizeram refletir!
Tenho interesse no wordpress por seus templates serem muito bonitos visualmente e a possibilidade de fazer algo próximo.
Mas o blogger não perde muito não, basta saber mexer e editar o blogger que você consegue bons efeitos.
Por isso não mudei para o wordpress, porque sei bastante do blogger e ainda não estou disposta para enfrentar algo novo e perder muito tempo aprendendo como fiz com o blogger. Preciso explorar mais o potencial do blogger!
Obrigada por seus comentários!
Saiba que é sempre bem vinda ao Aukimia, Templates para Você e Imagens para Você, seja por comentários, dicas, palpites e bons papos!
Bjks e boa semana para você!
Aú
Olá... Eu queria mudar, e passar de um fundo com uma cor, para uma imagem.
Mas aparece-me este tipo de código:
/* Variable definitions
========================
E não consigo transforma-lo de modo a ficar em imagem. como faço?
Post a Comment