mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-25 11:07:19 +00:00
76 lines
3.3 KiB
Plaintext
76 lines
3.3 KiB
Plaintext
created: 20140305091244145
|
|
modified: 20210104090402829
|
|
tags: [[Customise TiddlyWiki]]
|
|
title: Using Stylesheets
|
|
type: text/vnd.tiddlywiki
|
|
|
|
\define tv-config-toolbar-text() yes
|
|
|
|
\define openCpTheme()
|
|
<$action-setfield $tiddler="$:/state/tab-1749438307" $value="$:/core/ui/ControlPanel/Appearance"/>
|
|
<$action-setfield $tiddler="$:/state/tab--1963855381" $value="$:/core/ui/ControlPanel/Theme"/>
|
|
<$action-navigate $to="$:/ControlPanel"/>
|
|
\end
|
|
|
|
! Theme and Colorpalette
|
|
|
|
The first steps to changing the appearance of ~TiddlyWiki are to choose and apply:
|
|
|
|
* One of the available themes: <span class="tc-btn-standard"> {{$:/core/ui/Buttons/theme}} </span>
|
|
* Modify the colour palette: <span class="tc-btn-standard"> {{$:/core/ui/Buttons/palette}} </span>
|
|
* Experiment with the <$button actions=<<openCpTheme>> ><<.icon $:/core/images/options-button>> ControlPanel</$button>
|
|
|
|
! Work with Stylesheets
|
|
|
|
In addition to the control panel, custom styles can be 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:
|
|
|
|
```
|
|
body.tc-body {
|
|
background: red;
|
|
}
|
|
```
|
|
|
|
You can then use your own [[styles and classes in WikiText|Styles and Classes in WikiText]].
|
|
|
|
!! Additional Resrouces
|
|
|
|
* [[Cascading Style Sheets (CSS) at mozilla|https://developer.mozilla.org/en-US/docs/Web/CSS]]
|
|
* [[Cascading Style Sheets (CSS) at w3scools|http://www.w3schools.com/css]]
|
|
|
|
! 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`.
|
|
|
|
<<.tip "''You should always start with the least specific value that works!''<br><br>">>
|
|
|
|
! 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
|
|
|
|
body.tc-body pre {
|
|
<<box-shadow "inset 0 1px 0 #fff">>
|
|
}
|
|
```
|
|
|
|
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 first wikified and then the text portion of the ouput is extracted to apply as the CSS. Any HTML tags you will use in your stylesheet are thus ignored. For example, HTML elements generated by the RevealWidget will not affect the output. As in the following example, you can wrap CSS rules in `<pre>` tags to display them as a codeblock without affecting processing, including handling the inner macro.
|
|
|
|
```
|
|
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html
|
|
|
|
<pre>body.tc-body pre {
|
|
<<box-shadow "inset 0 1px 0 #fff">>
|
|
}
|
|
</pre>
|
|
```
|
|
|
|
!! Stylesheet Macros
|
|
|
|
The ~TiddlyWiki core provides several [[global macros that are helpful in constructing stylesheets|Stylesheet Macros]].
|