diff --git a/editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid b/editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid index 6f0b1c528..f6184711a 100644 --- a/editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid +++ b/editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid @@ -4,9 +4,9 @@ tags: Features title: Using Stylesheets type: text/vnd.tiddlywiki -The usual way of modifying the appearance of a TiddlyWiki is to use one of the available themes, or to modify the [[colour palette|ColourPalettes]]. +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]]. -You can also use custom CSS stylesheets by tagging tiddlers with `$:/tags/Stylesheet`. For example, create a tiddler with the tag `$:/tags/Stylesheet` and the following content in order to change the page background colour to red: +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 { @@ -16,7 +16,7 @@ html body.tc-body { ! Overriding Theme Settings -Note that custom stylesheets are applied independently to the theme stylesheets. This means that it is frequently necessary to use CSS specificity to reliably override settings within the theme. This means ensuring that the CSS rule in your custom stylesheet is more specific than the theme rule that you are overriding. "More specific" generally means using more CSS rules. So, `html body.tc-body` is more specific than `body.tc-body`. +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 @@ -25,15 +25,18 @@ Usually it is best to use the type `text/css` for stylesheets. This treats 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 +\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html -body.tc-body pre { +
body.tc-body 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 `
` 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.