Estarás conmigo en que los estilos de las listas de elementos en Astra son bastante sosos, minimalistas siendo generosos. Vamos, que son feos y no aportan nada, no destacan.
¿Te animas a cambiarlos?
El diseño por defecto de las listas en Astra
Con el tema Astra activo, da igual si es la versión gratuita o la Pro, cuando creas una lista de elementos en el editor, por ejemplo:
No es que el aspecto las mismas sea, digamos, espectacular…
¿Le damos algo de color?
Personalizar el diseño de listas de elementos en Astra
Ayudándonos de un poco de CSS podemos darles algo o mucho más de alegría, color, y atraer atención hacia nuestras listas de elementos, ordenados o sin ordenar.
Por ejemplo ¿qué te parece este otro aspecto?
Mucho más vistosos esos números y listas con un color de fondo y algo de estilo ¿a que reclaman más atención?
Bien, pues para conseguir esos efectos solo tienes que añadir el siguiente código CSS en la sección de CSS adicional del Personalizador de WordPress:
/* Estilos lista ordenada */
.entry-content ol {
counter-reset: my-ol-counter;
margin-left:1.5em;
}
.entry-content ol li {
position: relative;
padding-left: 30px;
list-style: none;
}
.entry-content ol li:before {
position: absolute;
top:50%;
left: 0;
width: 20px;
height: 20px;
margin-top: -10px;
color: #fff;
text-align:center;
background-color: #28769d;
content: counter(my-ol-counter,decimal);
counter-increment: my-ol-counter;
font-size: 11px;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/* Estilos lista desordenada */
.entry-content ul {
margin-left:1.5em;
}
.entry-content ul li {
position: relative;
padding-left: 30px;
list-style: none;
}
.entry-content ul li:after{
position: absolute;
top: -webkit-calc( 50% - -1px);
top: calc( 50% - -1px);
left: 0; width: 20px;
height: 20px;
margin-top: -10px;
padding-top: 2px;
color: #fff;
text-align:center;
background-color: #28769d;
content: "\e900";
font-size: 11px;
font-family: 'Astra';
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
O sea, lo copias y lo pegas aquí:
Publicas los cambios y ya lo tienes. Monísimas las listas ¿verdad?
Ahora, si quieres cambiar colores, tamaño, estilos, etc., solo tienes que hacer modificaciones en el CSS de ejemplo para adaptarlo a los estilos y colores de tu web. Quedará genial, y conseguirás más atención sobre tus listas de elementos.
La entrada Cómo cambiar el diseño de las listas en el tema Astra la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.
0 Commentaires