Sé de buena tinta lo que es cambiar el estilo CSS de una plantilla de WordPress “a mano” y puedo asegurarte que no es tan difícil como parece. Pero lo es menos aún si sigues estos consejos que te da Sergio Kolomiychuk, un crack del diseño en WordPress.
No pierdas detalle porque gracias a él parece que está chupao. 🙂
¡Te dejo con Sergio!
Personalizando el estilo CSS de tu WordPress
Estoy seguro de que en algún momento has querido cambiar el color, poner una imagen de fondo, modificar el tamaño del texto… y no has podido porque la plantilla no te da la posibilidad de hacerlo.
En este post te voy a explicar cómo modificar el estilo de tu web aunque seas un completo novato en WordPress y no tengas conocimientos técnicos. Eso sí, para personalizar tu plantilla vas a tener que hacer pequeños retoques de CSS.
Así que primero tienes que entender qué es y cómo funciona el CSS en WordPress.
🖌 ¿Qué es y cómo funciona el CSS en WordPress?
Las siglas CSS provienen del inglés Cascading Style Sheets, o lo que es lo mismo en español hoja de estilo en cascada. Seguramente te has quedado igual, jeje.
Resumiendo en pocas palabras, el CSS se encarga de dar estilo a los diferentes elementos HTML que componen una página web. Y funciona a base de selectores y propiedades.
Lo selectores sirven para indicar a qué elemento HTML se debe aplicar un estilo (propiedades).
Hay 3 tipos de selectores:
- Selector de elemento: hace referencia a una etiqueta HTML, en este caso a una etiqueta H1.
h1 { color:#FFFFFF; font-size:36px;}
- Selector de ID: sirve para seleccionar un elemento específico, por lo que el id debe ser único.
#contacto { color:#333; background-color:#FFFFFF; }
- Selector de clase: selecciona el elemento HTML con una clase específica. Éste es el selector que más se utiliza.
.boton {color:#FFFFFF; background-color: red; }
El selector .boton hace referencia a todas las etiquetas HTML que tengan asignada la clase “boton” e indica que deben tener las propiedades de:
· color: #FFFFFF; ▸ (color de texto blanco ya que #FFFFFF en hexadecimal equivale al color blanco)
· background-color: red; ▸ (color de fondo rojo)
Por ejemplo, esta etiqueta HTML <a class=”boton”> tendría el estilo definido en .boton.
Cada plantilla de WordPress tiene, por obligación, una hoja de estilo llamada style.css donde está definido el aspecto de la misma a base de selectores y propiedades que acabas de ver.
La gran ventaja de CSS es que está planteado para que sus propiedades sean sobrescritas. Esto quiere decir que si tu plantilla tiene definido que el color de las etiquetas H1 sea blanco, tú puedes simplemente sobrescribir esa propiedad sin alterar el archivo style.css original.
🖌 Cómo modificar el estilo CSS de tu plantilla WordPress
Te dejo el vídeo que he preparado y en el que te explico cómo modificar el estilo CSS de tu plantilla WordPress:
O si lo prefieres, aquí tienes también por escrito todos los pasos necesarios. 🙂
🔸 Cómo usar el Inspector de Elementos de Google Chrome
Para sobrescribir el estilo de tu plantilla primero hay que identificar el elemento que quieres modificar y su selector/clase.
Para ello tendrás que usar el “Inspector de elementos” de tu navegador.
El inspector de elementos es una herramienta que tienen todos los navegadores como FireFox, Internet Explorer (o como lo llaman ahora: Edge) y Google Chrome entre otros.
Lo que te permite es ver el código HTML y CSS de cualquier página web.
Te recomiendo que uses el de Google Chrome porque es el que me parece más completo y fácil de interpretar.
Para abrir el inspector de elementos puedes usar la tecla F12, el atajo de teclado Ctrl+Mayús+i o haciendo clic derecho sobre el elemento que te interesa modificar y en la opción de “Inspeccionar“:
Menú “Inspeccionar” en Google Chrome
Yo utilizo este último método porque así me sitúa directamente en elemento de la web que me interesa. De la otra forma tendría que navegar por toda la estructura de la web hasta encontrar el elemento que quiero modificar.
Cuando lo abras, te saldrá un panel en el navegador en el cual verás, por un lado todo el código HTML, y por el otro el estilo de la página (CSS). Aunque al principio pueda parecer un poco complejo realmente es bastante sencillo de utilizar.
Inspector de elementos de Google Chrome
Al pasar el ratón por la parte de código verás que se van resaltando los diferentes elementos de la web. De esta forma puedes localizar el elemento que quieres modificar.
Una vez que lo tengas seleccionado, en el panel de CSS verás los selectores que afectan a ese elemento y sus propiedades.
En el panel de CSS puedes hacer pruebas modificando las propiedades que aparecen o añadiendo nuevas.
No tengas miedo de hacer todos los cambios que quieras, ya que estos no se guardan. Al actualizar la página (F5) todo volverá a su estado original.
Cuando inspeccionas elementos tipo menús, enlaces, botones o cualquier elemento que tenga el efecto hover (quiere decir que su estilo cambia al pasar el ratón por encima) hay un problema: el estilo que tienen cuando pasas el ratón por encima no se muestra en el panel de CSS salvo que efectivamente pases el ratón por encima.
Para evitar esto puedes fijar el estado de cualquier elemento haciendo clic derecho sobre él y marcando el estado en el cual lo quieres fijar.
Hay 4 estados diferentes:
- Active ▸ es el estado en el que se encuentra el elemento desde que el usuario presiona el botón del ratón sobre él hasta que lo suelta (por ejemplo un botón).
- Hover ▸ es el estado en el que se encuentra el elemento mientras el usuario coloca el puntero sobre él (por ejemplo un menú).
- Focus ▸ es el estado en el que se encuentra el elemento cuando recibe el foco del usuario seleccionándolo con el teclado o con el ratón (por ejemplo un campo de un formulario).
- Visited ▸ es el estado en el que se encuentra el elemento cuando el usuario ya ha hecho clic en él (por ejemplo un enlace).
Ejemplo del estado hover en el inspector de elementos
Una vez que lo marques permanecerá con ese estado y podrás ver las propiedades CSS que tiene entonces.
🔸 Añadir y sobrescribir CSS en WordPress
Ahora que ya sabes identificar los elementos y sus selectores puedes pasar a modificar las propiedades de los mismos.
El método para hacerlo es bastante sencillo.
Consiste en sobrescribir las propiedades de los elementos que quieres modificar sin alterar el archivo original style.css de la plantilla. Porque si modificas directamente el fichero style.css, al actualizar la plantilla todos esos cambios se perderán (a menos que uses un tema hijo).
Lo que yo hago es usar un plugin que me permite añadir CSS propio, de esta forma no tengo que modificar el archivo original. También existen plantillas que incluyen la posibilidad de insertar CSS propio sin tener que recurrir a plugins, aunque la mayoría no tienen esa opción.
El plugin que suelo utilizar es Simple CSS. Con él puedes añadir CSS desde el “customizador” de WordPress y ver los cambios en vivo.
Editor de estilos del plugin Simple CSS
Todo el CSS que añadas aquí se guardará en la base de datos y los cambios no se perderán al actualizar la plantilla.
Supongamos que tienes el siguiente blog y quieres añadir un borde, cambiar el color del texto y redondear las esquinas de cada post:
Ejemplo de personalización del estilo de un blog
Primero tendrías que identificar la etiqueta HTML que engloba cada post y la clase CSS que tiene. Eso se haría con el Inspector de Elementos.
Selección de la etiqueta HTML con el Inspector de elementos
Como puedes ver en la imagen he seleccionado la etiqueta HTML que engloba todo el post, y es la que me interesa modificar. En este caso es una etiqueta <div> con las siguientes clases CSS:
.separate-containers .inside-article {
background-color:#FFFFFF; ▸ (color de fondo)
color:#3a3a3a; ▸ (color de texto)
}
Ahora sólo hay que copiar estas clases dentro de Simple CSS y añadir las propiedades correspondientes para cambiar su estilo.
El código sería algo parecido a esto:
Código en Simple CSS
Y éste sería el resultado:
Cambio de estilo CSS en WordPress
Como ves, el estilo ha cambiado correctamente. Pero analicemos este código primero:
- He añadido dos propiedades nuevas que no estaban: border y border-radius.
- Y he sobrescrito la propiedad de color a #555 (gris clarito).
Y así ha quedado tan requetebien. 🙂
👀 ¡Ojo!
En algunos casos los estilos de la plantilla tienen mayor prioridad y tus cambios de estilo no se tomarán en cuenta.
En ese caso habría que usar unos selectores de mayor especificidad o usar la etiqueta !important.
Te lo voy a explicar de la forma más simple posible ya que es importante que lo entiendas, porque vas a tener que recurrir a estos métodos.
Fíjate en el código CSS que he añadido:
.separate-containers .inside-article {
color: #555;
border: 2px solid #888;
border-radius:10px;
}
He utilizado dos selectores/clases CSS: “.separate-containers” seguido de “.inside-article”.
Con esto estoy diciendo que: dentro de la etiqueta HTML que tenga la clase separate-containers, la etiqueta HTML que tenga la clase inside-article tiene el siguiente estilo: color:#555 border: 2px solid…
Al ser tan específico, ese estilo tiene mayor valor/prioridad que si lo pusiera de esta otra forma:
.inside-article {
color: #555;
border: 2px solid #888;
border-radius:10px;
}
En este segundo código no hay ninguna condición, simplemente estoy asignando un estilo a una clase.
Entonces, si uso este segundo código con las propiedades border y border-radius no tendría problema, ya que éstas son nuevas y no sobrescriben ningún otro estilo sino que lo añaden.
En cambio, la propiedad de color sí que sobrescribe el estilo de la plantilla. Pero no siempre lo hace, porque si el estilo de la plantilla tiene mayor valor, no te va hacer ni puñetero caso. 🙁
Esto es lo que se llama especificidad en CSS.
Si ves que la plantilla no está cogiendo tus estilos personalizados intentar ser más específico con tu código CSS.
La otra solución es usar la etiqueta !important.
La etiqueta !important sirve para dar prioridad a tus estilos personalizados por encima del resto. Básicamente al usar esta etiqueta estás diciendo “- Lo que yo diga va a misa” y te saltas todas las reglas de CSS. 🙂
Aquí tienes un ejemplo de su uso:
.inside-article {
color: #555 !important;
border: 2px solid #888;
border-radius:10px;
}
El uso de esta etiqueta realmente no es una buena práctica ya que rompe el comportamiento natural de CSS. Mi consejo es que si la puedes evitar, mejor; pero tampoco va pasar nada malo si la usas.
Es sólo que está pensada para que se use en casos especiales, cuando no hay más remedio.
Cambiar el CSS de una página específica de WordPress
Otro de los motivos por el cual utilizo Simple CSS es porque permite modificar el estilo de una página o post en concreto, sin que afecte al resto de la web.
El procedimiento es el mismo que he explicado antes pero con una pequeña diferencia. El CSS no lo debes introducir en Apariencia->Simple CSS sino dentro de la página o post del que quieres cambiar el estilo.
Cuando estés editando una página o post, abajo verás un panel que se llama “Simple CSS”:
Añadir CSS a una página o post específico
Así, todo el CSS que introduzcas ahí solo afectará a la página que estés editando en ese momento. 🙂
¿Cómo insertar CSS en los post de WordPress directamente?
Hasta ahora has visto cómo alterar el estilo de tu plantilla mediante CSS. Pero también puedes crear estilos nuevos y aplicarlos donde quieras.
Imagínate que quieres añadir un enlace de descarga en uno de tus posts, pero que ese enlace tenga el aspecto de un botón. Lo puedes hacer de forma muy sencilla mediante CSS personalizado siguiendo estos pasos:
1) Dentro de Simple CSS tienes que crear una clase con el estilo de tu botón. Yo voy a crear una clase que se llame “mi-btn“ con el siguiente estilo CSS:
/* Estilo del botón */
.mi-btn {
background-color: #3AC569;
margin-right: 10px;
padding: 12px;
border-radius:4px;
color:#fff !important;
}
/* Efecto hover (al pasar por encima del botón) */
.mi-btn:hover {
-webkit-transition: all 60ms ease;
transition: all 0.5s ease;
opacity: .85;
}
Si te fijas, he añadido la etiqueta !important para que mi estilo sobrescriba el color por defecto de los enlaces.
2) Ahora que tienes el diseño del botón definido, sólo hace falta añadir la clase “mi-btn” a un enlace dentro del post.
En el editor del post entra en la pestaña HTML y busca el enlace al cual le quieres añadir el nuevo estilo tipo botón. Te recomiendo usar el buscador del navegador (Ctrl+f) para encontrarlo fácilmente, ya que en modo HTML es más complicado localizar las cosas al ser todo texto plano.
En mi caso he creado un enlace con el texto “Descargar PDF“.
Editando el estilo CSS en un enlace de un post en WordPress
Ahora añade class=”mi-btn” dentro de la etiqueta <a> tal y como aparece en la imagen.
Así es como quedaría el enlace:
<a class=”mi-btn” href=”http://localhost/wordpress/post-2/”>Descargar PDF</a>
3) Guarda los cambios y observa el resultado:
Resultado del estilo CSS personalizado tipo botón
Si lo has hecho correctamente deberías ver un botón parecido al de la imagen.
Es un método bastante sencillo de insertar CSS en los posts de WordPress sin usar ningún plugin.
🔸 Ten cuidado con ciertas propiedades CSS
Cambiar la apariencia de tu plantilla modificando el CSS es relativamente fácil, pero con ciertos elementos tienes que tener cuidado porque te puedes cargar la estructura de la web.
Ten en cuenta que el CSS además del aspecto visual también se encarga de dar estructura a tu web, y puedes “romper” el diseño de la web si alteras ciertas propiedades como:
- width
- heigh
- padding
- margin
- position
- display
- entre otras…
Estas propiedades controlan el tamaño y la posición de los diferentes elementos de la web.
Si decides cambiar alguna de ellas asegúrate después de comprobar que tu web se ve correctamente en las diferentes resoluciones y que tus cambios no hayan alterado más cosas de la cuenta. 🙂
Lo digo porque puede que aparentemente se vea todo bien, pero si te vas a la página del blog o a alguna entrada concreta es posible que pasen cosas “raras”. También comprueba la web desde dispositivos móviles e incluso en diferentes navegadores.
Sobre todo debes tener un especial cuidado con los menús.
Por otro, lado las propiedades como:
- color
- background
- text-family
- border-radius
- font-size
- box-shadow
- transform
- entre otras…
En principio no deberían causarte problemas al cambiarlas.
🔸 Alternativas en forma de plugins
Aunque usar el Inspector de elementos es bastante fácil, a veces es un poco complicado encontrar la clase correcta del elemento que quieres modificar. Además, quieras o no tendrás que aprender algo de CSS.
Para eso existen algunos plugins que ya se encargan de buscar el selector correcto y todo el código CSS lo introduces de forma visual.
Básicamente puedes cambiar el estilo de tu plantilla a golpe de clic.
SiteOrigin CSS
Un excelente plugin para añadir CSS propio a WordPress.
Con él puedes editar el estilo de tu plantilla de forma visual y ver los cambios en vivo. Sólo tienes que seleccionar el elemento que quieres modificar, cambiar sus propiedades y el plugin se encargará de generar el código CSS necesario.
Si acabas de empezar con WordPress o tienes cero conocimientos técnicos y todo esto te suena a chino, te recomiendo empezar con este plugin.
Lo puedes descargar totalmente gratis desde el repositorio de WordPress:
CSS Hero
Este sería una solución más profesional ya que es de pago y cuenta con opciones avanzadas. Al igual que con el SiteOring CSS, puedes modificar el estilo de forma visual.
CSS Hero guarda el historial de tus modificaciones, cuenta con estilos prediseñados que puedes aplicar directamente a los elementos, te permite exportar tus estilos y reusarlos en otras webs, añadir animaciones, es compatible con las plantillas y plugins más populares de WordPress, etc.
En general es un plugin mucho más completo y enfocado a un uso más profesional:
Estas son las dos alternativas que yo conozco. Pero tengo que decirte que no utilizo ninguno de los dos porque me resulta más fácil trabajar directamente con el Inspector de elementos.
Además, hay cosas a las que los plugins no llegan y toca hacerlo de forma manual sí o sí. 🙂
🖌 Extensiones para analizar el estilo de una web
Un poco de ayuda siempre viene bien, ¿verdad? Pues aquí te dejo una lista de las extensiones para Google Chrome que utilizo yo:
Sin duda es la extensión que más utilizo. ColorZilla te permite sacar el color de cualquier elemento de la web con un clic. Además, guarda un historial de los colores que has sacado para no tener que volver a buscarlos.
Muchas veces me pica la curiosidad de saber qué tipografía usan otras webs. Con esta extensión puedes averiguar rápidamente la tipografía de una web simplemente pasando el ratón por encima y haciendo clic.
Lo que hace esta extensión es redimensionar tu navegador a una resolución determinada. De esta forma puedes comprobar cómo se ve tu página en las diferentes resoluciones de pantalla y ver si tienes que corregir algo.
Esta extensión no la utilizo tanto como las anteriores pero en ciertos casos puede ser bastante útil. Lo que te permite es agregar estilos CSS y con un botón ver el antes y el después.
Todo el CSS que agregues a esta extensión permanecerá guardado en la propia extensión, por lo que si actualizas la página tus cambios de estilo se mantendrán (esto resulta muy útil para hacer pruebas). Y una vez lo tengas todo listo y sin errores, lo aplicas a la web tal como te he explicado antes.
🖌 Recursos y herramientas online para generar CSS
Si quieres añadir algunos estilos un poco más avanzados, como por ejemplo degradados, transiciones o sombras, te resultará más fácil si utilizas alguna herramienta online para generar el código.
Te lo digo porque estas propiedades son más complejas de configurar y necesitan de un código extra para que además sean compatibles con los diferentes navegadores.
Aquí van algunos ejemplos:
En esta página web podrás generar sombras, degradados, texturas de ruido y bordes redondeados de forma visual.
Es muy fácil de usar, y una vez que hayas terminado solo tienes que copiar el código y añadirlo a tu web como te he explicado en los apartados anteriores.
Es una herramienta parecida a la anterior pero con algunas funcionas más, como el generador de transiciones y text-shadow entre otras de menor importancia.
Codepen es un excelente recurso donde los usuarios suben códigos relacionados con el diseño y desarrollo web.
Lo bueno es que puedes ver todo el código y ver cómo funciona. Puedes encontrar botones, menús, degradados… Ideal para coger ideas.
🖌 Recursos para aprender CSS online
Si quieres profundizar en el tema y aprender más sobre HTML y CSS te recomiendo estas dos webs:
Es una plataforma de formación online gratuita (también cuenta con un plan de pago) donde puedes aprender a usar HTML y CSS de forma muy práctica.
Además, resulta bastante entretenido porque te dan logros y puntos por completar los ejercicios. Parece que no, pero al final te enganchas y te pones hacer un ejercicio detrás de otro hasta terminar el curso. 🙂
En esta web encontraras toda la información y ejemplos prácticos sobre cada etiqueta y propiedad de HTML y CSS. Así que si tienes alguna duda, recurre a esta web primero.
🚩 Resumen final
Como ya has visto hay varias formas para cambiar el estilo de tu página web, ya sea usando el Inspector de elementos o mediante plugins. Pero también me gustaría destacar la importancia de una buena plantilla que puedas “customizar” sin apenas tener que recurrir a estos métodos.
Ten en cuenta que cuanto más “visual” sea una plantilla, más complicado te resultará modificar su estilo. Al estar, digamos “cargada de CSS”, es más complicado sobrescribir las propiedades y localizar el selector correcto.
Si estás buscando una plantilla te invito a que leas mi review sobre GeneratePress. Es la plantilla que utilizo en mi web y que siempre recomiendo ya que es muy versátil y fácil de customizar.
Es una especie de Genesis 2.0.
Mi consejo es que vayas probando a hacer cambios, y poco a poco le irás pillado el truco a cambiar el CSS de plantillas en WordPress. Y si aprendes un poco de CSS y HTML, mejor que mejor.
Espero que te haya servido este tutorial, y si tienes alguna duda estaré encantado de ayudarte. 🙂
uyuyu uyyyyy, que esto me dá a mi que en el curro me va a venir de lujo
Yeahhhhh 😎
Hola muchas gracias por la información, tengo un sitio web que la plantilla original solo me permite poner imagenes y deseo agregar texto en la hompage por cuestion de seo. Me podrias orientar para poder hacerlo. Gracias!
www . edgarhermosillo . com . mx este es el sitio
Hola Edgar, si tu plantilla no te permite meter texto en la portada seguramente tengas que modificar el código de la misma. O también podrías crear una página de inicio personalizada utilizado algún page builder. Con solo modificar el CSS no se puede hacer lo que quieres. ¡Un saludo!
Hola. Acabo de llegar a este tu artículo y me parece fantástico. Algunos de tus ejemplos ya los conocía ya que los utilizo. Otros me los cojo, jejeje. Pero a lo que iba. Uno de mis blogs, aunque la tengo ya activa, sigo maquetando cosas en función de las necesidades. Pero, lo que no he podido modificar es la plantilla de búsqueda que me genera con los resultados a través del widget por defecto de buscar. Mi tema es el SuperMag y tengo tanto el search.php como el searchform.php pero no sé por dónde. Utilizo Elemento para maquetar. Podría crear alguna plantilla con él, para que lo utilizara en lugar del que viene por defecto con mi tema ? muchas gracias y felicidades por el blog.
Excelente este post. Lo debo releer ya que me gustaría añadir un degradado tipo botón amazón a los botones que genera el Ultimate Shortcode… ¿Para ese caso que me recomendarías? Saludos
Hola, creo voy hacer una pregunta (que creo va ser) muy estúpida
Para utilizar cualquiera de estas posibilidades hay q tener como mínimo el plan Business, no?
Un saludo
No hay preguntas estúpidas @caminandovoy:disqus !
Creo que hablas del plan Business de WordPress.com ¿verdad? La cosa es que lo que aquí explica Sergio es sobre todo del WordPress libre y gratuito que te puedes instalar en tu propio hosting (el de WordPress.org). Pero sí, en los planes de WordPress.com sería a partir del plan Premium que es el que te deja modificar ya estilos CSS.
Mira, te dejo también este post donde explico las diferencias entre los 2 tipos de WordPress: https://miposicionamientoweb.es/diferencias-wordpress-com-wordpress-org/
Ya me contarás!
Hola, lo que hace siteorigin es lo que necesitaría si este plugin tambien me sirviera para editar el css de un página de categoría que muestra los post de esa categoria, pero este plugin solo sirve para editar el css de páginas. Me podeis ayudar, no encuentro la forma de editar el css de la página de categoría 🙁 gracias
Buenas Vic!
Quizá @sergiokolomiychuk:disqus tenga alguna solución mejor, pero yo lo haría directamente con el inspector de elementos como explica Sergio, visitando la categoría en cuestión y viendo qué clases CSS aplica en esa categoría por ejemplo en la etiqueta body y trabajar a partir de ahí. No sé si SiteOrigin permite editar eso en la página de categoría…. 🙁
En fin, si encuentras alguna cosa mejor nos dices!
Hola, Rubén. Gracias por tu respuesta. No, siteorigin no permite hacer eso en la pagina de categoría. Es que se me da un poco mal el inspector porque modifico algo de css y se modifica en todos sitios. El código no es lo mío y se lo justito 😉
Hola, estoy tratando de quitar un espacio en blanco que aparece entre el menú superior y las entradas de mi página de inicio y no sé cómo hacerlo. Agradecería muchísimo la ayuda, es la web de un cole y necesitamos que estos días esté atractiva para nuestro alumnado. Muchas gracias.
Hola Dolores,
Sin saber cuál es la web es difícil decir. Ese espacio seguramente sea algún “margin” o “padding” que tengas que modificar.
Un saludo.
Aunque sigo teniendo problemas para cambiar propiedades de algunos elementos, por ejemplo ciando cambian al pasar el mouse y tal… si bien lo mencionas, a mi no me muestra la propiedad de color amarillo para ubicarla poder cambiarla (o no la estoy encontrando) y tampoco me doy cuenta de dónde está el código para copiarlo cuando modifico las medidas de borde en el diagrama de la derecha que te muestro en la imagen.
Si se te ocurre qué es lo que hago mal, me vendría genial la ayuda!! Gracias!!!
Listo… ya solucioné
Hola Serena, me alegro de que te haya servido.
Sin saber cual es la web, no te puedo decir por qué no se aplica ese cambio.
Puede que sea por hay algún otro !importantat, haya otra clase con más prioridad o puede que tenga estilo css en línea.
Si me dejas la web le puedo echar un vistazo.
¡Un saludo!
Muchas gracias por la explicacion. Felicitaciones
Una pregunta,
¿Es posible introducir un icono de fontawesome antes de cada h3? Configurarlo para que cuando se escriba un título h3 aparezca el icono configurado en el plugin de simple css o en el editor de la propia plantilla.
Muchísimas gracias por el artículo!
Hola Carla, se puede hacer usando el selector ” :before “, pero tienes que tener cuidado, porque si lo aplicas mal todos los H3 de la página llevarán un icono. Cosa que igual no te interesa.
Aquí tienes más info sobre ese selector y cómo se usa.
https://www.w3schools.com/cssref/sel_before.asp
En principio no es necesario que utilices el plugin de Simple CSS, lo puedes añadir en Apariencia -> Personalizar -> CSS adicional
Lo más fácil es lo que dice @rubenalonsoes:disqus, meter el emoji o icono que quieras a mano.
Un saludo.
Muchas gracias, en principio lo voy a hacer a mano y también probaré usando ese selector, así practico tocar los css, un saludo!
Buenas @disqus_svqNYvSfzs:disqus !
Hasta donde yo sé, puedes meter tú mismas ese icono sin problema (yo suelo meter iconos y emojis en los títulos de hecho), lo que no tengo tan claro es que el plugin te lo haga automáticamente, pero juraría que no… 🙁
Gracias Rubén, los pongo a mano pero como introduzco ese icono en todos h3 he pensado hacerlo así para ahorrar trabajo. Gracias!
Muchas gracias por esta información tan completa. Me apunto este sitio para visitarlo más a menudo.
Tengo una pregunta, si subo un themes (formato zip) con un editor visual (en este caso: https://themesgenerator.com/) ¿podría realizar el mismo proceso para editar el CSS? Sería increíble si se pudiera hacer igual.
Muchas gracias por la ayuda!! =)
Hola Esther, no he probado el editor que comentas(bastante interesante, por cierto), pero en principio no deberías de tener ningún problema en aplicar lo que he explicado en el post. ¡Un saludo!
Tengo una duda, es legal hacer esto? modificar el código del tema, lo pregunto por todo este tema del copyright o derechos de autor claro en el caso de estar haciendo una web para un negocio o empresa formal.
Legal 100%, esto se trata de adaptar el estilo de la plantilla a tus necesidades o a las del cliente. No estás revendiendo la plantilla.
Gracias por el tutorial. Se puede cambiar cosas de sitio usando este método? Por ejemplo mover la casilla de “buscar” a la esquina derecha superior , etc?
Hola, para hacer ese tipo de cambios probablemente tengas que modificar también el código de la plantilla.
Saludos.
Y como…?((
Hola!
Tengo un problema, me da miedo tocar el código porque estoy aún muy pegado en estos temas…no obstante necesito cambiar el color del texto del sidebar de mi web porque es muy suave y apenas se ve. He leído tu post y me surgen muchas dudas. No porque no esté bien explicado sino por mi ignorancia en este tema. Tengo que cambiar el número del color donde dice margin-botton?
Gracias
Hola José,
Para cambiar el color tendrías que modificar la etiqueta “color” de la clase css correcta. Sería algo tipo color:#333;
La de margin-bottom es para cambiar el margen.
¡Saludos!
Sergio te felicito, es el mejor artículo que he leído sobre modificación de WordPress. Es súper claro y didáctico!!! He aprendido mucho con tus explicaciones.
Yo hice un curso de programación web pero nunca había hecho un trabajo real. Por primera vez estoy haciendo una página web con WordPress. Pero las vistas que me envió el diseñador, tienen cosas que me parecía imposible hacer con el tema de WordPress que ellos compraron. He pasado mucho trabajo para hacer las modificaciones.
Tu artículo me ayudó un montón!!!
Eres mi héroe!!!
Gracias por tu generosidad al compartir todo esto con los novatos como yo 🙂
Hola Olga,
Muchas gracias por ese comentario que anima mucho a seguir creando contenido 🙂
Me alegro de que te haya servido y lo hayas podido aplicar en tu proyecto.
¡Un saludo!
Hola Segio y Rubén.
Este buen post me ha motivado para probar las extensiones que mencionas y para meterme con el CSS de mi wordpress.
Tengo una cuestión para resolver: He introducido un determinado código en la ruta: Personalizar-apariencia-editor-Editor stylesCSS. Concretamente este es el código:
h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a {font-size: 18px !important;}
Este es un código que uso para que todos los encabezados tengan el mismo tamaño. Pues bien si lo introduzco en la ruta indicada no funciona…Ahora bien, si lo pongo en CSS adicional si funciona…
¿Cómo es posible?
Igual pasa con otros códigos…Se supone que no tendría que haber diferenciación entre colocarlo en un sitio o en otro…
Gracias y un saludo.
Hola Luis (9 meses después, sorry),
Yo lo he probado y me ha funcionado de ambas formas.
Asegúrate de que editar el archivo style.css has seleccionado la plantilla que tienes activa desde el editor, porque igual has metido el css en otra plantilla que tengas instalada en tu WP.
Y también lo ideal es que pongas tu código CSS al final del archivo.
Si te sigue pasando, ya habría que investigar un poco a ver cual podría ser la causa.
De todos modos te recomiendo añadir el css personalizado desde Apariencia -> CSS Adicional siempre que no sean muchas líneas de código.
¡Un saludo!
Hola,
Felicitaciones por el artículo. El motivo de este comentario es pedirte asesoramiento sobre un tema que está retrasando el lanzamiento de mi web. Resulta que en la versión móvil y responsive de la web, al abrir los menús desplegables las letras aparecen de un color gris claro sobre fondo naranja, algo muy difícil de leer. He intentado encontrar el CSS para modificarlo y nada. No sé donde se encuentra el CSS de la versión móvil, aparentemente en el bloque principal de código de la web no está. He probado con más de diez plugins para modificar la apariencia de mi web en dispositivos móviles y tablets con un rotundo fracaso (me gustaría también que el logo de la versión móvil fuera otro).
En fin, el tema me está devorando horas, retrasando el lanzamiento del sitio y cargando de frustración. Cualquier consejo que puedas darme será bienvenido. Muchísimas gracias por tu tiempo y atención.
Saludos.
Hola Claudio,
Modificar el css de la versión móvil es algo más complicado, sin saber cual es tu web no te puedo ayudar mucho.
Si quieres hablamos por twitter(@malagaware) y le echo un vistazo a tu web.
¡Un saludo!
excelente articulo. super claro.
Me fue de gran ayuda.
Una consulta, me baje una plantilla de wordpress.org y solo quiero modificar colores de cabecera, colores de iconos de los widgets, tipo de fuente, entre otras.
Ya identifique donde tengo que hacer los cambios, la pregunta es si todo el código para sobre escribir el css lo debo poner en CSS adicional que en este caso mi plantilla lo trae en la opción personalizar. Esto que estoy haciendo esta correcto? voy a tener algún problema de carga?
o lo debo modificar en el mismo style.css y ya no podré actualizar la plantilla para no perder lo que hice.
Agradezco tu respuesta.
Me alegro de que te haya servido @ernestoluyo:disqus.
¡Un saludo!
Una consulta, me baje una plantilla de wordpress.org y solo quiero modificar colores de cabecera, colores de iconos de los widgets, tipo de fuente, entre otras.
Ya identifique donde tengo que hacer los cambios, la pregunta es si todo el código para sobre escribir el css lo debo poner en CSS adicional que en este caso mi plantilla lo trae en la opción personalizar. Esto que estoy haciendo esta correcto? voy a tener algún problema de carga?
o lo debo modificar en el mismo style.css y ya no podré actualizar la plantilla para no perder lo que hice.
Agradezco tu respuesta.
Añádelo a CSS Adicional y te va funcionar todo perfecto. Al actualizar no se te va perder nada.
No sé qué plantilla estás usando pero te recomiendo probar con Astra WP, GeneratePress o Ocean WP. Tienen bastantes opciones de personalización, asé que no vas a tener que tocar tanto css.
¡Un saludo!
Es el mejor artículo y la mejor explicación que he leído en mi vida para aprender a hacer algo… Increíble trabajo que has hecho para hacernos la vida más fácil a los que no somos unos genios (de momento jeje) de la programación web. De verdad, solo con darte las gracias me quedo corto. Tienes un suscriptor vitalicio.
Este @sergiokolomiychuk:disqus es un puñetero crack, doy fe. 🙂 Todo el mérito es suyo!
Gracias por comentar @disqus_8r3dOC5Yf6:disqus, da gusto cuando contenido como éste ayuda a otros, de verdad.
Saludos.
Gracias @rubenalonsoes:disqus, con tanto comentario positivo por la mañana me motivo ejej
¡Un saludo!
Hola Daniel,
Muchas gracias por tu comentario, no todos los días se recibe uno así. Son de los que te animan a seguir aportando 🙂
Me alegra de que te haya servido el tutorial. En mi canal de YouTube encontrarás más vídeos que igual te interesan también.
¡Un saludo y muchas gracias!
Excelente explicación.
Pero, si me lo permitís, haré un par de puntualizaciones:
PRIMERA:
hablas de modificar el aspecto de una caja utilizando
border:2px; que establece un borde de dos píxeles de ancho, y
border-radius:10px; que redondea las esquinas de la caja con un radio de 10 píxeles.
En el resto del artículo muestras varios fragmentos mas de código CSS y en todos he visto que se emplea como medida el pixel, o sea, px.
Yo nunca uso la medida px. Solo la uso para el borde de la caja. para el resto de propiedades con medida, el radio del borde, márgenes, paddings, etc, uso la medida “em” o la “rem”.
Un Css mío podría ser:
border: 1px;
border-radius:.5em;
“em” es una medida relativa que se refiere al tamaño que tiene la letra “m”dentro de la caja cuyas propiedades CSS estamos modificando. “rem”, por su parte, es el tamaño de la primera letra “m” que se haya utilizado en las propiedades de la etiqueta “body”, (root-em).
Así “.5em” es la mitad de una “m”, o “2.75em” es dos veces y tres cuartos el tamaño de la “m”.
Por otra parte, para las medidas relativas al ancho de las cajas, incluso la de body, empleo como medida “x%”, por ejemplo height:80%; , ancho 80% de lo disponible. (“lo disponible”hace referencia a la caja contenedora de la actual caja)
¿que ventajas tiene esta forma de actuar?: una muy grande, que al cambiar de resolución de la ventana del navegador NO HAY SORPRESAS INESPERADAS.
SEGUNDA:
La mejor manera de aprender informática, desde luego, es trasteando. Pero, de vez en cuando también es conveniente organizarse un poco y adquirir conocimientos ordenados. Sinceramente creo que si te has lanzado a la aventura de tener un blgo y has llegado al punto de que quieres hacer cambios en el estilo, las formas y personalizar cada vez mas tu CMS, yo no te aconsejaría para nada empezar a usar plugins y mas plugins… Me plantearía mejor que ya es hora de aprender HTMl y CSS en serio., En un par de meses puedes adquirir una base sólida y después utilizar plugins, localizar elementos, escribir estilos propios, etc se te hará la mar de fácil.
PERO, POR OTRA PARTE: yo vivo de que mucha gente crea que no necesita para nada conocer PHP, HTML, CSS, jQuery, AJAX, … antes o después la lían, el sitio se les desmanda, las ideas que tienen no pueden llevarlas a la práctica y… entonces… llego yo y me gano un dinerito…. jajajajajaaj!!!!!…. Así que me desdigo de todo lo que he dicho antes y os invito a todos a que useis todos los plugins que existan ene le mercado hasta que se os sature el servidos!!!!
Jajajaja, y por esto mismo eres tan crack. 🙂
Efectivamente yo @juanncarlosmartinezalvarez:disqus no hace mucho que conocí el tema de la medición “em” cuando cambié de theme porque también me pegué mucho con lo del responsive… Muy buen apunte.
Aunque es verdad que para alguna cosas uso medidas fijas en px aunque cambie la resolución (mientras no sea mucho…). Luego si pega un salto importante esa resolución sí que cambio el tamaño de nuevo y todo ese jaleo.
Lo que está claro es que si la gente busca a un experto, con este comentario ya sabrán que ése eres tú! jejeje.
Un abrazo y gracias como siempre maestro!!
Usar “em” es una buena práctica lo que pasa que muchas plantillas todavía no utilizan esta medida. Y para hacer algunos cambios sencillos pues utilizo las medidas que ya usa la plantilla, que por lo general son pixeles. Más que nada para no tener una cosa en px otra en em y que al final tenga ahí un lío con las medidas.
Además, a un usuario normal los “pixeles” puede que le suenen pero “em o rem”, olvídate.
Y aunque utilices em o % no significa que no la vayas a liar, siempre te puedes llevar alguna SORPRESA.
Lo de aprender PHP, HTML, AJAX… no todo el mundo tiene ganas ni tiempo para aprender todo eso. Muchos usuarios lo que quieren es simplemente cambiar el color de fondo, tipografía o algo por el estilo. No buscan convertirse en desabolladores web.
En cualquier caso buen aporte con el tema de las medidas “rem”, todo lo que sea seguir las buenas prácticas ayuda.
¡Un saludo!
A fuego este post, muy bueno el pecador de la pradera, jajajja
Jejeje, siempre uso chiquito ipsum. Los clientes se parten con esos textos de relleno. Saludos!
Impresionante artículo, lo que me hacía falta. Con relación al plugin SiteOrigin CSS, al teclear Custom CSS y entrar en la personalización de las páginas, desde FIREFOX sí me ha permitido editar el CSS del blog. Eso sí, aparece una etiqueta que me indica Navigate to:. También tengo que acceder así a cada post.
Muchas gracias por la entrada.
Hola @disqus_BlxVxypPh3:disqus me alegro de que te haya gustado el artículo y sobre todo de que lo puedas aplicar en tu blog. ¡Un saludo!
¿El ultimo plugin para editar css como se llama? No lo dijiste en el video y me interesa probarlo. Muchas gracias.
Hola Joan, creo que te refieres al CSS Hero. Tienes el enlace en el post. Con el tema del Black Friday ahora tiene un descuento del 60%. Un saludo!
Bien, ahora es cuando me toca aplicar a mi todo esto a blogger!! 🙂
Por suerte la mitad del artículo me sirve, y la otra mitad también (quitando los plugins).
Yo soy muy de toquetear la verdad (el css me refiero ehhhh)
y sí, coincido soy muy fan de colorzilla aunque he de decir que desde que me he “operizado” utilizo colorpicker!
Un saludo y gran articulo.
Me alegro de que te sirva. A mí también me gusta toquetear( el CSS claro..) jajaj.
Yo soy más de colorzilla, pero la otra también es una buena opción.
Un saludo!
¿blogger también esta disponible como CMS descargable?… Es que si no, no veo como vas a poder trastear con todo el CSS. yo lo máximo que he logrado es editar los gadgets e incluir estilos mediante style=” lista de propiedades css separadas por punto y coma “…. Claro que tampoco es que me haya matado mucho hacerlo, la verdad.
Sergio, excelente post, muy clarito y bien explicado para los que no se manejan con el CSS. Rubén, muy buen invitado, Sergio es un tio grande capaz de hacer muy buenos contenidos, como ha quedado demostrado. Enhorabuena a los dos, un abrazo! 🙂
Gracias @disqus_Fpgy9bD521:disqus !
La verdad es que @sergiokolomiychuk:disqus está claro que es un crack, y da gusto contar con invitados así. 🙂
Un saludo!!
Gracias los dos @disqus_Fpgy9bD521:disqus y @rubenalonsoes:disqus por esos comentarios que animan muchísimo a seguir con el blog. La verdad es que tal como maqueta Rubén los posts parecen otros, yo me sorprendí cuando lo vi. La técnica esa de los recuadritos e iconos me la apunto.
Arturo tu blog lo tengo en mi lista de guest posts. Así que, que no te sorprenda que te haga una propuesta en un futuro.
Un abrazo!
Muy buen post @rubenalonsoes:disqus y @sergiokolomiychuk:disqus .
De los “marrones” que me hubiera librado si este post lo llego haber leído mucho antes….jajajajajja. Pero bueno, se dice que se aprende a base de leche tras leche, y revisar mil y una páginas.
El FileZilla y el WhatFont son un must para mí.
Por cierto, otra página para aprender CSS, HTML, Java o lo que queráis de temas de código de programación es CódigoFacilito, son una brutalidad, sus cursos son súper intuitivos y además tienen la versión gratuita que es muy, pero que muy completa.
Abrazos.
Gracias @carlosmiana:disqus !
Te pasa como a mí, que he aprendido esto a base de tortazos, jajaj. Y sí, muy fan de WhatFont. 🙂
Un abrazo!
Sí, los de CódigoFacilito son la caña, llevo suscrito a su canal de YouTube desde que empezó casi. Ya tienen ahí todo una plataforma de formación. Muy recomendable.
@carlosmiana:disqus @rubenalonsoes:disqus Parece ser que a todos nos gusta espiar la tipografía de las webs ajenas jeje
Un saludo y gracias por el comentario Carlos!
Impresionante!! esto no es un simple post, jeje esto es un curso CSS!! jaja. Me ha gustado mucho, muy buen trabajo chicos.
Yo utilizo el Inpector de elementos y el Código fuente de la página, que ahí me viene todo lo que busco, porque a veces no encuentro en el Inspector lo que busco y aquí sí me viene. Se tarda más en encontrar la parte que busco, pero me ayuda a ver cómo se pone cada cosa, ahora que estoy aprendiendo, meteré la pata un montón!! pero así también se aprende.
Las webs que indicas para ejercicios CSS y HTML las tengo que echar un vistazo, porque yo utilizo tutellus que vienen bastantes cursos en vídeo por temáticas, pero si hay más webs donde elegir, pues mejor. Muchas gracias por la ayuda.
Por cierto Rubén, a mi tampoco me ha dejado darte las estrellas, pero vamos que te doy 5!!..jeje 😉
Ya Sí funciona!!
Gracias por comentar @rociorogf:disqus ! Voy a ver si saco un rato y miro lo de las estrellas. Lo importante es que te haya gustado y te sirva el post, jeje.
Un abrazo.
Me alegro de que te haya gustado @rociorogf:disqus La web de tutellus no la conocía, le echaré un vistazo. Un saludo!
Burrada de post! Qué bien me habría venido en mis tiempos mozos jejeje
A favoritos para repasarlo punto por punto, que a veces las plantillas se me resisten.
Por cierto Rubén, no puedo votar en las estrellitas de valoración, ¿la caché te está bloqueando el js??
Un saludo!
Sin duda, eso mismo le dije a Sergio antes de haberme cambiado a Genesis, que me hubiera venido de perlas en vez de aprender a bofetones, jeje.
Pues el caso es que a mí me ha dejado puntuar @brunoramoslara:disqus, pero voy a hacer una limpieza de la caché de esta URL a ver por si acaso… Gracias por el aviso!
Un abrazo.