Personalizar tags CSS para layouts

Para usar o designer de modelo com o CSS do modelo do blog, é necessário seguir algumas diretrizes.

Configurar as variáveis

Na seção <head> do seu código, é necessário ter um par de tags <b:skin> </b:skin>.

As declarações de estilo CSS serão inseridas entre essas tags, juntamente com os nomes de variáveis que fazem com que seu design funcione com a página “Fontes e cores”.

Exemplo
<head>

...
<b:skin>
 <style type='text/css'>
 /*
  * Definições de variáveis:
  *  <Variable name='corfundo' description='Cor de fundo da página'
      type='color' default='#fff'/>
  */
 body {
   background: $corfundo;
   margin: 0;
   padding: 40px 20px;
 }
 </style>
</b:skin>
</head>

O código CSS entre as tags de comentário /* e */ não aparecerá no seu blog.

Haverá uma lista de variáveis aqui, uma para cada fonte ou cor que você quiser que seja editável pela guia “Fontes e cores”. Cada variável precisa ter as informações mostradas no exemplo acima e descritas aqui:

  • name: pode conter letras ou números. Cada nome no seu modelo precisa ser único.
  • description: adicione uma descrição para aparecer na seção “Fontes e cores".
  • type: "font" ou "color".
  • default: o valor padrão. Para cores, este valor deve ser um código de cor hexadecimal, por exemplo, #FF0066. Para fontes, este valor será uma lista na forma: font-style font-weight font-size font-family.

Usar as variáveis

Após a configuração das variáveis, quando quiser usar o valor de uma variável, insira $nome_da_variável no código CSS b:skin.

Tipos de variáveis

O designer de modelo oferece suporte a edição de um conjunto específico de tipos de variáveis CSS. Para definir o tipo de variável:

  • as variáveis de cores fornecerão uma paleta de cores para seleção no designer de modelo.
  • as variáveis de fonte fornecerão uma seleção de fontes, com tamanho e opções de negrito e itálico, no designer de modelo.

No exemplo acima, há uma variável chamada corfundo, que está definida como branco (#fff). No código seguinte, aparece: background: $corfundo. Isso faz com que o fundo fique branco, e é possível alterá-lo na seção “Fontes e cores”.

Observação: não é necessário criar variáveis para outros tipos de atributos CSS. Eles podem ser incluídos no CSS normalmente, como os atributos margin: e padding: no exemplo acima.

Saiba mais sobre o CSS.

Isso foi útil?
Como podemos melhorá-lo?