mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-24 02:27:19 +00:00
Code Issues Releases Wiki Activity

Docs tweaks

Browse Source
This commit is contained in:
Jermolene 2014-10-20 12:09:02 +01:00
parent aec4c3cd91
commit b8ac80fd1a
2 changed files with 23 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
editions/tw5.com/tiddlers/howtos/How to apply custom style classes by tag
View File

@ -1,30 +0,0 @@
created: 20141001132300000
modified: 20141001132300000
tags: Learning
title: How to apply custom style classes by tag
type: text/vnd.tiddlywiki
You can create a tag that will apply custom style to a tiddler by using the form:
```
.tc-tagged-<My Class Tag>
```
where `<My Class Tag>` is the name of the tag which you will give to any tiddler to which you wish to apply the styles defined in `.tc-tagged-<My Class Tag>`.
For instance if you create a style sheet (see [[Using Stylesheets]] for details on creating style sheets) with class .`tc-tagged-NightReader` like this:
```
.tc-tagged-NightReader {
background-color:black;
color:orange;
padding: 35px 35px;
}
.tc-tagged-NightReader .tc-tiddler-body {
font-size: 1.5em;
}
```
then you can apply the class `NightReader` to any tiddler that you want to display in a format possible more suitable for night viewing.
Note that the `NightReader` class is applied to the entire tiddler and not just the tiddler text, so you may need to increase the specificity of your style definitions to make sure that only the tiddler content you want is affected by the style. (as is demonstrated here by `.tc-tagged-NightReader .tc-tiddler-body`.

23
editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid Normal file
View File

@ -0,0 +1,23 @@
created: 20141001132300000
modified: 20141001132300000
tags: Learning
title: How to apply custom styles by tag
type: text/vnd.tiddlywiki
You can apply custom styles to tiddlers that have a particular tag by defining a CSS class with the name `tc-tagged-<Tag Name>`
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:
```
.tc-tagged-NightReader {
background-color:black;
color: orange;
padding: 35px 35px;
}
.tc-tagged-NightReader .tc-tiddler-body {
font-size: 1.5em;
}
```
Note that the `NightReader` class is applied to the entire tiddler and not just the tiddler text. If you want to target a smaller portion of the tiddler you can qualify the CSS selector, as is done here with `.tc-tagged-NightReader .tc-tiddler-body`.