61 lines
1.8 KiB
Plaintext
61 lines
1.8 KiB
Plaintext
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. 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:
|
|
|
|
```
|
|
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 all tiddlers (including this one) tagged with `example-test`.
|
|
|
|
```
|
|
[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 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 {
|
|
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}}
|