Note: An alternative skin, TW4MW (work in progress), is available from the user preferences.
Themes
TiddlyWiki Community Wiki
Contents |
[edit] Themes
TiddlyThemes provides a collection of TiddlyWiki themes.
[edit] Outdated Themes
This section contains a collection of older themes which most likely are not fully compatible with the latest version of TiddlyWiki. These serve as inspiration for potential designers, and might also be updated by dedicated volunteers:
[edit] Theme-Switching
Since TiddlyWiki 2.3.0, the core has built-in support for switching themes.
Apart from the theme startup parameter, SwitchThemePlugin or ThemeBackstagePlugin can be used for selecting a theme.
Alternatively, a simple plugin can be created to persistently select a certain theme on startup:
(whereas SampleTheme is the name of the desired theme)
[edit] Creating Themes
|''Name''|SampleTheme|
|''Description''|a sample theme|
!Author Mode
|PageTemplate|PageTemplate|
|ViewTemplate|ViewTemplate|
|EditTemplate|EditTemplate|
|StyleSheet|StyleSheet|
|ColorPalette|ColorPalette|
!Read-Only Mode
|PageTemplateReadOnly|PageTemplate|
|ViewTemplateReadOnly|ViewTemplate|
|EditTemplateReadOnly|EditTemplate|
|StyleSheetReadOnly|##StyleSheet|
|ColorPalette|ColorPalette|
!StyleSheet
/*{{{*/
#sidebarTabs {
display: none;
}
/*}}}*/
Theme slices can either reference tiddlers, or sections within a tiddler. To reference a section within the current tiddler, the tiddler name is omitted.
by Saq
There are two main components of a theme, the PageTemplate and the StyleSheet.
The PageTemplate determines the DOM structure of the page. So if you want to add an extra div or remove something, thats where you go. You can completely redefine the structure of the page by editing the PageTemplate.
PageTemplate, StyleSheetLayout and StyleSheetColors are shadow tiddlers. This means that they are backup tiddlers with predefined values, and dont show up in the Timeline. You can create a new tiddler with the same name as a shadow tiddler, and it will effectively replace the shadow. When you delete that new tiddler, the shadow will come back. Check out the shadow tiddlers tab under the More tab in the sidebar.
The StyleSheet is where you can type in your custom css. But please note that this css is applied in addition to and over the StyleSheetLayout and StyleSheetColors tiddlers. So quite often its not as simple as just writing in the css rules you want, but you also have to overwrite the existing rules that you don't want.
The StyleSheet is loaded after the default styles. Any changes to StyleSheet and PageTemplate are upgrade proof, as explained above. You can definitely just edit the StyleSheetColors and StyleSheetLayout tiddlers and make your changes there, but most people prefer to write their css into the StyleSheet tiddler because: 1) smaller file size: lets say you edit the StyleSheetColors just to add one line, you are still saving an entire second copy of the whole tiddler. 2) its convenient to have all your changes in one tiddler for future tweaking 3) its easier to share themes when they are spread out across fewer tiddlers 4) Theme switching plugins dont always place nice with themes that contain custom versions of StyleSheetColors and StyleSheetLayout If none of those are a concern for you, but all means just edit those tiddlers. It might prove a nice way to get started customizing TW without getting overwhelmed. Since you cant delete a shadow tiddler, the only way to 'nullify' it is to create an empty tiddler with the same name and 'overwrite' it.
In the StyleSheetColors tiddler you will see references like
background: [[ColorPalette::Background]];
What's happening here is that its using the color hex value defined as the Background color on the ColorPalette tiddler. Have a look at the tiddler and you'll see it just defines a bunch of colors. You can change the colors by either changing the color palette, or just directly writing the new color into the stylesheet, ie:
background: #fff;
Also, if you find it too frustrating to have to overwrite the default TW styles and feel comfortable starting from scratch, a quick fix would be to create empty tiddlers with the titles StyleSheetColors and StyleSheetLayout
