diff --git a/editions/tw5.com/tiddlers/howtos/How to apply custom style classes by tag b/editions/tw5.com/tiddlers/howtos/How to apply custom style classes by tag deleted file mode 100644 index 327ded50a..000000000 --- a/editions/tw5.com/tiddlers/howtos/How to apply custom style classes by tag +++ /dev/null @@ -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- -``` - -where `` 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-`. - -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`. 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 new file mode 100644 index 000000000..18d6d2043 --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid @@ -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-` + +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`.