User Class and Customizing Tiddler Visual Style

[Mohammad]

Tiddlywiki from release 5.1.16 has a great feature called user class.

One can define a class field, that is directly inserted into the ViewTemplate and it can be used for styling.

This feature is under-documented and have got a little attention, but it is quite powerful in customizing the visual style of tiddlers.

Here in Shiraz plugin 2.0.0 beta 7, a section has been dedicated and several css classes are provided to be used with user class

to customize tiddlers. Different examples have been provided to see how it works.

demo: Tiddler Custom Style Tutorial

--Mohammad

[TonyM]

Mohammad,

Thanks for sharing this. I note multiple classes can be placed in a single tiddlers class field and they are all applied.

An additional style could be used to colour the background of the title which I use myself. However I tend to change the colour according to a condition. For example tiddlers set for archive have a black border around the title and the title background is set to green (new) yellow (in progress) Red (closed), Yellow (Canceled). 

It would be nice to document the way of doing this conditionally if possible in css.

Regards

Tony 

[Mohammad]

Hi Tony,

 I think this can be done using tag and a conditional viewtemplate!

If you look at https://kookma.github.io/TW-Semantic-Colors/

It uses tags for this purpose. for example beginner tag create a orange border and like that

If this work for you I can also create the one you asked above or you can hack the Semantic colors for your case.

Best

Mohammad

[PMario]

Hi Tony,

I think this link may have what you need.

have fun!

mario

[HC Haase]

looks nice.. I like the border colors in the semantic colors.

Do you know if it is possible, in the sylesheets, to make a reference to a tiddler field with the color value instead of harddcoding the color? e.g.

[data-tags~="beginner"]{ border-left: 5px solid {{beginner!!color}};}

(the above do not work!)

If we could make the semantic color be the same as the color field of the tag, it would follow the color of tag pill and icon for the tag. I think that would look nice, and it would also make it easier to edit corlors.

[@TiddlyTweeter]

Mohammad wrote:

 Tiddlywiki from release 5.1.16 has a great feature called user class. ...

 

This feature is under-documented and have got a little attention

Right. TBH I think we need a Visual Design Orientated Wiki. That starts with visuals and illustrates the many methods in TW to apply CSS by example.

I think a bit-by-bit approach isn't enough. We need a better visual design overview of TW to make the best of it.  IMO. 

Just thoughts

TT

[Mohammad]

Hi

On Monday, November 4, 2019 at 1:32:37 PM UTC+3:30, HC Haase wrote:

looks nice.. I like the border colors in the semantic colors.

Do you know if it is possible, in the sylesheets, to make a reference to a tiddler field with the color value instead of harddcoding the color? e.g.

[data-tags~="beginner"]{ border-left: 5px solid {{beginner!!color}};}

This should work! note in your case beginner should be a tiddler! have you created it?

Also you can create a macro to substitute it, like the colour macro used in vanilla theme 

[PMario]

On Monday, November 4, 2019 at 11:02:37 AM UTC+1, HC Haase wrote:

 

[data-tags~="beginner"]{ border-left: 5px solid {{beginner!!color}};}

Did you tag the above tiddler with $:/tags/Stylesheet ??

I did a test, and it works.

-m

[David Gifford]

This is all really neat, both Mohammad's original post and Mario's link to stuff I had not seen. Opens up a lot of possibilities.

A modest suggestion and a question:

1. Suggestion: Mohammad, if you expect other users to remember and use your colors, it might be better to use short, easy to remember color names instead of things like danger, warning or gainsboro. In my mind, danger and warning are easy to confuse. And I wouldn't want to memorize or type out anything as long as lemonchiffon. Having them be color names also allows the user to determine what each color will be used for, whereas your pre-set labels primes users to use them your way.

For example, maybe low-blue and low-pink, etc would be a better option for 'Low tone' colors. FYI, I use pinkbk and orangebk for my background CSS classes.

Anyway, just suggestions, for what they are worth.

2. Question: is there a way to use any of this to create custom colored links to the tiddlers so classed? It sure would be nice to have different kinds of tiddlers linked to with links of different colors.

[HC Haase]

@Mohammad and @PMario thanks for your replies

I can't get i to work however. I don understand why, I (think) did all you suggested. I downloaded the semantic colour wiki and made the changes but it don't work. could you maybe do a test in the attached wiki if you have time? thanks.

[HC Haase]

mandag den 4. november 2019 kl. 17.41.43 UTC+1 skrev David Gifford:

This is all really neat, both Mohammad's original post and Mario's link to stuff I had not seen. Opens up a lot of possibilities.

2. Question: is there a way to use any of this to create custom colored links to the tiddlers so classed? It sure would be nice to have different kinds of tiddlers linked to with links of different colors.

That could look nice.

Maybe the scope of the colour could be expanded, so a color change of a tiddler would change the tiddler on multiple levels.

 * tagpill (present)

 * icon (present)

 * links to the tiddler

 * elements of the tiddler or child tiddlers (could be set with a checkbox?)

 ** title

 ** text

 ** background

That would realy make the colours more integrated in the information of the wiki

 ** left border

[PMario]

Hi HC,

If you want to use wikitext features as transclusions in style-sheet tiddlers you need to make them text/vnd-tiddlywiki and _not_ text/css

Since your first style definition failed, the whole tiddler failed.

Use the attachment and it should work.

-mario

[HC Haase]

Tank you for your help PMario! I could not see it.

it makes sense, that wikitext can't me interpreted if it has a css type. but how come css works in a text/vnd-tiddlywiki tiddler??

[PMario]

On Friday, November 8, 2019 at 10:03:15 AM UTC+1, HC Haase wrote:

Tank you for your help PMario! I could not see it.

it makes sense, that wikitext can't me interpreted if it has a css type. but how come css works in a text/vnd-tiddlywiki tiddler??

By TW-magic :)

The TW startup module render.js contains some code, that builds the DOM <style> element, that contains every stylesheet definition available in TW.

This element is needed by the browser. The browser expects, that it contains css definitions.

The core/ui/PagesStylesheet tiddler contains the build instructions. The input type is text/vnd-tiddlywiki. The output, if done right, is text/css compatible.  That's what the browser expects to be in the <style> element.

-mario