Personalizar tags CSS para layouts do Blogger
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”.
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 possa ser editada 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.
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).
Nenhum comentário:
Postar um comentário
Tire suas dúvidas utilizando os comentários como SAC.