Astra Customizer CSS não aplica: como corrigir o erro

Tipo Page Builders

Nome do erro CSS não aplica no Customizer do Astra Pro EN: Astra Pro Customizer CSS not applying

Severidade Atenção

Descrição O Astra Customizer CSS não aplica quando o código de Personalizar -> CSS Adicional não surte efeito no site, porque o cache serve o head antigo, a regra perde para a especificidade do CSS dinamico do Astra Pro, ou o CSS ficou preso a outro tema. A correção limpa o cache, sobe a especificidade do seletor e confirma o tema ativo.

O que é o erro do Astra Customizer CSS que não aplica?

O Astra Customizer CSS que não aplica e a falha em que você escreve regras em Aparencia -> Personalizar -> CSS Adicional, clica em Publicar com o Astra Pro ativo, mas o estilo não muda no site. O CSS Adicional do WordPress grava as regras num tipo de post chamado custom_css, vinculado ao tema ativo, e imprime esse bloco no cabeçalho da página por meio da função wp_custom_css_cb dentro do wp_head. O Astra Pro, por sua vez, gera o próprio CSS dinamico (cores globais, tipografia, layout) e o imprime inline na página. Quando o cache entrega um head antigo, quando o CSS dinamico do Astra Pro vem depois e ganha por especificidade, ou quando o CSS Adicional foi salvo sob outro tema, a regra do Personalizar simplesmente não aparece no resultado final.

Como identificar

Você salva uma regra em Personalizar -> CSS Adicional, o preview do lado direito muda, mas no site publicado o estilo continua igual.
No inspetor do navegador (F12 -> Elements -> Styles) a sua regra aparece riscada (tachada), sinal de que outra regra do Astra Pro com mais especificidade venceu.
A sua regra nem aparece no código-fonte da página (Ctrl+U), indicando que o bloco do CSS Adicional não esta sendo impresso no head.
O CSS Adicional do Personalizar esta vazio depois que você trocou o tema ou ativou um tema filho, como se o código tivesse sumido.
Mensagem “Código CSS invalido não foi salvo” no rodape do CSS Adicional ao clicar em Publicar, apontando erro de sintaxe na regra.

Como prevenir

Escreva regras de CSS Adicional sempre ancoradas em um container do Astra (por exemplo .ast-container) para vencer a especificidade do dynamic CSS do Astra Pro sem precisar de importante.
Antes de migrar para um tema filho, copie o conteúdo de Personalizar -> CSS Adicional, porque o código fica preso ao tema em que foi salvo.
Mantenha o bloco do CSS Adicional fora da minificacao e combinacao do plugin de cache desde a configuração inicial.
Depois de salvar uma regra no Personalizar, limpe o cache do plugin e do Cloudflare para garantir que o head publicado contenha a alteração.

Causa

Cache de página (WP Rocket, LiteSpeed, W3 Total Cache) ou CDN servindo uma versão antiga do head, antes de a função wp_custom_css_cb imprimir o bloco novo do CSS Adicional.
Especificidade do seletor baixa: o CSS dinamico do Astra Pro imprime inline e ganha do CSS Adicional, deixando a sua regra tachada no inspetor a menos que você use um seletor mais específico.
CSS Adicional preso a outro tema: o WordPress grava o custom_css por tema ativo, entao ao trocar de tema ou ativar um tema filho o código do Personalizar deixa de ser carregado.
Erro de sintaxe na regra (chave não fechada, ponto e virgula faltando) que faz o validador do CSS Adicional descartar tudo a partir do ponto invalido.
Plugin de cache minificando e combinando CSS de forma que remove ou reordena o bloco inline do CSS Adicional, fazendo a regra perder do dynamic CSS do Astra Pro.
CSS digitado no campo errado do Astra Pro (por exemplo um Custom Layout específico com condicao de exibicao) que so se aplica em uma página, e não no site inteiro como você esperava.

Como resolver

Confirme se a regra chega ao head pelo inspetor: abra a página publicada, pressione Ctrl+U para ver o código-fonte e procure pelo bloco de estilo do CSS Adicional. Se a sua regra não estiver la, e cache ou tema errado. Procure pelo id do bloco que o WordPress imprime:
```
id="wp-custom-css"
```
Limpe todos os caches: limpe o cache do plugin de cache, da hospedagem e do Cloudflare para que o head novo, com a regra do CSS Adicional, seja servido. Depois recarregue o site forcando o navegador a ignorar o cache local:
```
Painel WP -> WP Rocket -> Limpar cache
Ctrl+Shift+R (recarregar sem cache do navegador)
```
Aumente a especificidade do seletor: se no inspetor a sua regra aparece tachada, o CSS dinamico do Astra Pro venceu por especificidade. Torne o seletor mais específico (prefixe com o body ou o container do tema) em vez de sair adicionando importante em tudo. Por exemplo, troque o seletor simples por um ancorado no tema:
```
.site-title { color: #0a7; }
body .ast-container .site-title { color: #0a7; }
```
Confirme que o CSS esta no tema ativo certo: como o CSS Adicional e gravado por tema, abra Aparencia -> Personalizar -> CSS Adicional com o tema que esta realmente publicado (tema pai ou filho) e cole a regra ali. Se você migrou para um tema filho, o código do tema pai não e carregado automaticamente. Verifique o tema ativo em:
```
Painel WP -> Aparencia -> Temas
```
Exclua o CSS Adicional da minificacao: no plugin de cache, retire a minificacao e a combinacao de CSS inline ou adicione uma excecao para o bloco do Personalizar, para que ele não seja removido nem reordenado antes do dynamic CSS do Astra Pro. Procure a opção de otimização de CSS e desative:
```
Otimizar entrega de CSS -> Minificar CSS (desligar)
Combinar arquivos CSS (desligar)
```

CSS

/* Cole em Aparencia -> Personalizar -> CSS Adicional (campo nativo do WordPress) */
/* Ancore a regra em um container do Astra para vencer o dynamic CSS do Astra Pro sem !important */
body .ast-container .site-title a {
  color: #0a7c5b;
  font-weight: 700;
}

/* Para botoes do tema, suba a especificidade prefixando com o body */
body .ast-button, body .wp-block-button__link {
  background-color: #0a7c5b;
  border-radius: 6px;
}

Perguntas frequentes

Por que o CSS aparece no preview do Personalizar mas não no site?

Porque o preview do Personalizar renderiza a regra na hora, no navegador, antes de gravar. No site publicado, o WordPress imprime o CSS Adicional no head pela função wp_custom_css_cb. Se o cache serve um head antigo ou o dynamic CSS do Astra Pro vence por especificidade, a regra existe mas não tem efeito visivel.

Como sei se a minha regra perdeu por especificidade para o Astra Pro?

Abra a página, pressione F12, va em Elements e clique no elemento estilizado. Na aba Styles, se a sua regra aparece riscada (tachada), outra regra com mais especificidade venceu, geralmente o CSS dinamico do Astra Pro. A correção e tornar o seu seletor mais específico, prefixando com o body ou um container do tema.

Por que o CSS Adicional sumiu depois que troquei de tema?

Porque o WordPress grava o CSS Adicional no tipo de post custom_css vinculado ao tema ativo. Ao trocar de tema ou ativar um tema filho, o código salvo no tema anterior deixa de ser carregado. Ele não foi apagado: basta voltar ao tema antigo para ve-lo, ou copiar a regra para o CSS Adicional do tema novo.

Devo usar importante para forcar o CSS do Astra Pro a aceitar a regra?

Evite. O importante resolve no curto prazo mas vira uma guerra de importantes dificil de manter. O caminho correto e aumentar a especificidade do seletor, ancorando a regra em um container do Astra como o .ast-container ou prefixando com o body. Assim a sua regra vence o dynamic CSS sem abusar do importante.

O cache pode impedir o CSS Adicional do Astra de aplicar?

Pode, e e a causa mais comum. Plugins de cache e o Cloudflare guardam o HTML com o head antigo, antes de a regra ser impressa. Limpe o cache do plugin, da hospedagem e do Cloudflare, depois recarregue com Ctrl+Shift+R para ignorar o cache do navegador. Na maioria dos casos a regra aparece logo após isso.

A minificacao de CSS do plugin de cache atrapalha o CSS Adicional?

Sim. A minificacao e a combinacao de CSS as vezes removem ou reordenam o bloco inline do CSS Adicional, fazendo a regra carregar antes do dynamic CSS do Astra Pro e perder. Exclua o CSS Adicional da minificacao ou desligue a combinacao de CSS inline para o bloco do Personalizar voltar a vencer.

Onde fica o CSS Adicional do Astra: no Customizer ou em outro lugar?

O CSS de site inteiro fica em Aparencia -> Personalizar -> CSS Adicional, o campo nativo do WordPress que o Astra Pro respeita. Os Custom Layouts do Astra Pro também aceitam CSS, mas esse so se aplica onde a condicao de exibicao do layout casa. Se a regra deve valer no site todo, use o CSS Adicional do Personalizar, não o campo de um Custom Layout.

Preciso de FTP para corrigir o CSS Adicional do Astra Pro?

Não na maioria dos casos. Limpar o cache, ajustar a especificidade do seletor e confirmar o tema ativo certo são feitos pelo painel e pelo inspetor do navegador. O FTP so entra se você precisar mover o CSS para o style.css do tema filho por organizacao, o que e opcional.

Atenção

Como corrigir a falha de upload de arquivos no JetFormBuilder

A falha de upload no JetFormBuilder acontece quando o campo Media Field rejeita o arquivo por exceder o limite de tamanho ou de quantidade, por não casar com o ALLOW MIME TYPES configurado, ou por o usuário não ter o nível de USER ACCESS exigido para enviar.

Grave

Como corrigir o erro de PHP ao ativar o Elementor Pro em hospedagem compartilhada

O erro de PHP ao ativar o Elementor Pro em hospedagem compartilhada acontece quando o servidor não atende aos requisitos do plugin: a versão do PHP esta abaixo de 7.4, a memória reservada por requisicao e baixa, ou o plugin base gratuito Elementor não esta ativo. O WordPress aborta a ativacao e mostra um erro fatal.

Atenção

Como corrigir a formatação de data do Date Field no ACF PRO

O formato de data errado no ACF date picker acontece quando o Return Format do Date Field não casa com o esperado no template: o ACF sempre salva a data como Ymd (20240101) no banco, então sem o Return Format certo a data sai invertida, em inglês ou como número cru.

Atenção

Como corrigir o erro de Export/Import com JSON corrompido no ACF PRO

O erro de export/import com JSON corrompido no ACF PRO ocorre quando o arquivo .json do grupo de campos chega malformado, sem a chave key esperada ou com modified inconsistente, fazendo o ACF recusar a importação ou não exibir a sincronizacao.

Grave

Como corrigir widgets do Happy Addons que não carregam no editor Elementor

Quando os widgets do Happy Addons não carregam no editor Elementor, o painel de elementos abre sem a seção Happy, em geral porque o recurso foi desligado no Feature Controller, porque o Elementor esta abaixo da versão 3.7.0 exigida, ou porque um erro de JavaScript no editor interrompe o registro dos widgets.

Grave

Como corrigir o conflito de JavaScript entre Ultimate Addons e WP Rocket

Widgets interativos do Ultimate Addons for Elementor param de funcionar no frontend quando o WP Rocket segura o uael-frontend-script.js pelo Delay JavaScript Execution ou o junta com outros arquivos pelo Combine JavaScript. A correção e excluir o script do plugin dessas otimizacoes e limpar o cache.

Setores

Extensões

Integrações

Como corrigir o erro de CSS no Customizer do Astra Pro

O que é o erro do Astra Customizer CSS que não aplica?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir a falha de upload de arquivos no JetFormBuilder

Como corrigir o erro de PHP ao ativar o Elementor Pro em hospedagem compartilhada

Como corrigir a formatação de data do Date Field no ACF PRO

Como corrigir o erro de Export/Import com JSON corrompido no ACF PRO

Como corrigir widgets do Happy Addons que não carregam no editor Elementor

Como corrigir o conflito de JavaScript entre Ultimate Addons e WP Rocket

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos