Allow customizable text for Lists <ol> and <ul>

Answered

5 Comments

  • Ryan McGrew
    Zendesk Product Manager

    Hey Richard Younger,

    Thanks for sending along this feedback.

    1. Could you share an example of how you're doing this today? Maybe you could link us to an article where you're doing this? Most likely, we'd recommend that you look at adjusting the styles in your theme's CSS to create list styling that better matches what you're looking for. If you can send along an example I might be able to point you in the right direction. 
    2. Are you varying line spacing per list or article? Or do you have consistent line spacing across your Help Center? Again we we'd probably want to look at the line-height property in CSS for lists. Additionally, the editor shouldn't be creating extra <p> tags. Are you copying and pasting this content from another source or creating it in the article editor?

    Thanks!

    0
  • Richard Younger

    Ryan McGrew

    Here is an example

    This example added the <span> tag to the bullet point in the Table of Contents at the top. However, that does not seem like the issue. But you can see how odd the spacing is. However, no <p> tag was added to this one, so it makes me unsure as to why the spacing appears that way. 

    We have found that adding type to the list does display on the user view, but not in the edit view. Example <ol type="A"> does work. So I was mistaken there.

    But it still has to be updated in the HTML and for some of our people adding to these articles, HTML is not something they are used to handling and it would certainly help if we could change that type in the CSS or an option directly on the edit page. So yes, if you have a recommendation for editing the list in the CSS that would be awesome!

     

    0
  • Ryan McGrew
    Zendesk Product Manager

    Hey Richard Younger

    It looks like there's this rule in your styles.css file at line 1240 that's adding the padding to the sub-bullet

    .article-body ul, .article-body ol {
    padding-left: 20px;
    list-style-position: outside;
    margin: 20px 0 20px 20px;
    }

    If you add another rule after that that removes the padding, I think things will start looking a bit more like what you're looking for

    .article-body li > ul, .article-body ol > li {
    margin: 0px
    }

    As far as setting the list style type of alphabetical vs. numbered, it should be achievable via CSS as well. Here's an example based on the above CSS rules to set the lists to be alphabetical and sublists to be roman numerals. But you can play around with different options.

    .article-body ul, .article-body ol {
    padding-left: 20px;
    list-style-position: outside;
    margin: 20px 0 20px 20px;
    list-style-type: lower-alpha;
    }

    .article-body li > ul, .article-body li > ol {
    margin: 0px;
    list-style-type: lower-roman;
    }

    Let me know if this helps or you have other questions!

    1
  • Richard Younger

    Very kind of you Ryan McGrew 

    We were able to use that line of CSS to improve the formatting. Thank you very much for your help!

    As for the alpha and roman types, its helpful to understand, but it seems that one we may just have to work with the HTML individually for sub list items. (Different types coinciding)

    Overall, our team is grateful for how this helps our consistency on our pages. 

    0
  • Ryan McGrew
    Zendesk Product Manager

    Happy to help and glad you're happy with the results!

    0

Please sign in to leave a comment.

Powered by Zendesk