Personalizar las viñetas del blog

, No hay comentarios.
Las propiedades CSS de las listas de viñetas son pocas pero podemos apoyarnos con imágenes para hacerlas más vistosas.
Una lista de viñetas puede formarse manualmente de este modo:
<ul>
<li>Artículo 1</li>
<li>Artículo 2</li>
<li>Artículo 3</li>
</ul>
O si lo prefieres puedes usar el botón del editor de entradas viñetas
La lista de viñetas clásica se ve de este modo:
  • Artículo 1
  • Artículo 2
  • Artículo 3
Pero eso no significa que tenga que verse siempre así. Podemos usar otras propiedes para darle otro aspecto.
Por defecto las viñetas usan la propiedad disc y se ven como en el ejemplo anterior. Otras dos propiedades que podemos usar son:
CircleSquare
  • Artículo 1
  • Artículo 2
  • Artículo 3
  • Artículo 1
  • Artículo 2
  • Artículo 3

Para cambiar la forma tradicional de tus viñetas por cualquiera de estas dos entra en Diseño > Edición de HTML y agrega esto antes de ]]></b:skin>:
.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
margin: 0;
padding: 0 0 0 10px;
}

Ahora donde dice none cámbialo por circle o square, el que más te guste.
O si lo prefieres puedes usar una imagen para hacerlo más vistoso.

En ese caso usarías este código:
.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
background:url(URL de la imagen) center left no-repeat;
margin:0;
padding:3px 3px 3px 20px;
}

Cambia lo que está en rojo por la dirección de tu ícono. Puedes ajustar las medidas de margin y padding hasta que quede bien ya que dependiendo de cada plantilla podrá verse más separado o más apretado.

Estas mismas propiedades puedes aplicarlas para las viñetas de la sidebar sólo cambia
.post ul {
.post ul li {

Por:
.sidebar ul {
.sidebar ul li {

Generalmente la barra lateral tiene otras medidas de espacio así que nuevamente tendrás que ajustar el margin y padding hasta que quede bien.

No hay comentarios. :

Publicar un comentario

Antes de comentar recuerda:
⇢ No se permite el uso de vocabulario inapropiado.
⇢ Se lo más especifico posible.
⇢ Si su comentario es una pregunta por favor sea paciente y será respondida dentro de las 24 horas por fedeemen o cualquier otro usuario.

Códigos para utilizar:
⇢ Para insertar un enlace, utiliza la etiqueta: <a href="URL">TITULO</a>
⇢ Para insertar un código, utilice la etiqueta: <i rel="pre">CÓDIGO</i>
⇢ Para insertar una imagen, utilice la etiqueta: <i rel="image">URL</i>
⇢ Para insertar un título, utilice la etiqueta: <b rel="h3">TEXTO</b>
⇢ Para insertar una nota, utilice la etiqueta: <b rel="quote">TEXTO</b>
⇢ Para insertar texto en negrita, utilice la etiqueta: <b>TEXTO</b>
⇢ Para insertar texto en cursiva, utilice esta etiqueta: <i>TEXTO</i>

¿De quien es esta página?:
⇢ Sluntamy fue creado el 25 de enero de 2010 por fedeemen.

Suscribirse a: Comentarios de la entrada ( Atom )

Últimos comentarios