This is a stripped-down version of a single section of Grok TiddlyWiki, optimized for fast loading and readability by search engines. Some features are missing.

For the full Grok TiddlyWiki experience, please visit the wiki version of this page.


2nd May 2021 at 11:31am

TiddlyWiki has full support for CSS stylesheets, both inline and as tiddlers. We saw this briefly in Creating a List of Links and Backlinks. Here are a few more details.

This section assumes you have basic knowledge of CSS. If you don't, and you would like to learn more about how to style your TiddlyWiki, a variety of good tutorials are available on the web.

Inline stylesheets

You can use a <style> element to embed rules within the text of a tiddler. The style section can appear anywhere in the tiddler, but it's common practice to put it at the bottom.

Be careful, however – inline stylesheets are not scoped to the tiddler! If you place a broad rule such as p { color: purple; } in a tiddler, all paragraph text anywhere in the wiki will become purple whenever that tiddler is open, including in other tiddlers and in the sidebar. For this reason, you should normally use a class name on all rules that you define this way, and make sure your class name is unique so it doesn't accidentally conflict with something used elsewhere in the wiki.

Because of the lack of scoping, the rules in a given tiddler are guaranteed to apply to any tiddlers that transclude it; we took advantage of this in Creating a List of Links and Backlinks.

Styling and classes in wikitext

You can apply arbitrary styles or classes to regions of wikitext using the @@ syntax, like this:

@@background-color: red;
Here is a red area.

Here is a red area.

.my-funny-class {
  background-color: blue;
  color: yellow;
  font-size: 150%;
  border: 3px dotted orange;
  text-align: right;
Here is some funny-looking text.

Here is some funny-looking text.

See the documentation for more on this feature.

Stylesheets in tiddlers

For styles and stylesheets you want to use in more than a single template or tiddler, a more robust approach is to place them in tiddlers of their own.

Tiddlers tagged $:/tags/Stylesheet will be incorporated in the global stylesheet and apply to all tiddlers in the wiki at all times. Any changes to such tiddlers take effect as soon as you save the tiddler.

There is a content type called text/css. This is convenient for stylesheets since it makes nice syntax highlighting when you view the tiddler, but be aware that choosing this content type takes away the ability you would otherwise have to use transclusions or macro calls in your stylesheet. For instance, this is valid if and only if you have the content type of the tiddler set to wikitext:

.my-alert-class {
  background-color: <<colour alert-background>>;


Exercise: (s) [Ex:FunnyClass]

Add my-funny-class from above (or any styling you like, as long as it is distinctive) to a global stylesheet in your wiki and apply the class to some text.

Exercise: (m) [Ex:ConditionalStyle]

Modify the tiddler containing my-funny-class so that that class's styles apply only if the config tiddler $:/config/ShowFunnyText is set to yes.

go to answer

Exercise: (m) [Ex:FunnyTextCheckbox]

Add a checkbox to the control panel on a new subtab within the Settings tab called Styles, allowing this value to be toggled on and off, so the user can make text look funny only if they so desire.

go to answer


Takeaways are not available in the static version of Grok TiddlyWiki. Visit the wiki version of this page to study takeaways.

↑ 8: Getting Technical