created: 20140305091244145
modified: 20140912141203664
tags: Features
title: Using Stylesheets
type: text/vnd.tiddlywiki

The first steps to changing the appearance of TiddlyWiki are to choose and apply one of the available themes, or to modify the [[colour palette|ColourPalettes]].

In addition, custom [[CSS stylesheets|http://www.w3schools.com/css]] can be can defined by tagging a tiddler `$:/tags/Stylesheet`. Try creating a custom stylesheet now with the following content in order to change the page background colour to red:

```
html body.tc-body {
	background: red;
}
```

! Overriding Theme Settings

Custom stylesheets are applied independently from theme stylesheets. Therefore, it is often necessary for the css rules in your custom stylesheet to be more specific than those of the theme you want to override. For example, `html body.tc-body` is more specific than `body.tc-body`.

! Stylesheet Types

Usually it is best to use the type `text/css` for stylesheets. This treats them as plain stylesheets, and ensures that TiddlyWiki doesn't apply any wiki processing to them.

If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type `text/vnd.tiddlywiki`. This allows full WikiText processing to be performed. Here is an example:

```
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html

<pre>body.tc-body pre {
	<<box-shadow "inset 0 1px 0 #fff">>
}
</pre>
```

The `\rules` pragma at the top of the tiddler restricts the WikiText to just allow macros and transclusion. This avoids mistakenly triggering unwanted WikiText processing.

A stylesheet tiddler is processed such that it is wikified first and then its text extracted so as to apply only css. Any html tags you will use in your stylesheet are thus eventually ignored. For example, html elements generated by the reveal widget will not affect the output. As in the example above, you could also wrap css rules in `<pre>` tags to display them as a codeblock which will, however, still correctly wikify the inner macro.

!! Stylesheet Macros

Several globally available macros are provided that are helpful in constructing stylesheets. See [[$:/core/ui/PageStylesheet]] for the definitions of these macros.

* `<<colour name>>` and `<<color name>>` retrieve named colours from the current [[colour palette|ColourPalettes]]
* `<<box-shadow shadow>>` specify a box-shadow
* `<<filter filter>>` specify a CSS filter
* `<<transition transition>>` specify a CSS transition
* `<<transform-origin origin>>` specify the CSS transform origin
* `<<background-linear-gradient gradient>>` specify a linear gradient
* `<<datauri title>>` retrieves the base64 content of a tiddler for use via the CSS `url()` operator