Last Updated:

CSS for better numbering in online Documents

Cool Tools

There is this common problem with WordPress and other platforms  - the default numbering is like this on all levels:

In normal text editors, this goes like this:

Frankly, its nicer so after some reading I built a CSS override which work even in Publii (the static site generator that powers this site)
It most definitely works on WordPress - this is where it was built and tested

Here is the screenshot and the text itself (for copy-pastes) is below

ul {list-style-type:disc; margin:0 15px 10px;}
ul > li {list-style:disc;margin:0 15px 10px;}
ul li > ul li {list-style:square;margin:0 15px 10px;}
ul li > ul li > ul li {list-style:circle;margin:0 15px 10px;}
ul li > ul li > ul li > ul li {list-style:square;margin:0 15px 10px;}
ol {list-style:decimal; margin:0 15px 10px;}
ol > li {list-style:decimal;margin:0 15px 10px;}
ol li > ol li {list-style:lower-alpha;margin:0 15px 10px;}
ol li > ol li > ol li {list-style:lower-roman;margin:0 15px 10px;}
ol li > ol li > ol li > ol li {list-style:upper-alpha;margin:0 15px 10px;}
ol + ul {margin: 0 30px 15px;}

 

How to apply it?   (notice - the formatting below is off, just to prove that it works)

  1. in Wordpress open your theme configuration 
    1. Click on Customize

      1. you will see the "Additional CSS" tab - expand it

        1. paste the text above into the box and save
          The effect can be observed within 10 minutes to a full day (depends on your caching settings)


 

We are not done yet! The steps above affect only the end result, not the editor. If you are comfortable with having a difference between the two, then you are done but if you want to fix this, stick around:

 

  1. In WordPress (versions below 5.0) , go to Appearance>Editor
    Note - if you are using WP 5.0 and above you need to install the classic editor plugin to replace the awful gutenberg
  2. In the theme files  - find the one which says "editor-style.css" in it.
  3. find the lines which define the ul and ol and replace them (after safely saving a copy in a notepad)
  4. the changes will take place in few hours (editor caching is longer then the whole website)

 

 

 

Comments