> I was looking for ways to color code my tiddlers (by category) and put
> structural colorinfo to my TW, based on a basic category a tiddler
> belong to (– say, given as a tag).
...
Here's one approach to color-coding different elements of a tiddler,
using CSS
1) For each tag value used as a category and each class of tiddler
element that you want to color-code, add CSS style rules to your
[[StyleSheet]], like this:
.someClass .title { color:red; background:#eef; }
.someClass .subtitle { color:#090; }
.someClass .viewer { background:#eef; }
.someClass .tiddlyLinkExisting { color:#009; }
.someOtherClass .title { color:green; background:#fee; }
.someOtherClass .subtitle { color:#900; }
.someOtherClass .viewer { background:#fee; }
.someOtherClass .tiddlyLinkExisting { color:#900; }
etc.
2) Create a new tiddler called [[SetColorCode]], with the following
inline script that tests the current tiddler's tags and determines the
desired 'colorCode' CSS classname, which is then added to the
containing tiddler element...
<script>
var here=story.findContainingTiddler(place);
if (!here) return; /* not in a tiddler! */
var tid=store.getTiddler(here.getAttribute('tiddler'));
var colorCode='';
/* CONDITIONALS GO HERE... */
if (tid.isTagged('someTag'))
colorCode='someClass';
if (tid.isTagged('someOtherTag'))
colorCode='someOtherClass';
if (tid.tags.containsAny(['tagOne','tagTwo','tagThree']))
colorCode='yetAnotherClass';
/* END OF CONDITIONAL */
here.className='tiddler '+colorCode; /* add the class to the
tiddler */
</script>
3) To apply the color-coding coding logic to all tiddlers, add the
following to the end of your ViewTemplate, EditTemplate, and
CollapsedTemplate (if you are using TiddlyTools'
CollapseTiddlersPlugin):
<span style='display:none' macro='tiddler SetColorCode'></span>
This will automatically invoke the inline script each time any tiddler
is displayed, edited or folded, thus ensuring that the color coding
can be consistently applied to all tiddlers, based on their tags.
4) Start tagging your tiddlers and watch their colors change
accordingly!
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/TiddlyWiki?hl=en
-~----------~----~----~----~------~----~------~--~---
