Personalizar las listas numeradas del blog

, No hay comentarios.
Estas listas se forman así mediante HTML:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>

O también podemos usar el ícono del editor de entradas icono lista ordenada

Por defecto una lista numerada usa la propiedad decimal y se ve de este modo:
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Pero hay otras propiedades que podemos aplicar para cambiar la forma que se muestran los números. Existen varios estilos para las listas ordenadas pero nos enfocaremos en 5 distintas: upper-roman, lower-roman, upper-latin, lower-latin, decimal-leading-zero.

upper-romanlower-romanupper-latinlower-latindecimal-leading-zero
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4


Para cambiar tus listas numeradas del blog por uno de estos estilos entra en Diseño > Edición de HTML y agrega esto antes de ]]></b:skin>:
.post ol li {
list-style: decimal;
margin: 5px 0 0 20px;
padding: 0;
}

Cambia lo que está en color rojo por el estilo que quieras para tus listas.
Estos estilos se aplicarán a las listas numeradas dentro de las entradas. Si quieres aplicarlas sólo a la sidebar cambia la primera línea:
.post ol li {

Por:
.sidebar ol li {

Generalmente casi nadie usa las listas numeradas, así que vale la pena personalizarlas para que las pocas veces que se usen tengan un aspecto distinto.

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