Como corrigir o CSS personalizado que não aplica no WPForms
O que é o CSS do WPForms que não aplica no formulário?
O WPForms carrega sua própria folha de estilo para garantir uma aparencia consistente do formulário em qualquer tema do WordPress. Quando você adiciona CSS personalizado, ele compete com esses estilos padrão: se o seu seletor for menos específico que o do plugin, o navegador aplica o estilo do WPForms e ignora o seu. Por isso o formulário abre com a aparencia padrão mesmo depois de você salvar o CSS. Não e um bug do plugin, e a regra de especificidade do CSS resolvendo o conflito a favor do seletor mais longo.
Como identificar
- O formulário abre com a fonte, cores e botão padrão do WPForms mesmo depois de salvar o CSS personalizado no Personalizar – CSS adicional.
- Ao inspecionar o campo no navegador, a regra do WPForms aparece ativa e a sua regra aparece riscada (sobrescrita).
- Você adiciona um !important no CSS e mesmo assim o estilo padrão do WPForms continua vencendo.
- O CSS funciona em uma janela anonima mas não na navegação normal, ou aparece em um navegador e não em outro.
Como prevenir
- Sempre inicie o CSS personalizado pela cadeia div.wpforms-container-full para igualar a especificidade padrão do WPForms desde o comeco.
- Mantenha o CSP de formulários em Aparencia – Personalizar – CSS adicional, num so lugar versionado, em vez de espalhado por campos.
- Após qualquer alteração de CSS, limpe o cache do plugin e do servidor para não testar uma folha antiga.
Causa
- Seletor do seu CSS menos específico que o padrão do WPForms: o plugin usa div.wpforms-container-full .wpforms-form .wpforms-title e o seu .wpforms-title perde a disputa de especificidade.
- Opção Include Form Styling em WPForms - Settings - General definida como Base and form theme styling, o tema de formulário mais agressivo que sobrescreve estilos do tema e do seu CSS.
- Cache do navegador, do plugin de cache ou do servidor servindo a versão antiga da folha de estilo, sem o CSS recem-adicionado.
- Sintaxe de CSS invalida: chave de abertura ou fechamento faltando, dois-pontos ausente entre propriedade e valor, ponto e virgula esquecido ou espaco dentro da unidade (26 px em vez de 26px).
- CSS personalizado colado dentro do formulário ou no Custom CSS de um campo em vez do CSS adicional do tema, sem o aninhamento de seletor necessário.
Como resolver
- Inspecione o campo e copie o seletor padrão: no navegador, clique com o botão direito no elemento do formulário e abra Inspecionar para ver qual regra do WPForms esta vencendo. Use exatamente a mesma cadeia de seletor, do maior container ao menor, como base do seu CSS.
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } - Iguale a especificidade no seu CSS: reescreva a sua regra com a cadeia completa do container, em vez de apenas a classe do campo, para que ela vença a regra padrão sem depender de gambiarra.
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 32px; } - Coloque o CSS no lugar certo: adicione o CSS em Aparencia - Personalizar - CSS adicional, e não dentro do formulário nem no Custom CSS de um campo isolado, para que ele carregue em toda página que exibe o formulário.
- Ajuste o Include Form Styling se o tema agressivo atrapalhar: em WPForms - Settings - General, mude Include Form Styling de Base and form theme styling para Base styling only quando o tema de formulário do plugin estiver sobrescrevendo o estilo do seu tema e o seu CSS.
WPForms - Settings - General - Include Form Styling: Base styling only - Limpe todos os caches e revalide a sintaxe: limpe o cache do navegador, do plugin de cache e do servidor, e confira se cada regra tem chave de abertura e fechamento, dois-pontos e ponto e virgula, sem espaco na unidade, antes de testar de novo.
/* CSS adicional do tema (Aparencia > Personalizar > CSS adicional). */
/* Igualar a cadeia de seletor padrao do WPForms vence sem !important. */
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 32px;
margin: 0 0 12px 0;
}
div.wpforms-container-full .wpforms-form input.wpforms-field-medium {
border: 1px solid #2563eb;
border-radius: 6px;
}
div.wpforms-container-full .wpforms-form button[type=submit].wpforms-submit {
background: #2563eb;
color: #ffffff;
}Perguntas frequentes
Por que meu CSS do WPForms não aplica mesmo salvo?
Coloquei !important e o estilo padrão do WPForms continua vencendo. Por que?
Onde devo colar o CSS personalizado do WPForms?
O que e a opção Include Form Styling do WPForms?
Mudar Include Form Styling para No styling resolve o conflito?
Meu CSS aparece em janela anonima mas não na normal. O que e isso?
Preciso editar arquivos do tema para estilizar o WPForms?
Como corrigir o progresso do aluno que não atualiza no Tutor LMS
O progresso do aluno no Tutor LMS não atualiza quando a página de curso fica em cache e a barra continua mostrando a porcentagem antiga mesmo depois de o aluno concluir a aula. Cache de página, requisição AJAX bloqueada e modo de conclusão sequencial são as causas mais comuns.
Como corrigir notificações de Q&A que não chegam aos instrutores no Tutor LMS
As notificações de Q&A do Tutor LMS não chegam aos instrutores quando o addon Email do Tutor LMS Pro está desligado, o gatilho New Q&A Message está desmarcado ou o site não tem um SMTP configurado para entregar o e-mail disparado quando o aluno faz uma pergunta.
Como corrigir o painel frontend que não carrega para instrutores no Tutor LMS
Quando o painel instrutor não carrega no Tutor LMS, o frontend dashboard em /dashboard abre em branco, sem cabeçalho e rodapé ou retorna 404. A causa quase sempre é o tema sobrescrever o dashboard.php sem a condição de get_header, a página do painel não estar atribuída ou permalink fora de Post Name.
Como corrigir relatórios que não exibem progresso no Tutor LMS
O relatório do Tutor LMS não mostra progresso quando o addon Reports (exclusivo do Tutor LMS Pro) está desativado, quando o aluno enviado é anterior à instalação do plugin ou quando o modo de conclusão Strict deixa cursos sem 100% por lições e quizzes pendentes.
Como corrigir HTTP error ao enviar imagem
O HTTP error ao enviar imagem é a mensagem genérica que o WordPress mostra quando o envio falha já dentro da Biblioteca de Mídia, depois de o arquivo chegar ao servidor. Na maioria dos casos é falta de memória PHP ou um problema no processador de imagem (ImageMagick) que trava na hora de gerar as miniaturas.
Erro de enrollment no Tutor LMS: aluno não consegue comprar o curso
O erro de enrollment no Tutor LMS acontece quando o aluno tenta comprar um curso pago e a matrícula não é concluída: o botão de compra não aparece ou o pagamento passa mas o acesso nunca é liberado. Costuma vir do produto WooCommerce não vinculado ao curso, do curso marcado como Gratuito ou do pedido que não chega a Concluído.
