Cambiar los colores al el gadget de posts populares.

Cuando os mostré el nuevo diseño os dije que haría una entrada contando cómo poder cambiar los colores del gadget de posts populares para que se adaptaran a los colores de vuestro blog, y no, no me he olvidado, así que ahí voy.



Creo que os comenté que el gadget no es mío (todavía no me atrevo con los javascripts) aunque sí adapté el resto: los colores, las fuentes y creo que moví un poco la transition. En fin, aquí podéis encontrar todo el código original, con unos colores muy de estuche de plastidecor. Teniendo en cuenta el aspecto pastel del blog, pensé en adaptarlos, y pdéis pensar que es como siempre y es un código hexadecimal en plan #333333 o #eeeeee o similar, pero no.


Veréis, en el código que os mostré tenéis que buscar este conjunto de líneas (están casi al final)

.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);} 
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);} 
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
 .PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);} 
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);} 
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);} 

¿Veis la parte que os he puesto en negrita? ¿esa serie de 4 colores? Esos son los que tenemos que cambiar. Puede darse el caso que solo os sepáis el código hexadecimal y no tengáis photoshop para cambiar a rgb, pero no pasa nada, porque hay páginas en internet que os dan la secuencia. Acabo de mirar y colourlovers, que viene muy bien para crear paletas de colores, tiene también la selección rgb al lateral. Si os preguntáis para qué sirve la a final, es para dar opacidad, por lo que 0.5 sería como el 50% de opacidad en photoshop, lo que permite que se vea el fondo de debajo. Podéis experimentar con ello, of course.
También podéis usar photoshop, pero es bueno saber que colourlovers tiene la opción.
Como veis es un tutorial muy sencillito, teniendo en cuenta que el trabajo ya nos viene hecho. Cambiar el resto es como siempre, buscar el font y poco más. Solo esta parte tenía un poco de misterio, y espero haber podido ayudaros con ella. Como supondréis, el código rgba se puede usar también en vez del hexadecimal. ¿Qué haríais con él?

Espero que la entrada os haya animado a cambiar el diseño del gadget de posts populares. ¡Hay muchos códigos pululando por ahí! Y si os ha gustado este, espero que seáis capaces de customizarlo sin mucho problema.

¿Cómo sería vuestro gadget de posts populares ideal? ¿Os ha gustado la entrada?

2 comentarios :

  1. No tengo ese gadget pero me guardo la entrada para modificarlo si lo pongo :)

    ResponderEliminar
  2. ¡Guau! Gracias por la entrada, la verdad es que está muy chulo el gadget de las entradas populares *-*. Me pasé y también está bien explicado todo jeje.

    Saludos.

    ResponderEliminar