Cómo mejorar las listas con estilo en CSS

ASPPYMEDIA · 29 Mar 2019

Hola forobetanos.

Quisiera poder hacer las listas con un poco de estilo, al menos algunas. El problema es que no se hacerlo :sorprendido:

Pongo de ejemplo las del bloggero Enrique Dans:

Hugo7 · 29 Mar 2019

Hola,

Tienes que agregarle CSS a tu plantilla de Wordpress...
Para que puedas reemplazar las viñetas por una imagen...
Te pongo un ejemplo sencillo, pero cámbialo a gusto...

Insertar CODE, HTML o PHP:

<style>
ul li {
    margin: 10px 0;
    padding: 0 0 0 26px;
    background: url(//www.enriquedans.com/wp-content/themes/enriquedans_30_v1/images/ico-001.gif) no-repeat 0 4px;
}
</style>

Saludos,
Hugo

ASPPYMEDIA · 29 Mar 2019

Hugo7 dijo:
Hola,

Tienes que agregarle CSS a tu plantilla de Wordpress...
Para que puedas reemplazar las viñetas por una imagen...
Te pongo un ejemplo sencillo, pero cámbialo a gusto...

Insertar CODE, HTML o PHP:

<style> ul li { margin: 10px 0; padding: 0 0 0 26px; background: url(//www.enriquedans.com/wp-content/themes/enriquedans_30_v1/images/ico-001.gif) no-repeat 0 4px; } </style>

Saludos,
Hugo

Este es el codigo que debo agregar al CSS Adicional cierto?

Hugo7 · 29 Mar 2019

Pradolirycs dijo:
Este es el codigo que debo agregar al CSS Adicional cierto?

Sí, aplícalo, si lo haces bien, te funcionará.

ASPPYMEDIA · 30 Mar 2019

Hugo7 dijo:
Sí, aplícalo, si lo haces bien, te funcionará.

Lo aplique bien, gracias. Sin embargo me aparece la viñeta junto a la imagen, osea las dos cosas :c

Hugo7 · 30 Mar 2019

Pradolirycs dijo:
Lo aplique bien, gracias. Sin embargo me aparece la viñeta junto a la imagen, osea las dos cosas :c

Investiga un poquito más de tu parte, para ver que falta en ese código...
Y aplicar los cambios necesarios, probar y probar, hasta que funcione...
Te dejo una captura de pantalla, del blog de ese tal Enrique Dans:

¿Ves algo que esté faltando?
No me respondas a mi...
Es para darte alguna referencia...

Saludos,
Hugo

ASPPYMEDIA · 30 Mar 2019

¡Muchas gracias [MENTION=180759]Hugo7[/MENTION] y disculpa la molestia!

Me funciono de la siguiente manera:

Insertar CODE, HTML o PHP:

ul li {
	list-style-image: url(//www.enriquedans.com/wp-content/themes/enriquedans_30_v1/images/ico-001.gif);
        margin: 5px 0;
        padding: 0 0 0 0px;
}

Hugo7 · 30 Mar 2019

Pradolirycs dijo:
¡Muchas gracias [MENTION=180759]Hugo7[/MENTION] y disculpa la molestia!

Me funciono de la siguiente manera:

Insertar CODE, HTML o PHP:

ul li { list-style-image: url(//www.enriquedans.com/wp-content/themes/enriquedans_30_v1/images/ico-001.gif); margin: 5px 0; padding: 0 0 0 0px; }

:encouragement: En buena hora que lo pudiste solucionar, saludos.

Cómo mejorar las listas con estilo en CSS

ASPPYMEDIA

Hugo7

ASPPYMEDIA

Hugo7

ASPPYMEDIA

Hugo7

ASPPYMEDIA

Hugo7

Temas similares