Le ha sucedido esto a usted? Instalas un complemento. Tiene la funcionalidad exacta que estás buscando. Pero… simplemente no se ve bien. Incluso después de cambiar todas las configuraciones, aún no se ajustará al estilo de su tema. Entonces, a pesar de lo bien que funciona, o estás un poco descontento o lo tiras a un lado y usas otra cosa.
Si es así, es posible que haya podido obtener lo mejor de ambos mundos utilizando CSS personalizado para diseñar su complemento. Los estilos CSS personalizados le permiten cambiar la apariencia de sus complementos, incluso si el desarrollador no ha incorporado opciones de estilo en la configuración del complemento.
Esta publicación se trata de mostrarle cómo agregar correctamente dichos estilos, para que siempre los mantenga seguros, incluso si actualiza o cambia su tema.
Los estilos CSS personalizados le permiten manipular la apariencia de sus complementos más allá de lo que el desarrollador agrega a las opciones del complemento. Hoy en día, muchos complementos premium incluyen opciones de estilo detalladas, pero los complementos gratuitos no siempre son completos en este sentido (si es que los incluyen).
Tome uno de los complementos más populares que existen: Formulario de contacto 7. Ofrece muy poco en cuanto a estilo. Pero, mediante el uso de CSS personalizado, puede cambiar completamente todos los aspectos de cómo se muestran los formularios.
Además, incluso los complementos con opciones detalladas no siempre le brindan la posibilidad de cambiar cada elemento de estilo que necesita modificar.
Entonces, al aprender un poco de CSS y cómo agregar ese CSS de manera segura a su tema, obtiene un nivel completamente nuevo de poder sobre cómo se muestran sus complementos a sus lectores.
Por qué es importante agregar CSS personalizado de la manera correcta
No desea ir agregando complementos de estilos CSS de cualquier manera. Como Nick mencionó en su publicación sobre temas secundarios , hay una manera correcta y una manera incorrecta de agregar CSS a WordPress.
Cuando agrega estilos CSS de la manera correcta, siempre estarán seguros, incluso si actualiza su tema, y podrá copiarlos y pegarlos fácilmente en un nuevo tema si alguna vez decide cambiar su diseño.
Por el contrario, agregarlos incorrectamente lo pondrá en riesgo de perder sus estilos debido a una actualización o cambio de tema.
Ahora, explicaré cómo agregar correctamente estilos de complementos CSS para Divi y otros temas de WordPress.
Dónde agregar estilos CSS de complemento en Divi
Para agregar de manera segura los estilos CSS del complemento a Divi, primero querrá ir a la pestaña «Opciones de tema» en su menú Divi:
Luego, en la pestaña «General» (que será la pestaña cargada por defecto), debe desplazarse hasta el final de la página. Allí, encontrarás un cuadro llamado «CSS personalizado»:
Técnicamente, todo lo que necesita hacer es ingresar su CSS de complemento personalizado aquí y hacer clic en «Guardar cambios». Pero, como queremos que sea realmente fácil mover o copiar todos los estilos de nuestros complementos, vayamos un paso más allá.
Debido a que es posible que ya haya agregado algunos fragmentos de CSS personalizados de Divi , es útil organizar el CSS personalizado en este cuadro. Para hacer eso, puede agregar un comentario que diga algo así como «Comience aquí los estilos CSS del complemento». Luego, solo agregaría los estilos CSS de su complemento debajo de esa línea.
Para agregar dicho comentario, todo lo que necesita hacer es copiar y pegar este código:
|
01
|
/* Plugin CSS Styles Start Here */ |
El comentario no afectará nada, pero ayudará a organizar sus diversos estilos CSS personalizados. Divi también mantendrá seguros tus estilos CSS personalizados durante las actualizaciones, para que no tengas que preocuparte por perderlos.
Dónde agregar complementos de estilos CSS para otros temas
Si está utilizando un tema diferente, generalmente querrá agregar los estilos personalizados de su complemento a la hoja de estilo de su tema secundario. Si no está utilizando un tema secundario, o no sabe qué es, definitivamente le recomiendo que cree uno y comience a usarlo (¡ así es como puede hacerlo! ).
Suponiendo que tiene configurado el tema de su hijo, puede modificarlo desde el panel de control de WordPress yendo a Apariencia> Editor :
Asegúrate de editar el tema secundario correcto. Debería ir a style.css por defecto. Si no es así, todo lo que necesita hacer es hacer clic en esa opción.
Luego, solo necesita agregar su CSS de complemento personalizado exactamente como lo discutí en la guía Divi anterior. Primero, cree un comentario de código a lo largo de las líneas de:
|
01
|
/* Plugin CSS Styles Start Here */ |
Luego, agregue todos sus estilos CSS personalizados debajo de esa línea:
Debido a que está trabajando en un tema secundario, sus estilos siempre estarán seguros, incluso si actualiza su tema. Y debido a que los ha comentado claramente, puede copiarlos fácilmente en un nuevo tema o en una instalación diferente de WordPress.
Ejemplo del mundo real: formulario de contacto 7
Para realmente llevar las cosas a casa, echemos un vistazo a un ejemplo del mundo real. Supongamos que desea diseñar un formulario para el Formulario de contacto 7 mencionado anteriormente . Instalaste el complemento y obtuviste un formulario básico como este:
Ahora, desea animar un poco las cosas agregando un borde negro a los campos del formulario. Puede ir a la hoja de estilo del tema de su hijo y agregar este código debajo del comentario de código que hizo (sugerencia: esta publicación es un excelente recurso para diseñar el formulario de contacto 7 ):
|
01
02
03
04
05
06
|
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 textarea{ border: 1px solid #000000;} |
Su CSS debería verse así:
Después de guardar la hoja de estilo y actualizar la página del formulario de contacto, debería ver esto:
¿Ves el nuevo borde negro? ¡Eso es todo al respecto!
Si está utilizando Divi, su código se vería igual, solo que en una ubicación diferente:
Por supuesto, esto es un experimento mental porque realmente no necesita un complemento de formulario de contacto con Divi . ¡Pero la misma idea funcionará con cualquier complemento al que necesite agregar estilos CSS personalizados!
Terminando
Agregar estilos CSS de complementos personalizados a WordPress es un proceso bastante simple. La parte más difícil es saber qué código CSS necesitas agregar. No se convertirá en un experto en CSS de la noche a la mañana, pero un buen lugar para comenzar a aprender CSS básico es w3schools . Y una buena manera de encontrar qué elemento de complemento necesita apuntar es la herramienta de inspección de elementos de Google .
Solo recuerde: mantenga siempre el CSS de su complemento personalizado en un área separada marcada con un comentario. De esa manera, siempre puedes encontrarlo. Y si está utilizando un tema que no sea Divi, asegúrese de mantener todos sus estilos personalizados en un tema secundario.
¿Tiene algún complemento de estilo CSS personalizado para compartir? ¡Me encantaría saber sobre ellos en los comentarios a continuación!
Imagen en miniatura del artículo de DreamUP / shutterstock.com