En una entrada anterior, veíamos como personalizar los enlaces de las etiquetas, usando caracteres Unicode, también habíamos visto como personlizar los enlaces de las etiquetas con viñetas, usando los valores de la propiedad list-style-type, ahora veremos como personalizar la viñeta, usando una imagen.
Usar una imagen como viñeta, tiene la ventaja de que, en todos los navegadores lucirá siempre igual, a diferencia de los caracteres Unicode, que tienen algunas pequeñas variaciones de como se muestran, dependiendo del caracter, por ejemplo, algunos de ellos, en Internet Explorer se ven un poco dentados cuando estos tienen alguna inclinación.
Otra ventaja de esto es que podemos usar cualquier imagen que se nos antoje, y que se adapte más al diseño de nuestra plantilla para que luzca más mono, y crear algún efecto hover interesante.
Hay 2 formas de hacer esto, una es usando la propiedad list-style-image, y la otra es colocar una imagen como fondo.
Veamos como hacerlo:
Usando la propiedad list-style-image
Paso 1. Vamos a Diseño ► Diseñador de plantillas ► Avanzado► Añadir CSS, y agregamos en el campo correspondiente el siguiente código, asegurándose de dar enter después de la llave de cierre, "}", por ejemplo, para que este sea interpretado, o bien, lo pegamos en la edición de HTML de la plantilla antes de ]]></b:skin>, y esto pensando que es tu primer widget de Etiquetas, si es el segundo será #Label2, y así sucesivamente...
#Label1 ul li {
list-style-image: url(imagen.png);
}
Nota: Como no agregué ninguna otra propiedad, los enlaces de las etiquetas heredaran los estilos definidos en la columna lateral en donde se encuentren.
Hay que sustituir imagen.png, por la imagen que vas a usar.
Paso 2. Checamos en vista previa y si todo luce bien, guardamos los cambios.
El resultado sería algo como esto:
- Etiqueta 1
- Etiqueta 2
- Etiqueta 3
Usando una imagen como fondo
La otra forma, es agregar una imagen de fondo, la diferencia de la forma anterior es que, de este modo podemos mover más facilmente la posición de la imagen que vayamos a usar, y lo hacemos así:
#Label1 ul li {
list-style: none;
background: url(imagen.png) no-repeat left center;
padding: 4px 0 4px 14px; /*padding para mover el enlace de la lista y por ende ubicar mejor la imagen*/
}
Podemos agregar efecto hover, cambiando la imagen:
#Label ul li:hover{Para recrear por ejemplo este efecto:
background: url(imagen.png) no-repeat left center;}
TIPS: Pueden personalizar cualquier lista de su blog, utilizando el Id del widget al que quieren aplicar esto.
Por ejemplo, si quieres aplicarlo al widget de lista de enlaces, entonces en lugar de #Label1, usaríamos:
#LinkList1
El Id del widget, lo podemos saber, yendo a la edición de HTML de tu plantilla y con la ayuda de Ctrl F, buscas el título que le pusiste al widget, vamos a pensar que al widget de las etiquetas le pusimos Categorías, el Id, esta dentro de la misma linea de código:
<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>
Como puedes ver el id de las Etiquetas, a la cual le pusimos como título Categorías, es Label1.
Así de fácil y rápido :).
El Id del widget, lo podemos saber, yendo a la edición de HTML de tu plantilla y con la ayuda de Ctrl F, buscas el título que le pusiste al widget, vamos a pensar que al widget de las etiquetas le pusimos Categorías, el Id, esta dentro de la misma linea de código:
<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>
Como puedes ver el id de las Etiquetas, a la cual le pusimos como título Categorías, es Label1.
Así de fácil y rápido :).
Para más información de la propiedad list-style-image, puedes visitar:
No hay comentarios:
Publicar un comentario