From 19085a127704997ae815b76e643596c7025d2044 Mon Sep 17 00:00:00 2001 From: Mario Pietsch Date: Tue, 24 Apr 2018 23:08:20 +0200 Subject: [PATCH] Add data attributes to ViewTemplate (#3209) * change 3 set-widgets to 1 var-widget call. Add data-tags and userClass. * add new documentation and change the existing one accordingly. --- core/ui/ViewTemplate.tid | 6 +- .../howtos/Custom Styles by title.tid | 39 ++++++++++++ .../howtos/Custom Styles by userClass.tid | 26 ++++++++ .../howtos/Custom_Attribute_Selectors.tid | 31 ++++++++++ .../tiddlers/howtos/Custom_Styles_FAQ.tid | 9 +++ .../tiddlers/howtos/Custom_data-styles.tid | 35 +++++++++++ .../howtos/Custom_styles_by_data-tags.tid | 60 +++++++++++++++++++ .../howtos/Hard_Linebreaks_with_CSS.tid | 26 ++++++++ .../Hard_Linebreaks_with_CSS_-_Example.tid | 14 +++++ .../How to apply custom styles by tag.tid | 9 ++- .../howtos/How to apply custom styles.tid | 10 ++++ .../tiddlers/howtos/Using Stylesheets.tid | 55 +++++++++-------- .../howtos/faq/csFAQ_dynamic_stylesheet.tid | 8 +++ .../faq/csFAQ_how_can_i_use_custom_field.tid | 30 ++++++++++ .../faq/csFAQ_what_if_tiddler_has_no_tags.tid | 19 ++++++ .../faq/csFAQ_what_this_and_that_tag.tid | 33 ++++++++++ .../faq/csFAQ_what_this_or_that_tag.tid | 17 ++++++ .../tw5.com/tiddlers/system/Deprecated.tid | 8 +++ .../system/Deprecated_-_What_does_it_mean.tid | 16 +++++ .../tw5.com/tiddlers/system/doc-macros.tid | 9 ++- .../tw5.com/tiddlers/system/doc-styles.tid | 24 ++++++-- .../tiddlers/system/version-macros.tid | 13 +++- themes/tiddlywiki/vanilla/base.tid | 10 ++++ 23 files changed, 466 insertions(+), 41 deletions(-) create mode 100644 editions/tw5.com/tiddlers/howtos/Custom Styles by title.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Custom Styles by userClass.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Custom_Attribute_Selectors.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Custom_Styles_FAQ.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Custom_data-styles.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Custom_styles_by_data-tags.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS_-_Example.tid create mode 100644 editions/tw5.com/tiddlers/howtos/How to apply custom styles.tid create mode 100644 editions/tw5.com/tiddlers/howtos/faq/csFAQ_dynamic_stylesheet.tid create mode 100644 editions/tw5.com/tiddlers/howtos/faq/csFAQ_how_can_i_use_custom_field.tid create mode 100644 editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_if_tiddler_has_no_tags.tid create mode 100644 editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_and_that_tag.tid create mode 100644 editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_or_that_tag.tid create mode 100644 editions/tw5.com/tiddlers/system/Deprecated.tid create mode 100644 editions/tw5.com/tiddlers/system/Deprecated_-_What_does_it_mean.tid diff --git a/core/ui/ViewTemplate.tid b/core/ui/ViewTemplate.tid index 6b439dff9..ce685c148 100644 --- a/core/ui/ViewTemplate.tid +++ b/core/ui/ViewTemplate.tid @@ -1,11 +1,11 @@ title: $:/core/ui/ViewTemplate \define frame-classes() -tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ +tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ $(userClass)$ \end \define folded-state() $:/state/folded/$(currentTiddler)$ \end -<$set name="storyTiddler" value=<>><$set name="tiddlerInfoState" value=<>><$tiddler tiddler=<>>
> data-tiddler-title=<>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<>/> +<$vars storyTiddler=<> tiddlerInfoState=<> userClass={{!!class}}><$tiddler tiddler=<>>
> data-tags={{!!tags}} class=<>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<>/>
- + diff --git a/editions/tw5.com/tiddlers/howtos/Custom Styles by title.tid b/editions/tw5.com/tiddlers/howtos/Custom Styles by title.tid new file mode 100644 index 000000000..c3730d6d7 --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Custom Styles by title.tid @@ -0,0 +1,39 @@ +created: 201804111739 +modified: 201804111739 +tags: [[How to apply custom styles]] +title: Custom styles by data-tiddler-title +type: text/vnd.tiddlywiki + +! Attribute: data-tiddler-title + +<<.from-version "5.1.16">> + +The ~TiddlyWiki core adds several `attributes` to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content. + +For example this tiddler is named: "{{!!title}}" so the attribute looks like this: + +``` +data-tiddler-title="Custom styles by title" +``` + +!! Examples + +The following CSS is defined in [[Custom data-styles]] and creates a blue border for exactly this tiddler. + +``` +[data-tiddler-title="Custom styles by title"] { + border: 1px solid blue; +} +``` + +To create a green border for every tiddler that starts with `$:/` aka system tiddlers, you'd need to use CSS like so: (not applied here but you can experiment with it! ) + +``` +[data-tiddler-title^="$:/"] { + border: 1px solid green; +} +``` + +!! More Possibilities + +{{Attribute Selectors}} diff --git a/editions/tw5.com/tiddlers/howtos/Custom Styles by userClass.tid b/editions/tw5.com/tiddlers/howtos/Custom Styles by userClass.tid new file mode 100644 index 000000000..9a1d4c609 --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Custom Styles by userClass.tid @@ -0,0 +1,26 @@ +created: 201804111739 +modified: 201804111739 +title: Custom styles by user-class +tags: [[How to apply custom styles]] +type: text/vnd.tiddlywiki + +''Tiddler Field: `class`'' <<.from-version "5.1.16">> + +The [[tag manager|$:/TagManager]] allows us to set a tiddler `color` field, that is used to define the "tag-pill" colour. Since: <<.from-version "5.1.16">> we can define a `class` field, that is directly inserted into the [[ViewTemplate|$:/core/ui/ViewTemplate]] and it can be used for styling: + +""" +title: `anyName` +tags: `$:/tags/Stylesheet` +class: `myClass` +""" + +Every tiddler, that has a `class` field can be styled that way! + +``` +.myClass { + border: 2px solid blue; +} + +``` + +Learn more at: [[How to apply custom styles]] \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/howtos/Custom_Attribute_Selectors.tid b/editions/tw5.com/tiddlers/howtos/Custom_Attribute_Selectors.tid new file mode 100644 index 000000000..e5e36d4ec --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Custom_Attribute_Selectors.tid @@ -0,0 +1,31 @@ +created: 20170126152839462 +modified: 201804111739 +tags: [[Custom data-styles]] +title: Attribute Selectors +type: text/vnd.tiddlywiki + +;[attr] +:Represents an element with an attribute name of attr. + +;[attr="value"] +:Represents an element with an attribute name of attr and whose value is exactly "value". + +;[attr~="value"] +:Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value". + +;[attr|="value"] +:Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches. + +;[attr^="value"] +:Represents an element with an attribute name of attr and whose first value is prefixed by "value". + +;[attr$="value"] +:Represents an element with an attribute name of attr and whose last value is suffixed by "value". + +;[attr*="value"] +:Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring. + +;[attr "operator value" i] +:Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range). + +Learn more at: [[Attribute selectors - CSS|https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors]] or [[CSS-Specification|https://www.w3.org/TR/CSS22/selector.html#attribute-selectors]] \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/howtos/Custom_Styles_FAQ.tid b/editions/tw5.com/tiddlers/howtos/Custom_Styles_FAQ.tid new file mode 100644 index 000000000..6fb06c86f --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Custom_Styles_FAQ.tid @@ -0,0 +1,9 @@ +modified: 201804111739 +created: 201804111739 +title: Custom Styles FAQ +tags: [[How to apply custom styles]] FAQ-group +type: text/vnd.tiddlywiki + +<<.from-version "5.1.16">> + +<> diff --git a/editions/tw5.com/tiddlers/howtos/Custom_data-styles.tid b/editions/tw5.com/tiddlers/howtos/Custom_data-styles.tid new file mode 100644 index 000000000..884dab36a --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Custom_data-styles.tid @@ -0,0 +1,35 @@ +created: 201804111739 +modified: 201804111739 +tags: data-tags-styles [[How to apply custom styles]] $:/tags/Stylesheet +title: Custom data-styles +type: text/vnd.tiddlywiki + +[data-tiddler-title="Custom styles by title"] { + border: 1px solid blue; +} + +[data-tags*="example-test"] { + border: 2px solid pink; +} + +[data-tags*="example-hardlinebreaks"] .tc-tiddler-body { + word-break: normal; + word-wrap: break-word; + white-space: pre-wrap; +} + +[data-tags*="data-tags-styles"] .tc-tiddler-body { + display: block; + padding: 14px; + margin-top: 1em; + margin-bottom: 1em; + word-break: normal; + word-wrap: break-word; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #cccccc; + padding: 0 3px 2px; + border-radius: 3px; + font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; +} + diff --git a/editions/tw5.com/tiddlers/howtos/Custom_styles_by_data-tags.tid b/editions/tw5.com/tiddlers/howtos/Custom_styles_by_data-tags.tid new file mode 100644 index 000000000..62df8bdcb --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Custom_styles_by_data-tags.tid @@ -0,0 +1,60 @@ +created: 20170124132500000 +modified: 201804111739 +tags: example-test [[How to apply custom styles]] +title: Custom styles by data-tags +type: text/vnd.tiddlywiki + +! Attribute: data-tags + +<<.from-version "5.1.16">> + +The ~TiddlyWiki core adds several `attributes` to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content. + +For example this tiddler is tagged: <> and <> so the attribute looks like this: + +``` +data-tags="[[How to apply custom styles]] example-test" +``` + +''Important:'' Tiddler tags are ''not'' sorted, so the order in the rendered output may be different! + +!! Examples + +The following CSS is defined in [[Custom data-styles]] and creates a pink border for exactly this tiddler. + +``` +[data-tags*="example-test"] { + border: 2px solid pink; +} +``` + +!!! Styling Stylesheets + +So to display tiddlers tagged: `data-tags-styles` in a decent way we can use the following code. (I could have used: `$:/tags/Stylesheet`, but that would affect all stylesheets in this wiki, which is not intended. amt ;) + +''Important:'' Don't forget the `.tc.tiddler.body`, otherwise the whole tiddler, including the title will be changed! see: [[Custom data-styles]] + +``` +[data-tags*="data-tags-styles"] .tc-tiddler-body { + display: block; + padding: 14px; + margin-top: 1em; + margin-bottom: 1em; + word-break: normal; + word-wrap: break-word; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #cccccc; + padding: 0 3px 2px; + border-radius: 3px; + font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; +} +``` + +!! Hard Linebreaks + +This mechanism may be handy for users, who want to write prose text! see: [[Hard Linebreaks with CSS]] + +!! More Possibilities + +{{Attribute Selectors}} diff --git a/editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS.tid b/editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS.tid new file mode 100644 index 000000000..200ed14be --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS.tid @@ -0,0 +1,26 @@ +created: 20170126174506507 +modified: 20170126211042714 +tags: [[Hard Linebreaks in WikiText]] +title: Hard Linebreaks with CSS +type: text/vnd.tiddlywiki + +Since TiddlyWiki Version 5.1.16, it's possible to apply customs styles with `data-` attributes. see: [[How to apply custom styles]] + +The [[Custom data-styles]] stylesheet tiddler contains the following definition: + +``` +[data-tags*="example-hardlinebreaks"] .tc-tiddler-body { + word-break: normal; + word-wrap: break-word; + white-space: pre-wrap; +} +``` + +If rendered without the tag, the content of "Hard Linebreaks with CSS - Example" will be shown like this: + +>{{Hard Linebreaks with CSS - Example}} + +---- + +Open the tiddler to see the custom CSS rules applied: [[Hard Linebreaks with CSS - Example]] + diff --git a/editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS_-_Example.tid b/editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS_-_Example.tid new file mode 100644 index 000000000..895a920c9 --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS_-_Example.tid @@ -0,0 +1,14 @@ +created: 20170126161803543 +modified: 20170126211025840 +tags: example-hardlinebreaks [[Hard Linebreaks in WikiText]] +title: Hard Linebreaks with CSS - Example +type: text/vnd.tiddlywiki + +The following text is rendered without any special WikiText syntax. So most of the ~WikiText functionality will be accessible. + +This is a line +and this is a new line +while this is yet another line +and this is the final one +apart from this one + diff --git a/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid b/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid index ebf07df78..bc6c2ccf2 100644 --- a/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid +++ b/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid @@ -1,9 +1,14 @@ +caption: {{!!title}} - ^^deprecated^^ created: 20141001132300000 -modified: 20151005074702387 -tags: Learning +modified: 201804111739 +tags: [[How to apply custom styles]] $:/deprecated title: How to apply custom styles by tag type: text/vnd.tiddlywiki +<<.deprecated-since "5.1.16 <- click" "Custom styles by data-tags">>. Also see: [[How to apply custom styles]] + +---- + You can apply custom styles to tiddlers that have a particular tag by defining a CSS class with the name `tc-tagged-`. For example, to make tiddlers tagged "NightReader" appear in a special colour scheme suitable for night-time reading, [[create a stylesheet|Using Stylesheets]] defining the class `tc-tagged-NightReader` like this: diff --git a/editions/tw5.com/tiddlers/howtos/How to apply custom styles.tid b/editions/tw5.com/tiddlers/howtos/How to apply custom styles.tid new file mode 100644 index 000000000..df347f002 --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/How to apply custom styles.tid @@ -0,0 +1,10 @@ +created: 20141001132300000 +list: [[Custom styles by data-tags]] [[Custom styles by title]] +modified: 201804111740 +tags: [[Customise TiddlyWiki]] +title: How to apply custom styles +type: text/vnd.tiddlywiki + +At the moment there are several ways to apply custom styles. + +<> diff --git a/editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid b/editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid index 69c8d8c7b..d9cf73041 100644 --- a/editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid +++ b/editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid @@ -1,46 +1,51 @@ created: 20140305091244145 -modified: 20150221175658000 +modified: 201804111739 tags: [[Customise TiddlyWiki]] title: Using Stylesheets type: text/vnd.tiddlywiki -The first steps to changing the appearance of TiddlyWiki are to choose and apply one of the available themes, or to modify the [[colour palette|ColourPalettes]]. +\define tv-config-toolbar-text() yes -In addition, custom [[CSS stylesheets|http://www.w3schools.com/css]] can be defined by tagging a tiddler `$:/tags/Stylesheet`. Try creating a custom stylesheet now with the following content in order to change the page background colour to red: +\define openCpTheme() +<$action-setfield $tiddler="$:/state/tab-1749438307" $value="$:/core/ui/ControlPanel/Appearance"/> +<$action-setfield $tiddler="$:/state/tab--1963855381" $value="$:/core/ui/ControlPanel/Theme"/> +<$action-navigate $to="$:/ControlPanel"/> +\end + +! Theme and Colorpalette + +The first steps to changing the appearance of ~TiddlyWiki are to choose and apply: + +* One of the available themes: {{$:/core/ui/Buttons/theme}} +* Modify the colour palette: {{$:/core/ui/Buttons/palette}} +* Experiment with the <$button actions=<> >{{$:/core/images/options-button}} ControlPanel + +! Work with Stylesheets + +In addition to the control panel, custom styles can be defined by tagging a tiddler `$:/tags/Stylesheet`. Try creating a custom stylesheet now with the following content in order to change the page background colour to red: ``` -html body.tc-body { +body.tc-body { background: red; } ``` +!! Additional Resrouces + +* [[Cascading Style Sheets (CSS) at mozilla|https://developer.mozilla.org/en-US/docs/Web/CSS]] +* [[Cascading Style Sheets (CSS) at w3scools|http://www.w3schools.com/css]] + ! Overriding Theme Settings -Custom stylesheets are applied independently from theme stylesheets. Therefore, it is often necessary for the css rules in your custom stylesheet to be more specific than those of the theme you want to override. For example, `html body.tc-body` is more specific than `body.tc-body`. +Custom stylesheets are applied independently from theme stylesheets. Therefore, it is often necessary for the css rules in your custom stylesheet to be more specific than those of the theme you want to override. For example, `html body.tc-body` is more specific than `body.tc-body`. -!!! Ordering of stylesheets - -Ordering of stylesheets is controlled in the main stylesheet $:/core/ui/PageStylesheet by the following list filter: - -``` -<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]]"/> -``` - -With help of a list-after field in a custom stylesheet, the order of the stylesheets can be rearranged to ease overwriting theme styles. - -<<< -To check the order of all stylesheets in use, enter the following filter in the filter tab of Advanced search: - -``` -[all[shadows+tiddlers]tag[$:/tags/Stylesheet]] -``` -<<< +<<.tip "''You should always start with the least specific value that works!''

">> ! Stylesheet Types -Usually it is best to use the type `text/css` for stylesheets. This treats them as plain stylesheets, and ensures that TiddlyWiki doesn't apply any wiki processing to them. +Usually it is best to use the type `text/css` for stylesheets. This treats them as plain stylesheets, and ensures that ~TiddlyWiki doesn't apply any wiki processing to them. -If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type `text/vnd.tiddlywiki`. This allows full WikiText processing to be performed. Here is an example: +If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type `text/vnd.tiddlywiki`. This allows full ~WikiText processing to be performed. Here is an example: ``` \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html @@ -50,7 +55,7 @@ body.tc-body pre { } ``` -The `\rules` pragma at the top of the tiddler restricts the WikiText to just allow macros and transclusion. This avoids mistakenly triggering unwanted WikiText processing. +The `\rules` pragma at the top of the tiddler restricts the ~WikiText to just allow macros and transclusion. This avoids mistakenly triggering unwanted ~WikiText processing. A stylesheet tiddler is processed such that it is first wikified and then the text portion of the ouput is extracted to apply as the CSS. Any HTML tags you will use in your stylesheet are thus ignored. For example, HTML elements generated by the RevealWidget will not affect the output. As in the following example, you can wrap CSS rules in `
` tags to display them as a codeblock without affecting processing, including handling the inner macro.
 
diff --git a/editions/tw5.com/tiddlers/howtos/faq/csFAQ_dynamic_stylesheet.tid b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_dynamic_stylesheet.tid
new file mode 100644
index 000000000..50d29777e
--- /dev/null
+++ b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_dynamic_stylesheet.tid
@@ -0,0 +1,8 @@
+created: 201804111739
+modified: 201804111739
+title: Q: Is there a way to create dynamic stylesheets?
+tags: [[Custom Styles FAQ]]
+
+''Answer:'' <<.from-version "5.1.16">>
+
+Yes, see: [[Q: How can I use a custom field to style a tiddler?]]
diff --git a/editions/tw5.com/tiddlers/howtos/faq/csFAQ_how_can_i_use_custom_field.tid b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_how_can_i_use_custom_field.tid
new file mode 100644
index 000000000..0a1d7d0cc
--- /dev/null
+++ b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_how_can_i_use_custom_field.tid
@@ -0,0 +1,30 @@
+created: 201804111739
+modified: 201804111739
+title: Q: How can I use a custom field to style a tiddler?
+tags: [[Custom Styles FAQ]]
+
+
+''Consider the following usecase:'' <<.from-version "5.1.16">>
+
+There is a field named: `rank`, which can hold different values eg: `species`.
+
+''Answer:''
+
+The idea is now: We dynamically create the stylesheet. The style-sheet can look like this: 
+
+"""
+title: `myStyles`
+tags: `$:/tags/Stylesheet`
+"""
+
+```
+<$list filter="[rank[species]]"> 
+[data-tiddler-title^="<$view field=title/>"] .tc-tiddler-body {
+    column-count: 2;
+}
+ 
+```
+
+This creates a CSS rule for every tiddler-title, that has a field `rank` and value `species`.
+
+[[Learn more about possible attributes!|Attribute Selectors]]
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_if_tiddler_has_no_tags.tid b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_if_tiddler_has_no_tags.tid
new file mode 100644
index 000000000..2f35a01ae
--- /dev/null
+++ b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_if_tiddler_has_no_tags.tid
@@ -0,0 +1,19 @@
+created: 201804111739
+modified: 201804111739
+title: Q: What if a tiddler has no tags?
+tags: [[Custom Styles FAQ]]
+
+''Answer:'' <<.from-version "5.1.16">>
+
+* If a tiddler has no tags, but needs styling use: `data-tiddler-title` as CSS selector
+** There is only one tiddler 
+
+* If a user wants to style system tiddlers in a custom way: use: `[data-tiddler-title^="$:"/]` as a selector
+** using the TW namespace functionality
+
+* If the user wants special behaviour for tagged tiddlers. eg: Learning
+** use: `[data-tags*="Learning"]` as CSS selector. 
+
+The names I'm using are only used for documentation purpose, without changing the existing wiki. I don't want, that the docs has side effects. 
+
+[[Learn more about possible attributes!|Attribute Selectors]]
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_and_that_tag.tid b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_and_that_tag.tid
new file mode 100644
index 000000000..6911f3dac
--- /dev/null
+++ b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_and_that_tag.tid
@@ -0,0 +1,33 @@
+created: 201804111739
+modified: 201804111739
+title: Q: How can I style a tiddler if it has "this" AND "that" tag?
+tags: [[Custom Styles FAQ]]
+
+''Answer:'' <<.from-version "5.1.16">>
+
+If tiddler has both: `this` AND tag `that` create an orange border.
+
+```
+[data-tags*="bar"][data-tags*="froz"] {
+  border: 2px solid orange;
+}
+```
+
+''If your CSS looks like this: ''
+
+```
+[data-tags~="this"] {
+  border: 2px solid blue;
+}
+
+[data-tags~="that"] {
+  border: 2px solid red;
+}
+```
+
+`this` creates a blue border
+`that` creates a red border
+If you swap positions, you get it the other way around.
+
+
+[[Learn more about possible attributes!|Attribute Selectors]]
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_or_that_tag.tid b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_or_that_tag.tid
new file mode 100644
index 000000000..8eada2456
--- /dev/null
+++ b/editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_or_that_tag.tid
@@ -0,0 +1,17 @@
+created: 201804111739
+modified: 201804111739
+title: Q: How can I style a tiddler if it has "this" OR "that" tag?
+tags: [[Custom Styles FAQ]]
+
+''Answer:'' <<.from-version "5.1.16">>
+
+Either tag `this` or tag `that` create a red border.
+
+```
+[data-tags~="this"],
+[data-tags~="that"] {
+  border: 2px solid red;
+}
+```
+
+[[Learn more about possible attributes!|Attribute Selectors]]
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/system/Deprecated.tid b/editions/tw5.com/tiddlers/system/Deprecated.tid
new file mode 100644
index 000000000..c8370cb8e
--- /dev/null
+++ b/editions/tw5.com/tiddlers/system/Deprecated.tid
@@ -0,0 +1,8 @@
+created: 20170126143833588
+modified: 201804111739
+title: $:/deprecated
+type: text/vnd.tiddlywiki
+
+<<<
+In several fields, deprecation is the discouragement of use of some feature, design or practice; typically because it has been superseded or is no longer considered safe – but without completely removing it or prohibiting its use.
+<<< [[wikipedia|https://en.wikipedia.org/wiki/Deprecation]]
diff --git a/editions/tw5.com/tiddlers/system/Deprecated_-_What_does_it_mean.tid b/editions/tw5.com/tiddlers/system/Deprecated_-_What_does_it_mean.tid
new file mode 100644
index 000000000..37f98c3f1
--- /dev/null
+++ b/editions/tw5.com/tiddlers/system/Deprecated_-_What_does_it_mean.tid
@@ -0,0 +1,16 @@
+created: 20170126142116898
+modified: 201804111739
+title: Deprecated - What does it mean
+type: text/vnd.tiddlywiki
+
+First of all: ''Keep calm!''
+
+{{$:/deprecated}}
+
+For ~TiddlyWiki it means, that you should not use this mechanism for new content anymore! ''AND you should update your existing content''!
+
+Deprecated features have a marker. see: [[Custom styles by tag]]
+
+''Tiddlers tagged `$:/deprecated`''
+
+><>
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/system/doc-macros.tid b/editions/tw5.com/tiddlers/system/doc-macros.tid
index c6abc6931..f1c846775 100644
--- a/editions/tw5.com/tiddlers/system/doc-macros.tid
+++ b/editions/tw5.com/tiddlers/system/doc-macros.tid
@@ -1,7 +1,8 @@
 created: 20150117152607000
-modified: 20150228081437000
-title: $:/editions/tw5.com/doc-macros
+modified: 201804111739
 tags: $:/tags/Macro
+title: $:/editions/tw5.com/doc-macros
+type: text/vnd.tiddlywiki
 
 \define .concat(1,2,3,4,5) $1$$2$$3$$4$$5$
 
@@ -108,4 +109,6 @@ This is an example tiddler. See [[Table-of-Contents Macros (Examples)]].
 	
 
 
-\end
\ No newline at end of file
+\end
+
+
<$view field="text"/>

\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/system/doc-styles.tid b/editions/tw5.com/tiddlers/system/doc-styles.tid
index 06b3c956d..101fbe2f6 100644
--- a/editions/tw5.com/tiddlers/system/doc-styles.tid
+++ b/editions/tw5.com/tiddlers/system/doc-styles.tid
@@ -1,7 +1,8 @@
 created: 20150117152612000
-modified: 20150226162159000
-title: $:/editions/tw5.com/doc-styles
+modified: 201804111739
 tags: $:/tags/Stylesheet
+title: $:/editions/tw5.com/doc-styles
+type: text/vnd.tiddlywiki
 
 .doc-def {
 	font-style: normal;
@@ -176,10 +177,23 @@ tr.doc-table-subheading {
     vertical-align: text-bottom;
 }
 
+.doc-deprecated-version {
+    display: inline-block;
+    border-radius: 1em;
+	background: red;
+	color: <>;
+	fill: <>;
+    padding: 0 0.4em;
+    font-size: 0.7em;
+    text-transform: uppercase;
+    font-weight: bold;
+    line-height: 1.5;
+    vertical-align: text-bottom;
+}
+
+.doc-deprecated-version svg,
 .doc-from-version svg {
 	width: 1em;
 	height: 1em;
     vertical-align: text-bottom;
-}
-
-
+}
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/system/version-macros.tid b/editions/tw5.com/tiddlers/system/version-macros.tid
index 5e0522cfc..763252000 100644
--- a/editions/tw5.com/tiddlers/system/version-macros.tid
+++ b/editions/tw5.com/tiddlers/system/version-macros.tid
@@ -1,8 +1,15 @@
 created: 20161008085627406
-modified: 20161008085627406
-title: $:/editions/tw5.com/version-macros
+modified: 201804111739
 tags: $:/tags/Macro
+title: $:/editions/tw5.com/version-macros
+type: text/vnd.tiddlywiki
 
 \define .from-version(version)
-{{$:/core/images/warning}} New in $version$
+{{$:/core/images/warning}} New in: $version$
 \end
+
+\define .deprecated-since(version, superseeded:"TODO-Link")
+<$button to="Deprecated - What does it mean" class="doc-deprecated-version tc-btn-invisible">{{$:/core/images/warning}} Deprecated since: $version$  use [[$superseeded$]] instead!
+\end
+
+
<$view field="text"/>

\ No newline at end of file
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index c39a3e05b..18d54c6c7 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -474,6 +474,16 @@ html body.tc-body .tc-btn-rounded:hover svg {
 	margin: 0;
 }
 
+/* used for documentation "fake" buttons */
+.tc-btn-standard {
+	line-height: 1.8;
+	color: #667;
+	background-color: #e0e0e0;
+	border: 1px solid #888;
+	padding: 2px 1px 2px 1px;
+	margin: 1px 4px 1px 4px;
+}
+
 .tc-btn-big-green {
 	display: inline-block;
 	padding: 8px;