CSS personalizado

Com o Editor CSS personalizado, você personaliza a aparência de seu tema sem precisar criar um tema secundário. E também não precisa se preocupar com as atualizações de temas que sobrescrevem o que você personaliza.

Por padrão, este módulo agora está habilitado. Se a funcionalidade descrita abaixo não for exibida, acesse a seção Controlar módulos do Jetpack em uma única página para saber mais sobre como ativá-la.

Começando com o WordPress 4.7, você pode agora adicionar seu próprio tema ao CSS personalizado diretamente do Customizer. Basta escolher a guia CSS Adicional quando personalizar seu tema atual para começar agora.

O módulo CSS personalizado do Jetpack permite que você adicione mais funcionalidades para esse editor CSS, como explicado abaixo.

Adicionando o CSS personalizado

Primeiro, acesse o editor CSS via Aparência → Personalizar → CSS Adicional.

Se esta for sua primeira visita ao Editor CSS (ou se você ainda não adicionou um código CSS personalizado), verá uma mensagem de espaço reservado na janela de edição. Avalie a mensagem, pois ela contém algumas dicas úteis para ajudar você a começar agora.

Quando você estiver pronto para começar a adicionar seu código CSS personalizado, basta remover a mensagem começar agora ou adicionar seu CSS depois dela.

Opções de edição

Você tem algumas opções ao editar sua folha de estilos. Elas ficam diretamente abaixo do editor:

• Preprocessador: o editor CSS tem suporte para preprocessadores CSS dos tipos LESS e Sass (Sintaxe SCSS). Essa é uma opção avançada para usuários que desejam aproveitar as extensões CSS, como variáveis e mixins. Acesse os sites do LESS e do Sass para obter mais informações.
• Complemento: Ao fazer alterações no design de seu site, você estará adicionando suas personalizações em cima da folha de estilos do tema existente por padrão. Você pode, no entanto, escolher substituir a folha de estilo do tema existente com seu próprio CSS graças à opção Comece do zero. Use essa segunda opção se quiser começar apenas com a estrutura HTML do tema e recriar todo o CSS do início. Consulte a folha de estilos original do tema para referência e verifique se todas as regras/estilos foram levados em conta. Se alguns elementos estiverem faltando, a exibição pública do blog parecerá desigual. Somente o código CSS na janela de edição será aplicado ao seu blog com essa opção.
• Largura da mídia: use essa opção caso você tenha modificado a largura da área de conteúdo primário usando o CSS personalizado. A configuração de “Largura da mídia” é usada como tamanho padrão para imagens de tela inteira quando inseridas em seu blog. Observe que isso não afeta o tamanho de algumas imagens que você adicionou antes de alterar a configuração (dependendo de como foram inseridos). Talvez seja necessário reinserir algumas delas antes de alterar a configuração.

Visualizar e salvar

Ao editar seu CSS, você poderá visualizar as alterações antes de salvá-las, seja qual for seu nível de conhecimento.

Se você gosta do que vê e quer salvar as alterações, clique no botão Salvar e Publicar na parte superior da janela do personalizador.

Histórico de CSS

Revisões de CSS mostram versões anteriores de seu CSS personalizado. Sempre que você salva suas alterações, uma revisão é salva. O Jetpack armazena as últimas 25 revisões de CSS feitas em qualquer tema de seu blog.

Para visualizar essas revisões, clique em Ver histórico completo na parte de baixo da janela CSS adicional no Customizer.

Isso abrirá o histórico completo de revisões de CSS personalizado para o tema selecionado.

Para comparar as Revisões de CSS, selecione uma data de revisão usando o controle deslizante na parte superior da tela Revisões. A revisão selecionada é exibida lado a lado com a versão atual, realçando as diferenças entre as duas. Um destaque em vermelho indica que algo foi removido. Já um destaque em verde indica que algo foi adicionado.

Para restaurar uma versão anterior de seu CSS personalizado, clique em Restaurar referente à data em questão. Assim, o CSS personalizado é revertido.

Anotações

O Jetpack inclui, por padrão, o CSS personalizado como uma folha de estilo embutida no documento. No entanto, se o CSS personalizado exceder 2.000 caracteres de comprimento, o Jetpack gerará uma folha de estilo externa e criará o vínculo para ela.

Informações de privacidade

Esta funcionalidade é ativada por padrão. Apesar de não existir um controle para essa funcionalidade dentro da área principal de configurações do Jetpack, ela pode ser desativada a qualquer momento seguindo esse guia.

Esta página foi traduzida de inglês. Leia a página original.