Hi TwWizards
I'm trying to make use of the tag color field value in other contexts where
it would be usefull for me.
Example:
I want to show a list of css formatted "mini-tiddlers" all tagged with
task. Each task has a color (field) value which categorizes it in groups as
a small task(yellow), medium task(blue) or big task(red).
Now I want the css background color style for the "mini-tiddlers" to
reflect these colors...
I guess this might be done either by overriding the background color of the
parent css class or by creating a new modified parent css class which
fetches the color field value from each tiddler in the list...
This is my list (where I try to override the background-color of the parent
css class (tw-link-info-item):
<$list filter="[tag[task]] -[[task]] +[!sort[modified]limit[300]]">
<div class="tw-link-info-item" style="background-color:{{!!color}};">
! <$link><$view field="title"/></$link>
<div class="tw-subtitle">Updated <$view field="modified"
format="relativedate"/></div>
|borderless small widetable|k
| Task<$button message="tw-modal" param={{!!title}} class="btn
btn-inverse"> preview </$button> |h
| <$list filter="[is[current]tagging[]sort[title]]"><br> <$link
to={{!!title}}><a href={{!!imageurl}} target="_blank"><img
src={{!!imageurl}} width="32" class="tw-image"
title={{!!title}}/></a></$link> <br>{{!!title||$:/core/ui/TagTemplate}}<br></$list><br>
|
| Start: <$edit-text field="start" tag="input" type="date"
format="YYYY-MM-DD"> </$edit-text> |
| End: <$edit-text field="end" tag="input" type="date"
format="YYYY-MM-DD"> </$edit-text> |
</div>
</$list>
The "mini-tiddler" class I borrowed from Jeremy's Community tab tiddler
sources :
{ .tw-link-info { -moz-column-count: 2; -moz-column-gap: 10px;
-webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap:
10px; } .tw-link-info-item { width: 100%; } } .tw-link-info-item { display:
inline-block; border: 1px solid #bbb; padding: 5px 10px; margin-bottom: 10px;
background: #fcf8f8; font-size: 0.8em; line-height: 1.2; } .tw-link-info-item
h1 { font-weight: 500; font-size: 16px; } .tw-scrollable-demo { border: 1px
solid #cfd6e6; background-color: #ecf2ff; padding: 1em; height: 400px; }
I wonder if I could make it be responsive to a color field value ?? :
{ .tw-link-info { -moz-column-count: 2; -moz-column-gap: 10px;
-webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap:
10px; } .tw-link-info-item { width: 100%; } } .tw-link-info-item { display:
inline-block; border: 1px solid #bbb; padding: 5px 10px; margin-bottom: 10px;
background: {{!!color}}; font-size: 0.8em; line-height: 1.2; }
.tw-link-info-item h1 { font-weight: 500; font-size: 16px; }
.tw-scrollable-demo { border: 1px solid #cfd6e6; background-color: #ecf2ff;
padding: 1em; height: 400px; }
Cheers Måns Mårtensson
[**] Work in progress: http://opgavefordeling.tiddlyspot.com/ css class is
in the tiddler infoCSS ..
--
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 http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
