• Ryan McGrew

  • 2020年08月03日 15:25

  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!

• Richard Younger

  • 2020年08月06日 20:33

  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!

   

• Ryan McGrew

  • 2020年08月11日 10:20
  • 編集済み

  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!

• Richard Younger

  • 2020年08月12日 22:55

  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. 

• Ryan McGrew

  • 2020年08月13日 13:41

  Zendesk Product Manager

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

• David Crichlow

  • 2020年12月31日 22:29

  This has been bothering me for a long time and I knew about list-style-type. I just didn't know how to add it to the style sheet. I have been adding it to each ol that needed the values. This makes me so happy. 

サインインしてコメントを残してください。