*Warning: Potential "We knew this already, newbie" post. Tread carefully, tiwians.*
Some time back PMario showed a classy way to apply styles based on title of tiddler here <https://groups.google.com/forum/#!searchin/tiddlywiki/attribute$20CSS|sort:relevance/tiddlywiki/NiS6c9yO-Lg/EUWtncopBwAJ>. Mat took a bit further and attempted to apply styles based value of a particular field. The code he furnished in the thread, according to him, did not work . Whether or not he achieved it later is not clear. So here is a few ways to achieve the same based on PMario's work and Mat's near miss, each with its own advantages. *Method 1* - Back up - Open $:/core/ui/ViewTemplate - Add the highlighted code to the default. \define frame-classes() tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ \end \define folded-state() $:/state/folded/$(currentTiddler)$ \end <$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>> <$tiddler tiddler=<<currentTiddler>>> <$set name="customstylevar" value={{!!customstylefield}}> <div data-style=<<customstylevar>> class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list> </div></$set></$tiddler></$set></$set> - Create a tiddler. Make a field named ‘customstylefield’ and give it the value ‘Give me some blue’ (without the single quotes) - Create a stylesheet tiddler. Add the following to it [data-style="Give me some blue"] { background: blue; } - There you have it. To test further, create a second tiddler with the field ‘customstylefield’ and give it the value ‘redbg!?§$%&/()=@€~#yo’. Now to the stylesheet tiddler, define styles as [data-style="redbg!?§$%&/()=@€~#yo"] { background: red; fontweight:bold;} Advantage: Well, tags can be hard to declare in the stylesheet if they have spaces or special characters. Plus, tags form a part of interface. So if you are developing an app or ebook based on TW5 platform, having a special tag just to apply styles is less than gracious. Fields by the virtue of being hidden from user's view, is an ideal place to dump the variables that drive the process. *Method2* *Here we are taking it further. In a field, we are declaring multiple classes(Not attributes) that will affect that particular tiddler. * - Back up - Open $:/core/ui/ViewTemplate - Add the highlighted code to the default. \define frame-classes() tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ $(classfield)$ \end \define folded-state() $:/state/folded/$(currentTiddler)$ \end <$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>> <$set name="classfield" value={{!!customstylefield2}}> <div class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list> </div></$set> </$tiddler></$set></$set> - Create a tiddler. Make a field named ‘customstylefield2’ and give it the following value: *apple mango orange*. Add some text to the text field. - Create a stylesheet tiddler. Add the following to it .apple { background-color:Blue; } .mango{ color:red; } .orange{ font-weight:bold; text-align:center; text-transform:uppercase; } .orange .tc-title { display:none; } .mango .tc-subtitle { display:none; } - There you have it. REMEMBER: In case two of your classes have contradictory values, the one declared further down in the stylesheet will take effect. ie, in the above example if .orange had an attribute 'background-color:white;' it will override the background declaration in apple by virtue of being further down. This property can be used to apply styles based on presence on tags that get added only temporarily, without having to remove permanent tags. *Method 3* Now we are declaring the styles that affect the tiddler directly in the field, removing the stylesheet as the intermediary. While this cannot be used to hide elements like title and tags, it can be useful in areas where you want to override a single property from the classes you declared using method 1 or 2. - Back up - Open $:/core/ui/ViewTemplate - Add the highlighted code to the default. \define frame-classes() tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ \end \define folded-state() $:/state/folded/$(currentTiddler)$ \end <$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>> <$set name="custominlinestylevar" value={{!!custominlinestylefield3}}> <div class=<<frame-classes>> style=<<custominlinestylevar>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list> </div></$set> </$tiddler></$set></$set> - Create a tiddler. Make a field named ‘custominlinestylefield3’ and give it the following value: background:blue;color:red; - Save the tiddler and see the effect. Now some use cases. Expanding on the methods and tweaking the filters, we can use them to apply styles based on the first or last word in the text field. *Applying styles based on first word using method 2.* (Same can be achieved with method 1) - Instead of <$set name="classfield" value={{!!customstylefield2}}> in step 3 code snippet, add <$set name="classfield" filter="[list[!!text]first[]]"> - Create a tiddler with the text "Mary had a little lamb" - In the stylesheet declare a style for Mary. For eg; .Mary { bacground:yellow; color:red; } - There you have it. If you want to apply styles based on the first 5 words or so, set the filter to "[list[!!text]first[5]]" and declare the style as .firstword.secondword.thirdword.fourthword.fifthword {mystyle} REMEMBER: Approach is case sensitive. *Finally, for funsies.* - Add the following to your stylesheet .animated{-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both}@-webkit-keyframes tada{from{-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}10%, 20%{-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)}30%, 50%, 70%, 90%{-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)}40%, 60%, 80%{-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)}to{-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}}@keyframes tada{from{-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}10%, 20%{-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)}30%, 50%, 70%, 90%{-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)}40%, 60%, 80%{-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)}to{-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}}.tada{-webkit-animation-name: tada;animation-name: tada} - Open $:/core/ui/ViewTemplate - Add the highlighted code to the default. \define frame-classes() tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ $(classfield)$ animated tada \end - Close it. The effect happens everytime a new tiddler is added to storyline. The effect is taken from animate.css (https://daneden.github.io/animate.css/). Same method will work for other popular css animation libraries like hover.css and CSShake Take care and be semantic. PS: That funsies part is not so funsies after the headache and nausea sets in. Go for a milder animation like fadeIn or something. -- 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 tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. 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/81aa3042-4e82-4438-a2a6-25bacf5910ba%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
