You will agree with me that the styles of the lists of elements in Astra are quite bland, minimalist being generous. They are boring and don’t add anything, they don’t stand out.
Do you want to change them?
The default list layout in Astra
With the Astra theme active, regardless of whether it is the free or Pro version, when you create a list of items in the editor, for example:
Not that they look, shall we say, spectacular?
Customize the layout of list items in Astra
With the help of a little CSS we can give them some style, color, and attract attention to our lists of items, ordered or unordered.
For example, how about this other look?
Much more eye-catching those numbers and lists with a background color and some styling, don’t they demand more attention?
Well, to get those effects just add the following CSS code in the additional CSS section of the WordPress Customizer:
/* Ordered lists style */
.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%;
}
/* Unordered list style */
.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);
}Code language: CSS (css)Copy and paste it here:
You publish the changes and you’re done.
Now, if you want to change colors, size, styles, etc., just make modifications to the sample CSS to adapt it to the styles and colors of your website. It will look great, and you will get more attention on your lists of elements.
