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.
Suscribirse a: Comentarios de la entrada ( Atom )

Últimos comentarios