comunidades

Estiliza las listas de tu web

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.

Fuente: este post proviene de Con un portátil bajo el brazo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: CSS: Nivel B2

Recomendamos

Relacionado

general

Aprende a sacar más partido a las listas o bullets en blogger con html

Sabéis que tengo pendiente sacar un curso de html y css, porque si bien habrá cientos, los que yo he visto no están muy bien explicados. O yo soy muy boba, que también puede ser, pero si antes de saber yo, me lo hubiesen explicado así, me habría quedado igual... Yo misma traté de seguir uno hace tiempo y además se me hacía tan tostón, que lo dejé a la segunda lección jaja, viva mi disciplina. Al ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

Programacion css programacion ...

Programar una página web con HTML5 y CSS

¿Creamos una página web con HTML y CSS y que sea chula?, que mole, que entres y digas… Dios es la página de las páginas. Cómo programar una web en html5 y css Pues ya vimos cómo podemos crear nuestra web con HTML5 y CSS, pero si es cierto que aunque bonita le falta ese punto de dinamismo, ese movimiento en la página que le haga estar viva. Crear un dinamismo con CSS Pues sí querido lector (c ...

general

Creación y personalización de menús en Blogger paso a paso.

La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder. En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consi ...

general

Crea una barra de menús que quede siempre fija en la parte superior de tu Blog.

La creación de un menú fijo para la parte superior del Blog es una popción a tener en cuenta dependiendo del tipo de presentación y la plantilla que se está utilizando. Cuando tratamos Blogs que enumeran gran cantidad de entradas y estas hacen qe haya que desplazarse verticalmente por los contenidos, el usuario puede quedar desprovisto de elementos de navegación hasta que llega a la parte inferior ...

general

Cómo crear un índice con todas las entradas de tu Blog que se genere automáticamente.

La generación de un índice de entradas automático para un blog es algo que muchos Bloggers anhelan utilizar en sus páginas: para crear índices con las recetas de cocina, con las películas y sus críticas, con las fotografías, los poemas, los escritos, las plantas, animales... un sinfín de conceptos que cada Blog maneja según su temática y que dada su cantidad es imposible exponer a los usuarios en ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

rendimiento

Mejora el rendimiento de tu web utilizando jascript asíncrono

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix. GTMetrix es un servicio de análisis rendimiento de l ...

Todo SEO

Trucos sobre SEO On Page

Hoy quería hablaros de lo que es para mi una de las cosas más importantes para posicionar un artículo, el “SEO on page“. Cuando escribes un artículo enfocado a que sea útil a algunas personas, a la vez hay que pensar en escribirlo de tal manera que a los robots de Google le guste para poder estar en los puestos TOP de Google y que las personas puedan llegar a conocer tu artículo. Y est ...

Diseño para Blogs Herramientas Uncategorized

Cambiar el color del navegador por el de tu blog

Cambiar el color del navegador por el de tu blog de añade un icono! Personaliza Google Chrome con el color principal del tema de tu blog  de una forma muy fácil cambiando el esquema de color , por defecto es el azul de google y añadir el logo de tu blog o una imagen que te guste, lo vamos a poder hacer en diferentes plataformas. Color azul por defecto de Chrome Fucsia de yo blogueo Hay que aprovec ...