Aparência, Atualizações

Como adicionar um CSS personalizado

Você pode usar o editor CSS para personalizar a aparência do seu site do WordPress.com com o plano Premium ou superior. Para isso, ele permite que você inclua estilos CSS próprios, substituindo os estilos padrão do seu tema.

Sumário

Acessar o editor CSS

Primeiro, acesse o editor CSS em Meu site → Aparência → Personalizar → CSS adicional:

A tela CSS adicional
A tela CSS adicional

↑ Tabela de Conteúdo ↑

Visualizar e salvar

Quando você adiciona código CSS ao site, suas alterações são mostradas na visualização do site à direita, mas elas só entrarão em vigor quando você clicar em Salvar alterações.


↑ Tabela de Conteúdo ↑

Revisões de CSS

As últimas 25 revisões de edições de CSS são salvas e podem ser acessadas clicando em Ver histórico completo, na parte inferior do editor. Se a opção não está disponível, isso significa que você não tem um histórico para restaurar.

Revisões de CSS quando seu site tem plugins

↑ Tabela de Conteúdo ↑

Como mudar o tema?

Como o CSS é personalizado por tema, ele será revisado após a alteração de temas. Para revisar ou recuperar CSS antigos, use Revisões de CSS.


↑ Tabela de Conteúdo ↑

Sobre CSS

CSS significa Cascading Style Sheets (folhas de estilos em cascata) e é uma linguagem de marcação que controla a aparência dos elementos HTML em uma página da Web. Há um potencial praticamente infindável para o que você pode fazer com o CSS para modificar o design de um site, conforme mostramos no famoso projeto CSS Zen Garden, uma vitrine do que pode ser realizado com o CSS, simplesmente alterando a aparência de um único arquivo HTML.

Aproveitar essa funcionalidade ao máximo requer alguns conhecimentos sobre o funcionamento do CSS e HTML, ou no mínimo boa vontade para aprender. Consulte a seção Ajuda com CSS, mais abaixo nesta página, para obter mais informações.

Se você busca personalizar diversos temas do WordPress.com e não se interessa em aprender CSS, recomendamos contratar um designer para fazer as alterações que você deseja.


↑ Tabela de Conteúdo ↑

Ajuda com CSS

Precisa de ajuda com CSS? Nós podemos fornecer suporte limitado ao CSS, por chat ao vivo ou e-mail.Fique à vontade para entrar em contato e nós o avisaremos caso possamos ajudá-lo com sua solicitação de CSS. Do contrário, podemos apontar a direção certa para você seguir!

Apesar de o processo de aprendizagem ser maior para iniciantes, saber usar o CSS é algo valioso e reutilizável. Há vários recursos excelentes online para ajudar você a saber mais sobre HTML e CSS. Estas séries de artigos práticos sobre CSS são um bom ponto de partida:

Veja algumas dicas:

Tutoriais


↑ Tabela de Conteúdo ↑

Controles de CSS avançados

Largura de mídia

Use essa opção caso você tenha modificado a largura da área de conteúdo principal usando o CSS personalizado. A configuração de “Largura da mídia” é usada como tamanho padrão para imagens em tamanho original quando inseridas em seu site. Isso não afeta o tamanho de algumas imagens adicionadas antes de você alterar a configuração (dependendo de como foram inseridas). Talvez seja necessário reinserir algumas dessas imagens antes de alterar a configuração.

Começar do zero

Por padrão, o CSS personalizado inserido no editor CSS será carregado depois do CSS original do tema. Isso significa que as suas regras podem prevalecer e substituir os estilos do tema.

Desative o CSS original do tema completamente clicando na opção Não usar CSS original do tema. Com isso, você poderá usar qualquer tema do WordPress.com como uma base vazia para criar seu design com CSS. Essa é uma opção avançada e só deve ser usada se você deseja começar do zero e criar o design do CSS de seu tema.

Se quiser criá-lo com base nas regras de CSS existentes, que é a abordagem mais comum e recomendada, deixe essa opção desativada.

Para encontrar o CSS original do tema e usá-lo como referência, o melhor a se fazer é usar as ferramentas do seu navegador. A maioria dos navegadores modernos têm um inspetor da Web integrado. Clique com o botão direito na opção “Inspecionar elemento” para ver o HTML e todo o CSS do item selecionado. Duas ferramentas famosas para visualizar CSS são as Ferramentas do Firefox para desenvolvedores e as Ferramentas do desenvolvedor do Chrome. Para ajudar você a começar, use as ferramentas do desenvolvedor integradas ao navegador para conferir a página de suporte com breves screencasts em Como encontrar o CSS do seu tema.

Pré-processador

O WordPress.com é compatível com pré-processadores 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.


↑ Tabela de Conteúdo ↑

Perguntas frequentes

Posso remover os links de créditos, como “Blog no WordPress.com”, temas, fontes ou links da barra de ferramentas?

Todos os usuários do WordPress.com precisam manter a barra de administração (a barra escura exibida na parte superior dos sites do WordPress.com no login). Os clientes dos planos WordPress.com Negócios e eCommerce podem entrar em contato com o suporte, para receberem ajuda para remover a barra de administração, se necessário.

O crédito do rodapé pode ser ocultado se os planos WordPress.com Negócios ou eCommerce estiverem ativos em um site. Não use CSS para ocultar ou alterar os créditos caso não tenha nenhum desses planos.

Todos os usuários do WordPress.com podem escolher dentre diversas opções para o crédito de rodapé, desde um logotipo minimalista do WordPress.com a opções de texto como “Um site WordPress.com” ou “Com tecnologia WordPress.com”. Por favor, consulte esta documentação para maiores informações.

A modificação do estilo do texto do rodapé (como cores e tamanho de fonte) é aceitável, desde que o texto continue legível. Ao usar CSS, você também pode acrescentar conteúdos como uma notificação de direitos autorais no rodapé existente.

Posso usar as regras de CSS como @import e @font-face?

No momento, o WordPress.com Premium não permite o carregamento de arquivos externos via CSS, mas isso é possível nos planos WordPress.com Negócios e eCommerce.

Posso usar fontes da Web no CSS?

O painel de fontes em Meus sites → Aparência → Personalizar → Fontes permite que você escolha um par de fontes. Você pode escolher até duas fontes da Web no front end ao trabalhar com CSS. Além disso, se os planos WordPress.com Negócios ou eCommerce estiverem ativos, será possível incluir fontes adicionais, usando plugins de terceiros.

Posso fazer o upload de imagens para usá-las com meu CSS?

Sim. É possível fazer o upload de uma imagem para a sua biblioteca de mídia para, em seguida, vinculá-la à sua URL direta, de dentro da folha de estilos CSS. Veja um exemplo simples de como usar uma imagem de fundo em sua folha de estilos:

 div#content { background-image: url('http://example.files.wordpress.com/1999/09/example.jpg'); }

O que acontece se eu cancelar a assinatura dos planos WordPress.com Premium, Negócios ou eCommerce?

Todos os upgrades do WordPress.com são renovados anualmente. Caso você opte pelo cancelamento da assinatura, seu CSS personalizado será salvo, mas deixará de ser aplicado ao seu site para que outras pessoas o vejam. Se você desejar reaplicá-lo ao seu site, compre novamente o upgrade. Os estilos serão reaplicados automaticamente, desde que você não tenha alterado os temas. Se você tiver alterado os temas, encontrará seu antigo CSS no link Revisões de CSS, localizado acima do editor no painel CSS.

Ainda confuso?

Contate o suporte.