1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-15 22:34:51 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/howtos/Custom Styles by title.tid
2019-05-16 17:28:09 +01:00

40 lines
1.0 KiB
Plaintext

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 data-tiddler-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 data-tiddler-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}}