
CSS for better numbering in online Documents
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)
- in Wordpress open your theme configuration
- Click on Customize
- you will see the "Additional CSS" tab - expand it
- 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)
- paste the text above into the box and save
- you will see the "Additional CSS" tab - expand it
- Click on Customize
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:
- 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 - In the theme files - find the one which says "editor-style.css" in it.
- find the lines which define the ul and ol and replace them (after safely saving a copy in a notepad)
- the changes will take place in few hours (editor caching is longer then the whole website)
Comments