Cuando abrimos un blog en lo primero que pensamos es en el diseño. Queremos tener el blog más bonito del mundo mundial y nos metemos en unos berenjenales…ainsss ¡qué valiente es la ignorancia!. Todavía recuerdo cuando cambié el formato del título de los widget de mamá ríe recién migrada a WordPress…¡sin saber apenas ni lo que era un widget! jajajaja. Pero que me puse me puse y vaya que si los cambié JA; fue poco más que el tipo de letra, el tamaño, el color…pero más contenta que unas castañuelas que me sentí cuando vi el resultado y sobre todo que lo había conseguido yo solita jejej.
En la prehistoria de los blogs modificar el código de tu plantilla era lo peor que podías hacer. Además de correr el riesgo de meter la pata hasta el fondo y cargarte el tema, ya eras prisionero para siempre de esa versión de tu tema WordPress puesto que si lo actualizabas perdías todos los cambios que habías hecho…¡y cómo resultaba tan fácil hacerlos!
La solución era crear un Child Theme o Tema hijo para hacer las modificaciones sobre él y no tocar el Tema Padre (algo que yo siempre he visto complicadísimo). O bien instalar algún plugin que ofreciese la posibilidad de introducir código CSS para títulos personalizado, como por ejemplo Jetpack o Simple Custom CSS.
Posteriormente fueron los mismos temas los que aportaban esta función.
Hasta que ha sido el propio WordPress (desde la versión 4.7) el que ofrece la opción de incluir modificaciones de CSS desde su personalizador y sin necesidad de instalar plugins externos.
También es verdad que las plantillas de ahora son mucho más versátiles, aunque sean gratuitas, permiten hacer más cambios de diseño de tu blog sin tocar nada de código CSS del tema.
Aun así, puede que tengas una plantilla más antigua de la que no quieres desprenderte y necesites tuneárla un poco, o igual una que no posibilita ciertos cambios en su diseño.
Vamos a empezar por algo muy sencillo pero que marca la diferencia (esto suena a slogan publicitario jejej). Por ejemplo, cambiar el formato del título de los widget. No es lo mismo un simple título del color que viene por defecto, que un título enmarcado, subrayado, centrado, del color de tu marca, el tipo de letra que te guste…
¿Te animas?…
Ve directamente a...
Cómo cambiar el Formato del Título de los Widget
¿Has visto la forma de los títulos de mis widgets en Mamá Ríe y aquí mismo en Crea y Gestiona tu Blog? En uno, el formato del título de los widget está sobre un fondo azul y en el otro los títulos están subrayados en rojo.
Haciendo un mínimo cambio en el código Css puedes tener en tu blog títulos bonitos bonitos y algo muy diferente a lo que ofrece tu tema por defecto.
Aunque haya que tocar el código CSS del tema, no te asustes, que como te he dicho, ya no es como antes.
Ve a tu Escritorio–Apariencia–Personalizar.
Has entrado a Estás personalizando (Nombre de tu blog), Tema activo (Nombre de tu tema). Baja y casi a final del todo verás CSS adicional.
Pincha y entrarás a Personalización CSS adicional. Aquí es cuando te da el patatús…jajajaj.
¿Qué y cómo pongo yo ahí un código que deje los títulos de mis widgets bonitos? Pues como ves aquí abajo. Ah y no olvides darle a Guardar publicar para lucirlos jejeje.
Tranquilo, que te paso el código 😉
Código CSS para poner los títulos de los widgets sobre un fondo de color
.widget-title {
color: #95b1c0; (color de letra del título)
text-align: center; (alineación del título)
font-family: ‘Open Sans’, Arial; (tipo de letra)
font-size: 25px; (tamaño de letra)
background: #e0ecf5; (color de fondo)
}
Código CSS para poner los títulos de los widgets subrayados
.widget-title {
color: #5D5968; (color de letra del título)
text-align: center; (alineación del título)
font-family: ‘Open Sans’, Arial; (tipo de letra)
font-size: 25px; (tamaño de letra)
border-bottom: 3px solid #dd1436; (grosor y color de la linea que subraya)
margin: 0 0 20px; (distancia del la linea que subraya a lo que tiene debajo)
padding: 0 0 20px; (distancia del la linea que subraya a lo que tiene encima)
}
Código CSS para poner los títulos de los widget enmarcados
.widget-title {
border: 1px solid; (grosor del marco o borde)
border-color: #f28a8b; (color del marco o borde)
font-size: 20px; (tamaño de letra)
color: #95b1c0; (color de letra)
letter-spacing: 2px; (espacio entre letras)
font-weight: 700; (grosor de la letra; más o menos negrita)
text-align: center; (alineación del título)
margin-bottom: 25px; (espacio entre el marco del título y el contenido del widget)
padding: 10px 0; (anchura de la caja formada por el marco)
}
He puesto en color azul mis aclaraciones, de lo que se trata cada cosa y en rojo lo que puedes modificar. Respeta los signos de puntuación, espacios…
#TipsparaBlogs: En el código CSS cada signo cuenta, asegúrate de copiar el código completo.
Como ves el color viene en código hexadecimal, pincha en el enlace y te llevará a una página donde puedes elegirlo y traducirlo al código HTML que solo tendrás que copiar y pegar. El nombre de las fuentes puedes mirarlo en Google font. Las demás propiedades es ir probando y modificando valores.
Te recomiendo que copies ese trozo de código en un Word o Bloc de notas antes de cualquier cambio, para que en caso de borrar algo sin querer, tenerlo en original para poder volverlo a poner tal y como estaba.
Y por favor, no olvides hacer una copia de seguridad antes de cualquier modificación que hagas en el blog por lo que pueda pasar.
Como ves no es nada difícil personalizar el formato del título de los widget y es un pequeño detalle que marca la diferencia ;). ¿Te animas?
“El diseño nos ha permitido destacarnos, ser distintos y mostrar esa diferencia de manera audaz”-Joe Mansueto
Hola buenos días estoy intentando cambiar el tamaño de la fuente del titulo de los widgets de mío pagina y no se realiza el cambio. Copio y pego donde indicas y no cambia, agradecido de antemano!!
Has borrado caché?
Si, pero sigo teniendo el mismo problema, no puedo personalizar
Jesús, tu tema no te da opción de hacerlo sin tocar el código? Si es así y aun los quieres más pequeños, mira que tiene puesto en dicha configuración del tema.
Buenos días, en verdad veo que este articulo me sirve para el problema que estoy teniendo, pero no se como llevarlo a cabo. Estoy creando un site y quisiera cambiarle el formato de mi pagina blog, especificamente al Widget de Featured content, pero no lo consigo. puedo enviarte la info por correo si te parece. El site aun no esta en linea, estoy trabajo de manera local hasta tenerlo terminado.
Hola Angel, no entiendo muy bien a qué le quieres cambiar el formato, a la imagen destacada? Qué tema utilizas? Has mirado en el personalizador?
Hola muy bueno me funcionó muy bien, salvo en la opción de enmarcar, no me pone el borde inferior que completa el rectángulo. También desearía que me envíes al e-mail la guía para los enlaces. Muchas Gracias
Hola Jorge, si me escribes un email con tu sitio web y el código que has puesto, podré ayudarte. Me dices también a qué guía te refieres?
Gracias a ti por la visita.
¡hola!… Me llamó la atención tu artículo porque estaba buscando algún material para ofrecer a un cliente que tiene ganas de aprender y, claro, yo no tengo demasiado tiempo para enseñar… Vi tu artículo compartido en Facebook por Nestor Marquinez, que es un as del eMail Marketing.
Me ha encantado tu artículo y me irá de perlas para darselo a mi cliente como material de estudio.
Pero me vas a permitir que te puntualice un par o tres de cosillas:
– En varios sitios utilizas la medida “px” para definir tamaños (de letra, de espacio, etc). “px” significa “píxeles de tamaño”. Esto es, si usas font-size:25px; quiere decir que la letrqa ocupará un tamaño de 25 píxeles del monitor indistintamente de cual sea la resolucion del monitor o el tamaño de la ventana. Esto conlleva un problema intrínseco: el tamaño de la letra no va a variar cuendo el diseño responsive se ajuste a cada monitor o a cada ventana. Podría llegar a descolocarse toda la página por esto.
Pero tiene remedio: Consiste en usar “medidas relativas” y hay una que es muy fácil de usar: la medida “em”. Este medida es el tamaño de una letra “eme” cuyo valor en píxeles se hereda del contenedor anterior. En tu caso, tu plantilla de wordpress establece al principio que el tamaño normal de una letra será de 18 píxeles (esta medida es la que tu wordpress ha seleccionado para mi monitor que es de 1980 x 1080 píxeles de tamaño y ha considerado que es el tamaño mas óptimo) y, a partir de ahí utiliza precisamente la medida relativa “em”.
Las medidas relativas permiten que el documento se ajuste al tamaño óptimo para cada monitor o ventana.
la forma de usarlo es muy sencilla: tan solo tienes que hacer unos cuantos ensayos hasta que te guste el resultado. Mira estos ejemplos para el estilo “font-size”:
font-size: 1em; (tamaño por defecto que se haya seleccionado para el monitor actual)
Font-size: .75em; (Tamaño 75% del tamaño por defecto)
Font-size: 1.75em; (Tamaño 175% del tamaño por defecto)
Donde pones “Font-size: 25px;” prueba a poner, por ejemplo font-size: 1.85em; y, si no se ajusta a lo que esperabas, prueba a subir y bajar el valor de “em”…
La medida relativa “em” la puedes utilizar en todos los sitios en los que pones “px”. Pero ten cuidado con las propiedades “margin” y “padding” porque la medida “em” va perfecta para el margen superior e inferior, pero para el margen derecho o el izquierdo es mejor tratarlos con otra medida relativa, la medida “%”. (No entro en ella ahora porque crecería demasiado este comentario)
Y, ya que te gusta experimentar, te voy a presentar una propiedad CSS que te va a gustar:
border-radius: 1em; (prueba a variar el valor de “em”)
Halaaaaa muchas gracias, ¿mi artículo como material de estudio? me alegra muchísimo que lo valores hasta ese punto.
En cuanto a la puntualización que haces sobre los tamaños, lo cierto es que no he notado mucho cambio en los dispositivos en los que lo he probado, no obstante lo tengo en cuenta y sigo haciendo pruebas, por supuesto actualizaré el post con esta información.
Muchas gracias por tu aportación.
Muchísimas gracias Carolina por el pedazo de artículo. Como bien dicen otros seguidores, es la primera vez que leo sobre css y no me da un patatús de mieditis jejeje
Gracias tb a Juan por la aclaración. Ando buscando info sobre estos cambios y ha sido de gran ayuda leeros a ambos.
Muchísimas gracias
Me alegro que te haya servido de ayuda. Poco a poco iré ampliando estas modificaciones sencillas y que pueden hacer cambiar el aspecto de un blog.
Muy bueno!
Siempre me gusta leer articulos que hablan sobre CSS. Por que si bien los temas actuales son cada vez mas personalizables, aun no te ofrecen la increible frexibilidad que te da el CSS.
Un saludo!! 😁
Hola Luis, la verdad es que esto del CSS engancha jejeje. Y el poder poner algo a tu gusto mola un montón.
Gracias
Genial! eso para los títulos, y los enlaces? Porque en uno de ellos los has puesto tambien con fondo de color.
Me alegro que te sea útil. Para los enlaces también muy fácil, te he pasado el código por mail 😉
Este tutorial me le había perdido???? Bueno pues hoy me lo estoy mirando a fondo y no te digo yo que no cambién los colores de mi blog en breve, jejeje
Un besote.
Si??? eso está bien, renovarse. Si necesitas algún otro código me silbas 😉
Qué profesional pareces, chica… yo te estaba leyendo y me asombraba de lo mucho que sabe la gente y lo tontilla que soy yo para estas cosas…
Pero bueno, me alegro de que tengas esta nueva sección, así si algún día me decido a cambiarme a .org ya sé donde mirar todos los truquillos jejeje
Jajajajaja profesional!!!??? si casi me vuelvo loca haciendo todas estas cosas!!! además se hacerlo porque una vez lo hice, me sacas de esto y nada de nada…
Claro tienes que cambiarte!!!!por supuesto con mi banner jajajaj tengo que aprovechar!!!
Tía, hace años que no toco hojas de estilo, vamos desde que dejé de trabajar en eso, hará… casi 10 años. Y lo tengo olvidadísismo. Esto me va a venir bien para recordar y reaprender. gracias!
Trabajabas en esto!!!??? anda pues ya se yo a quien preguntarle las dudas jejejej. No se yo lo de reaprender, eh!!??
Genial!! que buena idea que hayas creado esta sección!! estos trucos me resultarán muy útiles!
Me alegra que te guste!!! a ver si alguno que otro te sirve de algo, se intentará porque yo tampoco es que esté muy puesta.
Felicidades por esta nueva sección!! Me gusta mucho, gracias por este tutorial, me viene genial!!
Un abrazo!
Me alegro que te guste, son las cosas que he hecho yo, nada del otro mundo, pero si puedo ayudar a laguien explicándolo de forma sencilla…
Besossssssssss
¡Me ha encantado como lo has explicado!
Yo soy informática pero a la hora de explicar las cosas lo hago de forma bastante técnica así que no me entiende ni el tato jajaja. De hecho tengo una sección en el blog llamada “Utilidades para el blog” donde mi intención era una vez al mes publicar este tipo de cosas pero al final, escribo el post y al leerlo me da la impresión de que nadie lo va a entender así que no lo publico.
Si necesitas ayuda en alguna cosa de wordpress o redes sociales avísame, yo te cuento como se hace (lo que sepa claro que tampoco soy una superexperta jajaja) y luego tu lo cuentas para que lo entienda todo el mundo 😉 .
De verdad crees que se entiende bien!!??
Perdona que te diga, pero ese es el problema que tenéis todos los entendidos de este tema, que lo explicáis como pa’dentro jajajajaj y no nos enteramos de nada el resto de los mortales…
Te quiero en mi vida pero yaaaaaaaaaaaaaaa, me nombro tu traductora oficial jajajajajaj
Gracias por pasarte.
Si, es un mal que nos acecha jajaja. Aunque yo a fuerza de que los comerciales del trabajo se me queden mirando con cara de “¿que me estás contando?” intento explicar las cosas de forma más sencilla, pero reconozco que me cuesta bastante.
Pero ahora solucionado ¡ya tengo mi traductora oficial! 😉
Jajajaj me imagino a esos comerciales mirándote como si hablaras en chino!!!!
Mil gracias! Este finde intento ponerme a ello para dejar mi blog más bonito.
Ya sabes que tienes una fiel seguidora de esta sección, categoría o lo que quieras
Mil de nadas!!! no se si podrás, porque no se cual es tu plantilla, pero cualquier cosa que pueda aclararte, si sé…ya sabes donde encontrarme!!!
Ves? lo que te decía de que soy torpe! te he enviado el comentario sin terminar! Que no sólo te leeré con gusto en esta nueva categoría, sino que te abro un sitio de honor en mi lista de profes!
Uy lista de profes!!! mejor compañera de fatigas!!! jejejeje
Olé y olé!! Por fin alguien que me enseña una luz al final del túnel! Soy lo peor en informática, así que esperaré estos post con tus consejos como agua de mayo. hay bastantes cosas que quiero cambiar de mi plantilla pero entre mi torpeza y mi inglés a lo Paco Martínez Soria no me entero de ningún tutorial ( ni con el Google “transleit” en otra pestaña). Así
Jajajajaaj no lo tengo yo muy claro, lo mismo nos quedamos las dos atascadas en medio y a oscuras algún día!!!
Hija, es que los tutoriales ni aunque estén es español, shhhhhhh que no se entere nadie por si se enfadan, pero creo que lo hacena drede para que nadie sepa mñas que ellos…son seres superiores jajajajaj
Yo tampoco tengo ni idea, pero me encanta, así que pensé, por qué no compartirlo de forma fácil, tal y como yo lo he hecho!!??
Así que espero que os sirva de algo.