Solução de problemas de CSS

Você criou CSS personalizado para seus formulários, mas não conseguiu ver esses estilos ao visualizar seu site? Existem alguns problemas comuns que podem fazer com que o CSS não seja exibido corretamente em um site.

Este tutorial abordará as opções para solucionar o problema de não funcionamento do CSS e oferecerá possíveis soluções.

Cache do navegador

Os navegadores geralmente armazenam em cache ou temporariamente os recursos dos sites que você visita para melhorar a velocidade de carregamento. Alguns sites também usam plug-ins para armazenamento em cache adicional. Muitas vezes, quando você não vê seus estilos personalizados no site, é porque o navegador ou outro sistema armazenou em cache uma versão mais antiga do site.

Aqui está um tutorial que o orientará nas principais etapas para limpar os caches do site e dos plug-ins.

Se a limpeza do cache do navegador não funcionar, aqui estão algumas estratégias adicionais que você pode tentar:

Experimentando um navegador diferente

Cada navegador mantém o cache dos sites que você visita. Ao abrir seu site em um navegador diferente (ou no modo privado oferecido por alguns navegadores, como a janela anônima do Chrome), muitas vezes é possível ver uma versão não armazenada em cache do seu site.

Perguntar ao seu host se ele tem um cache

Alguns hosts fornecerão cache para seu site diretamente nos servidores, que é onde os arquivos do site são armazenados. Se não tiver certeza, entre em contato com seu host para perguntar se ele está armazenando seu site em cache e, se estiver, peça que limpe esse cache para você.

Experimentando uma fonte de Internet diferente

Ocasionalmente, o simples carregamento do seu site em uma fonte de Internet diferente pode ajudar a contornar um cache existente. Se você tiver um dispositivo móvel com dados disponíveis, a maneira mais simples de fazer isso é desativar temporariamente o WiFi em seu dispositivo e recarregar a página.

Formato CSS inválido

O CSS deve ser escrito em um formato específico para que o navegador o compreenda. Há muitas ferramentas on-line para verificar se seu CSS é válido, incluindo o CSS Validator da W3School. Essa é uma excelente opção se você tiver muito CSS personalizado e pelo menos um pouco de experiência anterior na criação de CSS.

No entanto, se estiver usando apenas uma pequena quantidade de CSS, às vezes pode ser mais fácil fazer uma rápida verificação de formato por conta própria. Vamos começar examinando um trecho de CSS válido:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Veja por que esse CSS é válido ou "legível" pelos navegadores:

• Formato correto do seletor: Se o seletor incluir várias partes, ele precisará ser escrito do "maior" para o "menor". No exemplo acima, div.wpforms-container-full é o maior elemento de contêiner no HTML, enquanto .wpforms-form está dentro desse contêiner. O menor e último item do seletor, .wpforms-titleestá contido dentro de ambos os outros elementos. Em qualquer outra ordem, o navegador não conseguirá ler esse seletor.
• Two brackets: There must be an opening curly bracket ({) right after the CSS selector and at the end of the property and value list. Forgetting that closing bracket (}) is a common mistake, and will usually prevent all CSS below it from being shown in the browser.
• Dois pontos e ponto e vírgula: Não se esqueça de incluir dois pontos (:) entre cada propriedade e valor do CSS e um ponto e vírgula (;) após cada valor para que o navegador possa ler seu CSS (por exemplo, font-size: 26px;).
• Uso correto de espaços em branco: Na maioria das vezes, o CSS não é muito exigente com relação ao espaço em branco (que inclui tabulações e espaços). Uma exceção a isso, no entanto, são as unidades. 26px funcionará, por exemplo, enquanto 26 px não.

Para obter mais informações sobre como escrever CSS com a sintaxe adequada, consulte este tutorial da W3Schools.

Especificidade do CSS

Como todos os temas e a maioria dos plug-ins contêm seus próprios conjuntos de estilos, muitas vezes você perceberá que seus estilos personalizados precisam "competir" com os estilos existentes. Nessas situações, o seletor CSS mais específico quase sempre vencerá um seletor menos específico.

Por exemplo, aqui está o CSS padrão que define o tamanho da fonte dos títulos de formulários no WPForms:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
}

Vamos tentar substituir esse CSS para tornar a fonte maior. Pode ser tentador usar um seletor CSS curto como este:

.wpforms-title {
    font-size: 40px;
}

Esse CSS é válido, mas seus estilos não serão exibidos no navegador. Em vez disso, serão aplicados os estilos padrão porque eles têm um seletor mais específico. Em vez disso, você precisaria usar o mesmo seletor mais longo que o estilo padrão para seu CSS personalizado:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 40px;
}

Uso de !important em CSS

Em algumas situações, você pode forçar um trecho menos específico de CSS a funcionar incluindo o parâmetro !important antes do ponto e vírgula. É sempre melhor tentar um seletor mais específico (conforme descrito acima) primeiro, mas às vezes isso pode oferecer uma solução rápida.

É importante observar, no entanto, que adicionar o !important nem sempre funcionará. Vamos tentar essa abordagem para o CSS que discutimos no último exemplo:

.wpforms-title {
    font-size: 40px !important;
}

Nessa situação, o navegador prefere a especificidade do CSS padrão em vez do !important portanto, esse CSS não será aplicado ao seu site.

Vamos dar uma olhada em um exemplo em que a adição do !important regra faz trabalho. Por padrão, o asterisco (*) que marca um campo "obrigatório" no WPForms será vermelho:

Aqui está o CSS que cria esse estilo (#ff0000 é um código hexadecimal para a cor vermelha):

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
}

Em vez disso, queremos que esses asteriscos apareçam em azul. Poderíamos copiar o seletor completo do CSS acima ou usar um seletor curto e adicionar o !important como neste trecho de CSS:

.wpforms-required-label {
    color: #007acc !important;
}

Pode ser difícil saber se o !important A regra funcionará, portanto, você provavelmente precisará tentar e testar.

É isso aí! Cobrimos as estratégias de solução de problemas mais comuns a serem usadas quando o CSS não estiver funcionando. Se ainda estiver com problemas para estilizar seus WPForms, entre em contato com o suporte para que possamos ajudá-lo.

Em seguida, você gostaria de personalizar ainda mais seus formulários? Confira nosso tutorial sobre personalização de campos de formulários individuais para obter detalhes e exemplos.