Página inicial de suporte > CSS personalizado

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.

Como adicionar CSS personalizado

Primeiro, ative o módulo CSS personalizado no painel do Jetpack. Depois, acesse o editor CSS pelo caminho Aparência → Editar CSS.

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. Leia a mensagem. Ela contém informações importantes sobre o upgrade. A mensagem informa o seguinte:

/*
Bem-vindo ao CSS personalizado!

CSS (Cascading Style Sheets, folhas de estilos em cascata) é um tipo de código que informa ao navegador como processar uma página da Web. Você pode excluir esses comentários e começar as personalizações.

Por padrão, sua folha de estilos será carregada depois da folha de estilos do tema. Isso quer dizer que suas regras podem ter prioridade e substituir as regras do CSS de tema. Escreva aqui o que deseja alterar. Não é necessário copiar todo o conteúdo da folha de estilos de seu tema.
*/

Para começar a adicionar seu código CSS personalizado, basta remover a mensagem ou adicionar o CSS depois dela.

Opções de edição

Você tem algumas opções ao editar sua folha de estilos. Elas ficam à direita da janela de edição:

  • 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ê pode optar por usar a folha de estilos do tema existente (CSS de complemento). Você também pode substituí-la por seu próprio CSS. 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.
  • Compatível com dispositivos móveis: caso você use o Tema para dispositivos móveis do Jetpack, talvez queira que as alterações do CSS sejam aplicadas também ao tema do dispositivo móvel.
  • Largura do conteúdo: 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 do conteúdo” é usada como tamanho padrão para imagens de tela inteira, vídeos e algumas larguras de código abreviado quando inseridas em seu blog. Isso não afeta o tamanho de algumas imagens e vídeos adicionados antes de alterar a configuração (dependendo de como foram inseridos). Talvez seja necessário reinserir alguns deles antes de alterar a configuração.

Visualizar e salvar

Ao editar seu CSS, uma boa ideia é sempre visualizar as alterações antes de aplicá-las, seja qual for seu nível de conhecimento. Depois de fazer algumas alterações em seu CSS, você pode clicar no botão Visualizar.

Uma nova janela/guia do navegador abrirá. E você poderá visualizar seu blog como se o código CSS personalizado tivesse sido aplicado. Você verá uma mensagem na parte superior do blog, diretamente embaixo da barra de administração preta:

previewwarning

Se estiver satisfeito com o resultado e quiser salvar as alterações, volte à janela aberta do Editor CSS. Depois, clique no botão Salvar folha de estilos.

Revisões de CSS

O módulo Revisões de CSS mostra versões anteriores de seu CSS personalizado. Sempre que você clica em Salvar folha de estilos, uma revisão é salva. O Jetpack armazena pelo menos 25 revisões de CSS feitas em qualquer tema de seu blog. Com as revisões de CSS, você confere as alterações recentes e as reverte para uma versão anterior, se achar necessário.

css-revisions

Para comparar as Revisões de CSS, selecione a data da revisão na seção Revisões de CSS abaixo de Editor. Na tela seguinte, 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.

revisions1

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

Assim, o CSS personalizado é revertido. revisions2

  • Categorias

  • Contate-nos

    Precisa de ajuda? Sinta-se à vontade para entrar em contato conosco.