Con un portátil bajo el brazo Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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 ...

internet

Cómo hacer que tu site sea compatible en todos los ordenadores.

A veces ocurre que debido a la configuración de nuestra plantilla en Blogger, nuestro blog o sitio web se puede ver en algunos navegadores y en otros no. Sucedió hace algunas semanas que uno de nuestros sitios web, se podía ver en todos los navegadores excepto en Firefox. Al intentar cargar la página en dicho navegador, cargaba y luego la página se quedaba en blanco. Buscando información pudimos ...

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 ...

BLOG intermedio tblog ...

Cómo hacer listas con iconos de colores en Blogger

Esta entrada surgió también en la fanpage, tuvo buena respuesta y me decidí a cambiarla por otra sobre marketing que tenía preparada. Llevamos ya un tiempo sin publicar tutoriales sobre blogger y este detalle que voy a compartir contigo hoy es muy original, además de sencillo, verás que si ya has tocado la plantilla HTML y tienes nociones básicas de programación, no te cuesta nada diseñar tu prime ...

internet blog intermedio ...

Cómo personalizar el gadget de entradas populares

No sé si te has fijado en cómo se ve ahora mi barra lateral. He enmarcado algunos de los gadgets en marcos del mismo color azul que el que uso como color principal del blog. ¡Me encanta ese azul! No es el típico pastel y creo que va mucho conmigo y lo que quiero transmitirte, es vivo, brillante y con fuerza. A mí me hace sentir seguridad y me relaja, no me costó mucho escogerlo... ¡y creo que acer ...

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 ...

watercolour acuarelas free printable ...

Iconos de Redes Sociales

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...