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”.
<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
.
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.