Cambiar los iconos de los gadgets en las Vistas Dinámicas

Pese a que las plantillas de Vistas Dinámicas no son 100% personalizables hay quienes prefieren usarlas por la forma como se muestran las entradas. Y aunque no se puedan personalizar del todo hay ciertas cosas que sí podemos modificar, en este caso veremos cómo cambiar los iconos de los gadgets de la sidebar.

Los iconos originales de estas plantillas son blancos, y muy sobrios. No hay nada de malo en ello, pero quizá muchos quieran añadir unos iconos mas acorde a la temática del blog, o al gusto del autor. Así que vamos a ver cómo cambiarlos.

¿Recuerdas la entrada para poner iconos en el gadget de Páginas? Pues el método es el mismo, usaremos el selector :nth-of-type para encontrar el gadget de la sidebar y reemplazar su imagen.

Lo único que tienes que hacer es ingresar a Plantilla | Personalizar | Avanzado | Añadir CSS, ahí agrega lo siguiente:

.ss, #gadget-dock > div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(6) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(7) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(8) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(9) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(10) .gadget-icons img {
display: none !important;
}

#gadget-dock > div:nth-of-type(1) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(2) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(3) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(4) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ya sólo deberás poner la URL de las imágenes donde se indica. La primera URL corresponde a la imagen del primer gadget, la segunda al del segundo gadget y así sucesivamente.

El código está preparado para los cuatro primero gadgets de tu sidebar, si tuvieras más sólo añade un fragmento como este por cada gadget extra que tengas:

#gadget-dock > div:nth-of-type(5) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ese será para el quinto gadget, si tuvieras un sexto agrega otro fragmento igual y cambia el 5 por 6, etc.

TRUCO EXTRA

Si quieres mantener siempre visible la sidebar agrega este código:

#gadget-dock {
right: 0!important;
}

Como puedes ver no es nada difícil cambiar los iconos de las Vistas Dinámicas y lo mejor es que no tenemos que meternos con el HTML si no que lo hacemos todo únicamente con CSS.
Cambiar los iconos de los gadgets nos da la posibilidad de tener un blog más personalizado y único, ¿no crees?