How to change the design of lists with the Astra theme

astra theme templates

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:

default astra lists draft

Not that they look, shall we say, spectacular?

default astra lists preview

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?

custom astra lists preview

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:

where to add the css for astra lists

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.

Click to rate this post!
[Total: 0 Average: 0]

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top Skip to content