Ordered Lists in the Marfa Theme

I really like the Marfa theme on Micro.blog but ordered lists were not working for me. Anytime I posted footnotes they would display with circles like an unordered list instead of being numbered. That was really annoying so I switched to Hyde for a while.

Yesterday, I did not feel like worrying or watching the election all day so I thought it would be a good time to figure out what’s the issue with the ordered lists on Marfa. It turned out to be a good idea because it took me a while to figure out the problem.

I went to the over to the CSS file at the Marfa repo on Github. Right away I found this:

li {list-style-type:circle; list-style-position:inside;}

I thought great. I’ll set ol li to {list-style-type: decimal} and I’m done. Well it wasn’t that easy. I made the change and nothing happened.

I then changed all li items to decimal. Again, nothing happened. I tried other selector combinations but could not get it to work.

I was at a loss for a while until I finally saw this:

.post-body li {
  list-style-type: circle !important;

Apparently, marking something !important overrides all subsequent changes. I don’t know why list items in the post body are set to be circles without the ability to override but I had no idea how to make a change. I googled a bit and found that the only way to override an important rule is with another important rule. So, I added the following to the Edit CSS file:

.post-body ol li {
  list-style-type: decimal !important;

That fixed the ordered lists and kept unordered lists with those important circles.

uncrtn blog @uncrtn