mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-09-04 17:18:53 +00:00
Code Issues Releases Wiki Activity

[doc update] Custom_styles_by_data-tags.tid (#3355)

Browse Source 
A few minor improvements that I propose are merged directly.

But, @pmario , we also need a clarifying example showing how to target a tiddler using *multiple* tags. So, under the examples there ought to be something like this:... BUT I fail to get this to work (syntax?):

```
[data-tags*="[[How to apply custom styles]] example-test"] {
  outline: 2px solid green;
}
```

Further, the text states that

`Important: Tiddler tags are not sorted, so the order in the rendered output may be different!`

...but I'm not sure what this means. Does it mean:

```
Important: A tiddlers tags are displayed alphabetically but rendered styles may come out in a different order. As per standard CSS behaviour, styles rendered later override styles rendered earlier.
```
This commit is contained in:
twMat
2018-07-19 17:58:58 +01:00
committed by Jeremy Ruston
parent fcccc85994
commit 57d6215fda
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
editions/tw5.com/tiddlers/howtos/Custom_styles_by_data-tags.tid
+5 -5
View File
@@ -8,7 +8,7 @@ type: text/vnd.tiddlywiki
<<.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.
The ~TiddlyWiki core adds several `attributes` to the rendered content. These make it possible to apply custom styles to tiddlers.
For example this tiddler is tagged: <<tag "How to apply custom styles">> and <<tag "example-test">> so the attribute looks like this:
@@ -16,11 +16,11 @@ For example this tiddler is tagged: <<tag "How to apply custom styles">> and <<t
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!
''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.
The following CSS is defined in [[Custom data-styles]] and creates a pink border for all tiddlers (including this one) tagged with `example-test`.
```
[data-tags*="example-test"] {
@@ -32,7 +32,7 @@ The following CSS is defined in [[Custom data-styles]] and creates a pink border
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]]
''Important:'' Don't forget to also specify `.tc-tiddler-body` or the whole tiddler, including the title, will be changed! see: [[Custom data-styles]]
```
[data-tags*="data-tags-styles"] .tc-tiddler-body {
@@ -53,7 +53,7 @@ So to display tiddlers tagged: `data-tags-styles` in a decent way we can use the
!! Hard Linebreaks
This mechanism may be handy for users, who want to write prose text! see: [[Hard Linebreaks with CSS]]
This mechanism may be handy for users who want to write prose text! See: [[Hard Linebreaks with CSS]]
!! More Possibilities