Comprenderás que en primer lugar para poder hablar de Ideas para cambiar el CSS en tu WordPress deberás tener algunas nociones, incorporar algunos conceptos para poder trabajar. Esto lo tendrás que hacer con un poco de investigación/estudio del tema. Este post lo escribo partiendo de que ya sabes un poco de lo que vamos a hablar.
Existen varias fórmulas para modificar el CSS en tu WordPress, te voy a comentar algunas de ellas y luego entraré específicamente en el camino que he tomado yo para hacer mis propias modificaciones, al menos de momento.
Antes te he comentado que debes crear un Tema hijo antes de hacer ningún cambio, lo puedes ver en este enlace Importancia del Tema hijo en WordPress.
Y como siempre en informática hay mil y un caminos para llegar a Roma.
Que es CSS
CSS es la abreviatura para Cascading Style Sheets, en español Hojas de Estilo en Cascada y es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.
Se define en cascada porque el documento que modifiques aplicará el último cambio que encuentre en la hoja de estilos. La última regla especificada tendrá mayor prioridad. Por ejemplo si quieres cambiar el color de un botón y en una primera línea CSS encuentra:
button {
color: green;
}
Esta regla indicará a CSS que el color que queremos para ese botón es verde, pero si luego en las líneas siguientes encuentra:
button {
color: red;
}
El último cambio aplicado al botón será el que se muestre por lo tanto tu botón será rojo.
Por supuesto hay mucho más en CSS pero esto es una mera aproximación. CSS está muy vinculado con HyperText Markup Language HTML, lo que en español es Lenguaje de Marcas de Hipertexto. Ambos son archivos de texto plano.
HTML está compuesto por etiquetas: <body></body> o <p></p>, incluso el <button></button> de arriba, y selectores: clases, id´s, etc. En W3.org vas a poder acercarte a este tema y aprender bastante.
No podía dejar de darte una introducción al tema, al menos yo veo más sencillo y lógico saber de donde salen las cosas para poder comprenderlas mejor pero no me extiendo mucho más, lo que quiero es darte algunas ideas que me han funcionado. Es cierto que estos temas requieren mucho más tiempo.
Cambiar el CSS en tu WordPress
Esto sinceramente se ha convertido en un dolor de cabeza para mí. Después de toda la teoría te enfrentas al CMS de WordPress y como que no encuentras nada ni se aplica ninguno de los cambios que haces.
En primer lugar te voy a recomendar un plugin que he usado y por lo menos para probar las primeras cosas me dió resultado. Se llama Simple CSS y es muy sencillo de utilizar, una vez instalado tendrás una ventana donde dejar caer todo tu código y ver como se aplica.
La otra parte que veo inmejorable es que WordPress en estas últimas versiones ha incorporado una sección para modificaciones básicas de CSS. Llevo más o menos 10 años usando WordPress y al menos yo no lo había visto. Si vas a Apariencia-> Personalizar te abrirá el panel para hacer las modificaciones globales de tu tema. Al final de la lista tienes un apartado para CSS/JS personalizado.
Este método es el que estoy utilizando ahora. Antes he intentado modificar el archivo style.css del Tema hijo en localhost pero desde que subí el sitio a mi hosting real las modificaciones no se muestran. Es algo que tengo pendiente solucionar.
A lo que iba, si abres este panel encontrarás una sección en blanco y ahí puedes añadir todo el CSS que quieras.
Antes hablaba de un dolor de cabeza, te explico. Todo esto que te he comentado está muy bien y te facilita la vida la verdad. No sé, hoy pones un enlace de un color y mañana no te gusta. Hacer el cambio tan sencillo es una gozada.
El problema donde está
Como hemos dicho antes WordPress es un CMS, lo hizo otra u otras muchas personas y además sirve para crear un sinnúmero de sitios web diferentes. Por lo tanto tiene funcionalidades, prestaciones que quizás nunca vas a utilizar pero que están ahí y hay que lidiar con ellas.
Por eso a veces se recomienda hacer un sitio desde cero pero esto ya sabemos que encarece mucho el trabajo y además es probable que tengas que depender de un tercero para hacer cualquier modificación tonta.
Volviendo al problema, estas funcionalidades como decía sirven para muchas cosas diferentes y a veces entorpecen los cambios que quieres hacer así sean sencillos.
El mayor obstáculo que he confrontado está a la hora de encontrar el selector o la etiqueta que me modifica exactamente lo que quiero. Al final te voy a dejar un par de ejemplos de alguna cosita que he logrado cambiar a mi gusto.
El centro de este post es decirte que hacer tus personalizaciones se pueden convertir en horas invertidas solo para cambiar un color. La parte buena: la alegría de solucionar el cambio que querías y personalizar WordPress casi como si lo hubieras hecho de cero.
Algunas modificaciones comprobadas por mí
Te modifica el color de los enlaces, mira por ejemplo esta entrada de la Anécdota del Albañil o estos mismos enlaces.
.entry-content a {
color: #cfa40b;
}
Utilizo el plugin de Contact Form 7 y quise darle unos estilos al formulario de contacto.
.wpcf7 {
background-color: #f2f2e1;
border: 2px solid #eee;
padding:20px 10px 10px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
También quise cambiar el color y tamaño de los caracteres del botón del formulario de contacto.
.wpcf7 input[type=»submit»] {
background-color: #eded82;
color: #000000;
font-size: 20px;
}
Y finalmente aquí aplico cambios al botón de comentarios en cada una de las entradas.
.form-submit input[type=»submit»] {
background-color: #eded82;
color: #000000;
font-size: 20px;
}
Tip: puedes incluso cambiar el logo de WordPress de la pantalla de login.
