This is like months old, and no one responded to you, but I would love to
see this too. Imagine a travel TW where restaurant links for one city are
one color, attractions are another color, etc.
Dave
On Tuesday, April 22, 2014 4:28:47 AM UTC-5, Måns wrote:
>
> If it's possible to use the color field value for css > then it should be
> possible to create a class for colored links?
>
> I like the idea of being able to use existing field values for different
> things -
>
> Den tirsdag den 22. april 2014 10.19.30 UTC+2 skrev Måns:
>>
>> 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.
