I would like to port a nice "ListTree" style found here, into DokuWiki: ⚫ ⟶ 🌴
My steps:
Copy CSS from this tiddler, and paste into DokuWiki conf/userall.css
DokuWiki syntax:
<html><div class="list-tree"></html>
* Starry, starry night
* Paint your palette blue and gray
* Look out on a summer's day
* With eyes that know the darkness in my soul
* Shadows on the hills
* Sketch the trees and daffodils
* Catch the breeze and the winter chills
* In colors on the snowy linen land
* Now I understand
* What you tried to say to me
* And how you suffered for your sanity
* And how you tried to set them free
* They would not listen, they did not know how
* Perhaps they'll listen now
<html></div></html>
Result:
↑As you can see, both the first items of the two lists, do not have the correct tree style as the first screenshot on the top of the post. (circled in the screenshot above)
It seems that the following CSS from the original source is not working as expected:
/* top-level: Lines if multiple top elements. No lines if single top element. */
.list-tree > li:last-of-type:before { display:none; }
.list-tree > li:first-of-type:before { border-top: {{!!list-tree-thickness}} solid {{!!list-tree-color}}; }
.list-tree > li:before {
border-left: {{!!list-tree-thickness}} solid {{!!list-tree-color}};
height: 100%;}
I need clues to know what's wrong. And here is the generated HTML by DokuWiki:
<div class="list-tree">
<p></p>
<ul>
<li class="level1">
<div class="li"> Starry, starry night</div>
</li>
<li class="level1 node">
<div class="li"> Paint your palette blue and gray</div>
<ul>
<li class="level2">
<div class="li"> Look out on a summer's day</div>
</li>
<li class="level2">
<div class="li"> With eyes that know the darkness in my soul</div>
</li>
</ul>
</li>
<li class="level1 node">
<div class="li"> Shadows on the hills</div>
<ul>
<li class="level2">
<div class="li"> Sketch the trees and daffodils</div>
</li>
<li class="level2 node">
<div class="li"> Catch the breeze and the winter chills</div>
<ul>
<li class="level3">
<div class="li"> In colors on the snowy linen land</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li class="level1 node">
<div class="li"> Now I understand</div>
<ul>
<li class="level2 node">
<div class="li"> What you tried to say to me</div>
<ul>
<li class="level3">
<div class="li"> And how you suffered for your sanity</div>
</li>
<li class="level3">
<div class="li"> And how you tried to set them free</div>
</li>
</ul>
</li>
<li class="level2">
<div class="li"> They would not listen, they did not know how</div>
</li>
<li class="level2">
<div class="li"> Perhaps they'll listen now</div>
</li>
</ul>
</li>
</ul>
<p>
</p>
</div>
Any clues are appreciated!