Thank you Drevarr, but on my side its rendered differently. If I'm using the above CSS and inline styling as you suggest, I get unintended line spacing between list items. Correct me if I'm wrong, but there is a difference in the underlying HTML, therein lies the cause for the unintended line spacing. They are indeed separate lists instead on one list, and this could be considered semantically incorrect, if the desired intention was one list with a different glyph for individual members of a list. The TiddlyWiki documentation <http://tiddlywiki.com/static/Lists%2520in%2520WikiText.html> suggest the latter:
You can also assign a CSS class to an individual member of a list with this > notation. Compare the following results when using the same CSS in Mozilla Firefox (v45.7.0, v47.0.2, v52.0.2) and Google Chrome (v57.0.2987.133). @@.check *First item @@ @@.check *Second item @@ @@.check *Third item @@ Underlying HTML code: <ul class="check"> <li>first item</li> </ul> <ul class="check"> <li>second item</li> </ul> <ul class="check"> <li>third item</li> </ul> @@.check *First item *Second item *Third item @@ Underlying HTML code: <ul class="check"> <li>first item</li> <li>second item</li> <li>third item</li> </ul> <https://lh3.googleusercontent.com/-4Y8IKr0tzww/WPTc0VdveQI/AAAAAAAAAZw/6Lkwd9ERhxk_PZGjjXzIgfaGxWnSOdIGgCLcB/s1600/Screenshot_1.jpg> <https://lh3.googleusercontent.com/-wK2rzwWPGrI/WPTdfTnQCUI/AAAAAAAAAZ4/eXY_HusttWc6lCSpQ_MJ4Pow5utOCKOzQCLcB/s1600/Screenshot_2.jpg> You see, I modified the CSS of Tobias, by adding the following definition for the class remove to $:/fonts/FontAwesome/checklist: .remove li:before{ content: "\f00d"; color: #c9443d; font: normal normal normal 24px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 2px -2px 1px rgba(150, 150, 150, 0.2); position:absolute; display: inline-block; margin: 0 0 0 -35px; width: 30px; font-size: 24px; vertical-align: middle; } @@.remove *First item *Second item *Third item @@ <https://lh3.googleusercontent.com/-MTQFxc2URgk/WPTrUDX_b2I/AAAAAAAAAaI/awMVuBFfs_wi9Z8ngaHYU335mYnFpjJRgCLcB/s1600/Screenshot_3.jpg> Looking at the TW documentation <http://tiddlywiki.com/static/Lists%2520in%2520WikiText.html> again, there is also an explanation of the underlying html, when you assign a CSS class to an individual member of a list. So I tried using HTML instead of WikiText, but the browser didn't render it as expected. Looking at a HTML reference <https://www.w3schools.com/tags/default.asp>, it doesn't look like valid HTML, perhaps that is the reason for the unexpected results. <ul> <li class="check">first item</li> <li class="remove">second item</li> <li class ="check">third item</li> </ul> <https://lh3.googleusercontent.com/-oZ_807ytNE0/WPTuwycpUZI/AAAAAAAAAaU/-XI5WPQqGh4iM1s3Wl8NaLrcZaHMl0PbQCLcB/s1600/Screenshot_4.jpg> What if you would like different numbering for every level of numbered lists? The following as doesn't seem to work either... /* list styles */ .nomarker li { list-style-type: none; margin-left:-2em; } .lalpha li {list-style-type: lower-alpha;} .ualpha li {list-style-type: upper-alpha;} .lroman li {list-style-type: lower-roman;} .uroman li {list-style-type: upper-roman;} #.default Level 1 item ##.lalpha Level 2 sub-item ###.lroman Level 3 sub-item ##.lalpha Level 2 sub-item #.default Level 1 item <https://lh3.googleusercontent.com/-JCLwjgZbxWQ/WPTzXRiw5mI/AAAAAAAAAag/Jds1K83KNYQBGixC9T7xBcWvGPAjlkt_ACLcB/s1600/Screenshot_5.jpg> So in Summary, I'm still at a loss. According to the TW documentation it should work, but it doesn't. Is there a bug with TiddlyWiki or a mistake in the documentation? What is the solution? Thank you Kind Regards Schalk Burger On Sunday, April 16, 2017 at 4:45:16 PM UTC+2, Drevarr the Old wrote: > > I think you are limited to the @@ styleinline format with this > implementation. Playing with Tobias' example, I added a definition for > .remove to $:/fonts/FontAwesome/checklist and it seems to work. > > /* CHECKLIST EXTENSION */ > > .check li{ > list-style-type:none; > padding:5px; > } > > .check li:before{ > content: "\f00c"; > color: #9bdd81; > > font: normal normal normal 24px/1 FontAwesome; > text-rendering: auto; > -webkit-font-smoothing: antialiased; > -moz-osx-font-smoothing: grayscale; > text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.2); > > position:absolute; > display: inline-block; > margin: 0 0 0 -35px; > width: 30px; > font-size: 24px; > vertical-align: middle; > } > > .remove li{ > list-style-type:none; > padding:5px; > } > > .remove li:before{ > content: "\f00d"; > color: #9bdd81; > > font: normal normal normal 24px/1 FontAwesome; > text-rendering: auto; > -webkit-font-smoothing: antialiased; > -moz-osx-font-smoothing: grayscale; > text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.2); > > position:absolute; > display: inline-block; > margin: 0 0 0 -35px; > width: 30px; > font-size: 24px; > vertical-align: middle; > } > > Enter code here... > > then modify text-only checklist tiddler: > @@.check > * a one > @@ > @@.check > * and a two > @@ > @@.check > * and a three > @@ > @@.remove > * and a four > @@ > > > > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/261af57b-284e-4b44-baeb-4ac2fd478897%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
