On Tuesday, April 18, 2017 at 2:05:15 AM UTC+2, Schalk Burger wrote:
>
> Thank you for the reply, but you did not offer anything new, that could
> hint towards an answer to my question(s). I have been referring that exact
> tiddler of the TiddlyWiki documentation within my posted questions. Look at
> the link hidden in the following:
>
> documentation
>> <http://www.google.com/url?q=http%3A%2F%2Ftiddlywiki.com%2Fstatic%2FLists%252520in%252520WikiText.html&sa=D&sntz=1&usg=AFQjCNGWOkk3dRpS9mms4DjC9F2agpWvfw>
>
>
I didn't follow the link. ... my bad!
> Also, I didn't think someone would just drop me the URL to the
> documentation, as if saying: "there go look it up" or "figure it out
> yourself". I was already referring to that URL in my questions, so to just
> drop me the URL, especially without any comment/ explanation or anything,
> was just a bit of a disappointment to be honest.
>
You are right. I'm sorry.
------------
The point of the OP is, that the examples produce different HTML code. So
the CSS has to be different too. eg:
@@.check
* one
* two
@@
produces:
<ul class="check">
<li>one</li>
<li>two</li>
</ul>
which can be styled with CSS (just an example):
.check li {
background: yellow;
}
This mechanism is used, with Tobi Beers FontAwesome example page. ... but
IMO it uses a workflow, that is more complicated as it should be. ... As
you found out. Since what we want is the following:
---------------
*.done one
* two
produces:
<ul>
<li class="done">one</li>
<li>two</li>
</ul>
which can be styled with:
li.done {
background: yellow;
}
*Be aware, that I used ".done" *as the class indicator. So you can use
Tobias' TW for testing, without a styling conflict!
Styles used for the above HTML
li.done{
list-style-type:none;
padding:5px;
}
li.done: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;
}
I personally would try to make the stuff simpler with less dependencies. See my
German version.
http://tiddlywiki.com/languages/de-DE/#Task%20Management%20mit%20Listen:%5B%5BTask%20Management%20mit%20Listen%5D%5D%20%24%3A_TaskStylesheet%20%24%3A%2F_tags%2FListIcon
The concept is similar but has a simpler StyleSheet. ... Except creating the
data:uri css
<https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs>..
I use MDN Mozilla Developers Network as my reference manual for HTML, CSS and
JS stuff. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
have fun!
mario
--
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/051c083e-4ff3-48c1-9053-7dbfa3219f95%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
