StyledThemes

How to change css styling on ordered and unordered lists?

Home Forums WordPress Themes – Premium Pure & Simple How to change css styling on ordered and unordered lists?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #46079
    Donna Green
    Participant

    Hi there

    Please could you tell me how to change the styling on ordered and unordered lists?

    I have a list in a blog post here, but I would like more space between each list item – they are a bit too squashed up at the moment.

    I’d also like to have more space between the numbers and the paragraph text. So there would be more space between 1. [start of paragraph] if you know what I mean?

    I’d really appreciate it if you tell me how to do this, thank you.

    #46091
    Sushil Adhikari
    Moderator

    Hi Donna,

    You can try with this example to keep space between 1 and paragraph.

    .entry-content ol li {
        padding-left: 10px;
    }

    Note: Please change the padding-left value as per your requirement and use child theme or additional css section of customizer to add this custom css.

    Thanks

    #46094
    Donna Green
    Participant

    Hi Sushil, many thanks for your reply, but unfortunately it does not work … My list looks exactly the same?

    I would also like to increase the spacing vertically between each list item, as well as the space between the number and the start of the text.

    Is there anything else I can try please?

    Thank you so much,
    Donna

    #46097
    Sushil Adhikari
    Moderator

    HI Donna,

    Could you tell us where did you have added code , we didn’t see code you added on your website. Could you please clear the cache and let us know how it goes for you?

    Thanks

    #46106
    Donna Green
    Participant

    Hi Sushil,

    I put it in my child theme css file: Donna Green Photography: Stylesheet (style.css)

    But nothing is happening? Also, I would like to increase the vertical space between each list item too and would be very grateful if you would show me how, please.

    Thank you!
    Donna

    #46112
    Sushil Adhikari
    Moderator

    Hi Donna,
    Please make the following changes in your child theme style.css file;

    ol li {
    	padding-left:10px;
    	margin-bottom:10px;
    }

    Hopefully it works!
    Thanks !

    #46117
    Donna Green
    Participant

    Hi Sushil, I’m afraid that doesn’t work either! I’ve put it in my child style.css file but nothing happens at all…

    🙁

    #46118
    Sushil Adhikari
    Moderator

    Hi Donna,
    Please check your code once again,
    You have written;

    /* CHANGE STYLING OF LIST ITEMS ^/
     ol li {
        padding-left: 10px;
    }

    You need to write;

    /* CHANGE STYLING OF LIST ITEMS */
     ol li {
        padding-left: 10px;
        margin-bottom: 10px;
    }

    or else try

    /* CHANGE STYLING OF LIST ITEMS */
     ol li {
        padding-left: 10px!important;
        margin-bottom: 10px!important;
    }
    

    It will definitely work.
    Thanks!

    #46124
    Donna Green
    Participant

    Ohhhhhhhh no, I am so sorry! It was a typo! Thank you very much for spotting this! And yes, it does work now, fantastic.

    One more thing though … the numbers are not left-aligned properly – please could you tell how to pull the whole list over to the right a little, so the numbers are not sticking out into the left margin?

    Thank you!

    #46125
    Sushil Adhikari
    Moderator

    Hey Donna,
    If you want to push the whole list towards right along with the list number,
    Try this;

    ol li {
    margin-left: 20px;
    }

    You can adjust the pixel according to your choice.
    Thanks !

    #46126
    Donna Green
    Participant

    Perfect! Thank you so much for your help Sushil. 🙂

    #46303
    Sushil Adhikari
    Moderator

    You are welcome ,Donna

    #46334
    Donna Green
    Participant

    Sushil, I’m so sorry, I really need more information please …

    Although your code made my lists look perfect, unfortunately it completely messed up my horizontal nav bar on every page, because of course that’s a list too.

    Is there any way I can change the spacing for list items on a page, in the body of the text, but NOT have it change the nav bar please?

    Thank you so much
    Donna

    #46337
    Styled Themes
    Keymaster

    Hi Donna,

    you can just change the CSS you added earlier to this to affect only the body of the text.

    
    .entry-content ol li {
    margin-left: 20px;
    }
    

    regards
    Imre

    #46338
    Donna Green
    Participant

    PERFECT! Thanks a million Imre, that’s brilliant! All sorted 😀

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.