Hacia mucho que quería escribir este artículo, ya que es un tema del que puedes encontrar muy poca información en internet. Se trata de las listas. Ese elemento que utilizamos tanto en nuestros artículos pero que tan poquito sabemos estilizar. Y es que no tenemos que utilizar los puntos y los números obligatoriamente, podemos utilizar desde cuadrados hasta iconos pasando por números romanos o el abecedario griego. Para todo esto hay dos formas una de ellas es la tradicional y la otra es la forma “fantasía”, gracias a la cual podemos poner colores a la parte de los puntos, darles un color y utilizar iconos. Suena bien, ¿verdad?
Tradicional
Las etiquetas HTML varían de una lista ordenada a una desordenada, si pones en un post una lista de cada tipo y luego pasas a la versión HTML verás que el código para una lista ordenada sería: <ol><li>Primero</li><li>Segundo</li></ol>, mientras que para una lista desordenada sería: <ul><li>Primero</li><li>Segundo</li></ul>. Este cambio de código de un tipo de lista a otro te es beneficioso porque así puedes dar un estilo diferente a cada tipo de lista.
Para ello añadimos al CSS de nuestra web (en el caso de no tener una plantilla con esta opción puedes descargarte el plugin Simple Custom CSS) las siguientes líneas:
ul li{
list-style-type: square;
}
Con esto cambiarías el estilo de la lista no ordenada y en vez de mostrarse puntos se mostrarían cuadrados. Si en vez de cuadrados quieres puntos con fondo blanco y borde negro simplemente cambia square por circle; y, si lo que quieres es la versión por defecto, simplemente cambia square por disc.
Para estilizar las listas ordenadas únicamente tienes que cambiar el “ul” por “ol“ de forma que quedaría así:
ol li{
list-style-type: lower-alpha;
}
A diferencia de las listas no ordenadas, que tienen tres valores (circle, square, disc), las listas ordenadas tienen muchos más: números, letras griegas, números romanos, mayúsculas… Los valores más usados y conocidos son: upper-roman, que equivale a números romanos en mayúsculas; lower-alpha, que equivale al abecedario en minúscula; y, number, que es la apariencia que viene por defecto. Sin embargo, como he dicho hay un montón de valores, por ejemplo, con “georgian” los números se sustituyen con el abecedario georgiano.
A esto selectores (“ul li“/”ol li“) también les puedes añadir otras declaraciones como el tamaño de fuente, el color, la alineación…
ul li{
font-size: 16px;
color: #777;
list-style-type: square;
}
Pero ten cuidado porque aunque exista la creencia popular de que esos estilos únicamente afectan a los números o a las letras, es mentira. El texto va a recibir esos estilos también, es decir, que con el código que he mostrado anteriormente el texto de las listas ordenadas se pondría gris.
Si lo que quieres es que solo los números o puntos tengan X color y X tamaño, o que incluso en vez de ser un punto o un número sea una varita mágica o un corazón… Es hora de pasar a la forma…
Fantasía
Esta forma es con la que queda un resultado más chachi. Sin embargo, también es la más costosa. Ya que para poder seguirla necesitas alguna fuente de iconos, como FontAwesome, descargada en tu plantilla.
Para saber si ya la tienes descargada en tu plantilla, dirígete a tu web y cuando estés en ella pulsa el botón derecho del ratón y en el desplegable que te aparece buscas “Ver código fuente de la página” y clicas en esa opción.
Eso hará que te cargue una página. Una vez en ella pulsa Ctrl + F , eso hará que se abra un buscador y en él escribes “font”, si te sale algún resultado busca en ellos algo que contenga alguna palabra que se parezca a “fontawesome”
Si te aparece algo perfecto, si no descarga el plugin de Better Font Awesome, que añadirá esta fuente a tu plantilla. Ahora si realizas el paso anterior de inspeccionar el código fuente, verás que si que puedes encontrar un archivo relacionado con Font Awesome.
Una vez realizado todo esto y con la página de Font Awesome abierta para poder ver los iconos, nos volvemos a dirigir al CSS, donde añadiremos:
ul li{
list-style-type: none;
}
En el caso de haber configurado antes otro tipo de lista, siguiendo el tutorial de la forma tradicional, deberás sustituir el código anterior, ya que si dejas ambos códigos el nuevo no se te mostrará.
Con el "list-style-type: none;" haremos que desaparezcan tanto los puntos, como los números, etc. Es decir, delante del texto no se mostrará nada. Como eso no es lo que quieres, voy a la parte en la que te cuento como poner el icono que tu quieras de FontAwesome, con el color que tú desees y el tamaño que veas.
ul li:before {
content: "\f271";
display: inline-block;
font-family: FontAwesome;
margin: 0 auto;
font-size: 1.3em;
padding-right: .5em;
color: #E69215;
}
Añadiendo al selector “ul li“/”ol li” la extensión “:before” situaremos el icono antes del texto y todas las declaraciones que se encuentran en negrita son todas las declaraciones que podemos cambiar:
Content corresponde al icono. Para poner el vuestro tenéis que acceder a la página del icono que deseéis y una vez en ella encontraréis algo así:
Lo que he marcado con un rectángulo naranja en la imagen es el unicode, es decir, el código que tenéis que situar después del “\” y entre las comillas. De modo que la declaración con ese icono quedaría así: content: "\f2cd".
Padding-right, es el relleno entre el elemento y el final de este. Puedes poner el tamaño en píxeles, rem o em, como viene en el ejemplo.
Con font-size establecemos el tamaño del icono. Puedes poner el tamaño en píxeles, rem o em, como viene en el ejemplo.
Y color simplemente establece el color del icono, lo puedes poner tanto en hexadecimales como en rgba o el nombre en inglés.
El resultado de todo esto lo puedes ver en las listas que he estado utilizando durante todo el tutorial, creo que es un diseño que lleva un paso más allá la consolidación de tu identidad visual y que realmente recomiendo que tengas en tu web.
