» » » Personalizar las listas numeradas del blog

Personalizar las listas numeradas del blog




Para personalizar las listas numeradas u ordenada del blog lo primero que hay que saber es que es la propiedad básica que controla el tipo que se muestra se denomina list-style-type.

Los valores son: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, none

El valor none permite mostrar una lista en la que sus elementos no contienen números.

Estas listas se forman así mediante HTML:

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ol>


O también podemos usar el icono del editor de entradas



Por defecto una lista numerada usa la propiedad decimal y se ve de este modo:


Existen varios estilos para las listas ordenadas.





Pero hay otras propiedades que podemos aplicar para cambiar la forma que se muestran los números.


Para cambiar tus listas numeradas del blog por uno de estos estilos ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

En el recuadro pegar el Código CSS:

/*Listas numeradas
-------------------*/
.post ol {
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 4em;
padding: 0;
counter-reset: li-counter;
}
.post ol li{
position: relative;
margin-bottom: 10px;
padding-left: 0.5em;
min-height: 3em;
}
.post ol li:before {
position: absolute;
top: 0;
left: -1.33em;
width: 1.2em;
height: 1.2em;
font-size: 20px;
line-height: 1.2;
text-align: center;
color: #f5f5f5;
border: 1px solid #c5c5c5;
border-radius: 50%;
background-color: #2eb9ff;
content: counter(li-counter);
counter-increment: li-counter;
}

Cambiar el estilo de numeración decimal.
Cambiar el color en background-color:
Cambiar el borde redondo en border-radius:


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 {

Es bueno personalizarlas para que cuando se usen tengan un aspecto distinto.





Si te gusta la entrada compártela.

¡Gracias!

3 comentarios:

▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top