Resolução de Problemas de CSS

Criou CSS personalizado para os seus formulários, mas não tem conseguido ver esses estilos ao visualizar o seu site? Existem alguns problemas comuns que podem fazer com que o CSS não apareça corretamente num site.

Este tutorial irá guiá-lo através de opções para resolver por que o seu CSS não está a funcionar e oferecer possíveis soluções.

Cache do Navegador

Os navegadores frequentemente armazenam em cache ou guardam temporariamente recursos de sites que visita para melhorar a velocidade de carregamento. Alguns sites também usarão plugins para cache adicional. Frequentemente, quando não vê os seus estilos personalizados no seu site, é porque o navegador ou outro sistema fez cache de uma versão mais antiga do seu site.

Aqui está um tutorial que o guiará pelos passos principais para limpar o cache do seu site e dos plugins.

Se limpar o cache do seu navegador não parecer funcionar, aqui ficam algumas estratégias adicionais para tentar:

Experimentar um Navegador Diferente

Cada navegador mantém o seu cache dos sites que visita. Ao abrir o seu site num navegador diferente (ou no modo privado oferecido por alguns navegadores, como a janela de incógnito do Chrome), pode frequentemente ver uma versão sem cache do seu site.

Perguntar ao seu Provedor se Eles Têm um Cache

Alguns provedores fornecem cache para o seu site diretamente nos seus servidores, que é onde os ficheiros do seu site são armazenados. Se não tiver a certeza, pode querer contactar o seu provedor para perguntar se eles estão a fazer cache do seu site e, se estiverem, pedir-lhes para limpar esse cache por si.

Experimentar uma Fonte de Internet Diferente

Ocasionalmente, apenas carregar o seu site através de uma fonte de internet diferente pode ajudar a contornar um cache existente. Se tiver um dispositivo móvel com dados disponíveis, a forma mais simples de o fazer é desligar temporariamente o WiFi no seu dispositivo e recarregar a página.

Formato de CSS Inválido

O CSS tem de ser escrito num formato específico para que um navegador o possa entender. Existem muitas ferramentas online para verificar se o seu CSS é válido, incluindo o Validador CSS da W3School. Esta é uma excelente opção se tiver muito CSS personalizado e pelo menos alguma experiência prévia na criação de CSS.

Se estiver a usar apenas uma pequena quantidade de CSS, no entanto, pode por vezes ser mais fácil fazer uma verificação rápida do formato por si mesmo. Vamos começar por analisar um trecho de CSS válido:

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

Eis porque este CSS é válido ou 'legível' pelos navegadores:

• Formato de seletor correto: Se o seletor incluir várias partes, tem de ser escrito do elemento 'maior' para o 'menor'. No exemplo acima, div.wpforms-container-full é o maior elemento de contenção no HTML, enquanto .wpforms-form está dentro desse contentor. O menor e último item no seletor, .wpforms-title, está contido dentro de ambos os outros elementos. Em qualquer outra ordem, o navegador não conseguirá ler este seletor.
• Duas chavetas: Deve haver uma chaveta de abertura ({) logo após o seletor CSS e no final da lista de propriedades e valores. Esquecer essa chaveta de fecho (}) é um erro comum e geralmente impede que todo o CSS abaixo dela seja exibido no navegador.
• Dois pontos e ponto e vírgula: Certifique-se de incluir dois pontos (:) entre cada propriedade e valor CSS, e um ponto e vírgula (;) após cada valor para que o navegador possa ler o seu CSS (por exemplo, font-size: 26px;).
• Utilização correta de espaços em branco: Na maior parte do tempo, o CSS não é muito exigente quanto aos espaços em branco (que incluem tabulações e espaços). Uma exceção, no entanto, é para unidades. 26px funcionará, por exemplo, enquanto 26 px não.

Para mais informações sobre como escrever CSS com a sintaxe correta, pode consultar este tutorial do W3Schools.

Especificidade do CSS

Como todos os temas e a maioria dos plugins contêm os seus próprios conjuntos de estilos, irá frequentemente constatar que os seus estilos personalizados têm de "competir" com estilos existentes. Em tais situações, o seletor CSS mais específico quase sempre prevalecerá sobre um seletor menos específico.

Por exemplo, aqui está o CSS padrão que define o tamanho da fonte dos títulos dos 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 os seus estilos não serão aplicados no navegador. Os estilos padrão serão aplicados em vez disso porque têm um seletor mais específico. Em vez disso, teria de usar o mesmo seletor mais longo que o estilo padrão para o seu CSS personalizado:

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

Usar !important em CSS

Em algumas situações, pode forçar um trecho de CSS menos específico a funcionar incluindo a regra !important antes do ponto e vírgula. É sempre melhor tentar primeiro um seletor mais específico (como descrito acima), mas por vezes esta pode oferecer uma solução rápida.

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

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

Nesta situação, o navegador prefere a especificidade do CSS padrão à regra !important, pelo que este CSS não será aplicado ao seu site.

Vamos ver um exemplo onde adicionar a regra !important *funciona*. 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;
}

Queremos que esses asteriscos apareçam azuis em vez disso. Poderíamos copiar esse seletor completo do CSS acima, ou poderíamos usar um seletor curto e adicionar a regra !important, como neste trecho de CSS:

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

Pode ser difícil saber se a regra !important funcionará ou não, pelo que provavelmente terá de tentar e testá-la.

É isso! Cobrimos as estratégias de resolução de problemas mais comuns a serem usadas quando o CSS não está a funcionar. Se ainda estiver com problemas para estilizar os seus WPForms, por favor, entre em contacto com o suporte para que possamos ajudá-lo.

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