Solución de problemas de CSS

¿Ha creado CSS personalizado para sus formularios, pero no ha podido ver esos estilos al visualizar su sitio? Hay algunos problemas comunes que pueden causar que el CSS no aparezca correctamente en un sitio.

Este tutorial le mostrará las opciones para solucionar el problema de que su CSS no funcione y le ofrecerá posibles soluciones.

Caché del navegador

Los navegadores suelen almacenar en caché o temporalmente los recursos de los sitios web que visitas para mejorar la velocidad de carga. Algunos sitios también utilizan plugins para aumentar la memoria caché. A menudo, cuando no ves tus estilos personalizados en tu sitio, es porque el navegador u otro sistema ha almacenado en caché una versión anterior de tu sitio.

Aquí tienes un tutorial que te guiará a través de los principales pasos para limpiar la caché de tu sitio y de tus plugins.

Si borrar la caché del navegador no parece funcionar, aquí tienes un par de estrategias adicionales que puedes probar:

Probar otro navegador

Cada navegador guarda en su caché los sitios que visitas. Si abre su sitio en otro navegador (o en el modo privado que ofrecen algunos navegadores, como la ventana de incógnito de Chrome), a menudo podrá ver una versión no almacenada en caché de su sitio.

Preguntar al anfitrión si tiene caché

Algunos proveedores de alojamiento proporcionan caché para su sitio directamente en sus servidores, que es donde se almacenan los archivos de su sitio. Si no estás seguro, puedes ponerte en contacto con tu proveedor de alojamiento para preguntarle si almacena tu sitio en caché y, en caso afirmativo, pedirle que lo haga por ti.

Probar otra fuente de Internet

A veces, basta con cargar el sitio a través de una fuente de Internet diferente para saltarse una caché existente. Si tienes un dispositivo móvil con datos disponibles, la forma más sencilla de hacerlo es desactivar temporalmente el WiFi en tu dispositivo y volver a cargar la página.

Formato CSS no válido

El CSS debe estar escrito en un formato específico para que un navegador pueda entenderlo. Existen muchas herramientas en línea para comprobar que tu CSS es válido, incluido el Validador de CSS de W3School. Esta es una excelente opción si tienes mucho CSS personalizado y al menos un poco de experiencia previa creando CSS.

Sin embargo, si sólo utiliza una pequeña cantidad de CSS, a veces puede ser más fácil hacer una comprobación rápida del formato por su cuenta. Empecemos por ver un fragmento de CSS válido:

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

He aquí por qué este CSS es válido o "legible" por los navegadores:

• Formato correcto del selector: Si el selector incluye varias partes, debe escribirse de "mayor" a "menor". En el ejemplo anterior, div.wpforms-container-full es el elemento contenedor más grande del HTML, mientras que .wpforms-form está dentro de ese contenedor. El elemento más pequeño y último del selector, .wpforms-titleestá contenido dentro de los otros dos elementos. En cualquier otro orden, el navegador no podrá leer este selector.
• 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.
• Dos puntos y punto y coma: Asegúrate de incluir dos puntos (:) entre cada propiedad CSS y cada valor, y un punto y coma (;) después de cada valor para que el navegador pueda leer tu CSS (por ejemplo, font-size: 26px;).
• Uso correcto de los espacios en blanco: En general, CSS no es muy exigente con los espacios en blanco (que incluyen tabulaciones y espacios). Sin embargo, las unidades son una excepción. 26px funcionará, por ejemplo, mientras que 26 px no lo hará.

Para más información sobre cómo escribir CSS con la sintaxis adecuada, puedes consultar este tutorial de W3Schools.

Especificidad CSS

Dado que todos los temas y la mayoría de los plugins contienen sus propios conjuntos de estilos, a menudo te encontrarás con que tus estilos personalizados deben "competir" con los estilos existentes. En tales situaciones, el selector CSS más específico casi siempre ganará sobre un selector menos específico.

Por ejemplo, aquí está el CSS por defecto que establece el tamaño de fuente de los títulos de los formularios en WPForms:

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

Intentemos anular ese CSS para hacer la fuente más grande. Puede ser tentador usar un selector CSS corto como este:

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

Ese CSS es válido, pero sus estilos no aparecerán en el navegador. En su lugar, se aplicarán los estilos por defecto porque tienen un selector más específico. En su lugar, tendrá que utilizar el mismo selector, más largo que el estilo por defecto para su CSS personalizado:

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

Uso de !important en CSS

En algunas situaciones, puede forzar un fragmento de CSS menos específico para que funcione incluyendo la propiedad !important antes del punto y coma. Siempre es mejor probar primero con un selector más específico (como el descrito anteriormente), pero a veces esto puede ofrecer una solución rápida.

Es importante señalar, sin embargo, que la adición de la !important no siempre funcionará. Probemos este enfoque para el CSS que comentamos en el último ejemplo:

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

En esta situación, el navegador prefiere la especificidad del CSS predeterminado a la del !important por lo que este CSS no se aplicará a su sitio.

Veamos un ejemplo en el que se añade el botón !important regla hace trabajo. Por defecto, el asterisco (*) que marca un campo 'obligatorio' en WPForms será de color rojo:

Aquí está el CSS que crea ese estilo (#ff0000 es un código hexadecimal para el color rojo):

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

Queremos que estos asteriscos aparezcan en azul. Podríamos copiar el selector completo del CSS anterior, o podríamos utilizar un selector corto y añadir el carácter !important como en este fragmento de CSS:

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

Puede ser difícil saber si el !important regla funcionará, así que probablemente tendrás que intentarlo y probarlo.

Ya está. Hemos cubierto las estrategias de solución de problemas más comunes a utilizar cuando CSS no funciona. Si usted todavía está teniendo problemas con el estilo de su WPForms, por favor póngase en contacto con el soporte para que podamos ayudarle.

A continuación, ¿le gustaría personalizar aún más sus formularios? Echa un vistazo a nuestro tutorial sobre la personalización de campos de formulario individuales para más detalles y ejemplos.