Note: An alternative skin, TW4MW (work in progress), is available from the user preferences.
Tiddler-Specific Styles
TiddlyWiki Community Wiki
This article meets TiddlyWiki.org's quality standards.Contents |
[edit] Active Tiddlers
Tiddlers under the mouse pointer are automatically assigned the class selected.
Thus active tiddlers can be styled differently - for example by changing the color of the tiddler toolbar:
.toolbar {
color: #EEE; /* light gray */
}
.selected .toolbar {
color: #888; /* dark gray */
}
[edit] Individual Tiddlers
There are several methods to apply additional styles to a particular tiddler's contents.
[edit] Using Tiddler IDs
The Tiddler ID can be used for styling individual tiddlers' contents.
The following example will make all links inside the "GettingStarted" tiddler appear in red:
#tiddlerGettingStarted a {
color: #f00;
}
If the tiddler name contains spaces, each space must be escaped (replaced with \000020):
#tiddlerNew\000020Tiddler a {
color: #f00;
}
To prevent hex digits (0-9, A-F) after the space in the respective tiddler's name from being treated as part of the escape, CSS syntax requires either six hex digits in the escape as shown above, or inserting \20 with a single trailing whitespace as shown below:
#tiddlerNew\20 Tiddler a {
color: #f00;
}
In both cases, the tiddler being styled here has the name "New Tiddler".
[edit] Using a CSS Class Wrapper
By wrapping all of the respective tiddler's contents in a custom CSS container, the contents can then be styled by accessing this class from within StyleSheet:
.className {
color: #F00;
}
[edit] Using Raw HTML
As an alternative method for organizing tiddler-specific styles, instead of adding the respective CSS code to StyleSheet, these styles could also be defined directly within the respective tiddler:
<html>
<style type="text/css">
.className {
font-size: 1.2em;
}
</style>
</html>
