mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 18:17:20 +00:00
Code Issues Releases Wiki Activity

Update Using Stylesheets.tid

Browse Source 
added documentation for html in StyleSheets

https://groups.google.com/d/msg/tiddlywiki/Qx0y7btud5M/Ch6hMnh0ud0J

simplified the specificity section, some rewording
This commit is contained in:
Tobias Beer 2014-12-16 08:33:21 +01:00
parent 97422ee1b9
commit bc447410fe
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid
View File

@ -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 {
<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.