mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-15 06:14:53 +00:00
73 lines
3.0 KiB
Plaintext
73 lines
3.0 KiB
Plaintext
caption: Styles and Classes
|
|
created: 20131205160532119
|
|
modified: 20230726105744098
|
|
tags: WikiText [[How to apply custom styles]]
|
|
title: Styles and Classes in WikiText
|
|
type: text/vnd.tiddlywiki
|
|
|
|
CSS styles and classes can be applied to inline or block content wrapped in `@@double at signs@@`. Classes can be applied to certain block WikiText elements.
|
|
|
|
//Inline content// wrapped in `@@double at signs@@` without specifying style or class will be assigned the `tc-inline-style` class and displayed as highlighted text. The foreground and background colours of the highlighted text are defined as `highlight-background` and `highlight-foreground` in the current palette.
|
|
|
|
<<wikitext-example src:"@@Highlighted text@@">>
|
|
|
|
!! Styles
|
|
|
|
Multiple style attributes, e.g. `color`, each followed by `;` semicolon can be introduced immediately after the opening `@@`, without spaces in between.
|
|
|
|
<<wikitext-example src:"@@color:steelblue;background-color:lightcyan;Text with custom style@@">>
|
|
|
|
Similarly, styles can be applied to //block content//. Wrapping block content in `@@` without specifying style or class has no effect.
|
|
|
|
<<wikitext-example src:"@@background-color:lightcyan;
|
|
* Item one
|
|
* Item two
|
|
@@
|
|
">>
|
|
|
|
!! Classes
|
|
|
|
The following `coloured-text` and `coloured-bg` classes are defined in this tiddler for demonstration purposes:
|
|
|
|
|
|
```
|
|
.coloured-text {color: darkkhaki;}
|
|
.coloured-bg {background-color: cornsilk;}
|
|
```
|
|
|
|
<style>
|
|
.coloured-text {color: darkkhaki;}
|
|
.coloured-bg {background-color: cornsilk;}
|
|
</style>
|
|
|
|
Multiple classes, each prefixed with `.`, can be introduced immediately after the opening `@@`, followed by a ` ` space. This works both for inline and block content:
|
|
|
|
<<wikitext-example src:"@@.coloured-text.coloured-bg Inline content with two assigned classes@@">>
|
|
|
|
<<wikitext-example src:"@@.coloured-bg
|
|
* Block content
|
|
* With one assigned class
|
|
@@">>
|
|
|
|
Multiple classes and styles can be applied simultaneously. In case of inline content, the styles have to be defined first, followed by the classes.
|
|
|
|
<<wikitext-example src:"@@font-size:1.5em;.coloured-text.coloured-bg Text with custom style and classes@@">>
|
|
|
|
In case of block content, the styles and classes can be defined in a single line after the opening `@@` identically as for the inline content, or in separate lines, each beginning with `@@`:
|
|
|
|
<<wikitext-example src:"@@font-size:1.5em;
|
|
@@.coloured-text
|
|
@@.coloured-bg
|
|
* Block content
|
|
* With custom style and classes
|
|
@@">>
|
|
|
|
In a similar way classes, but not styles, can be applied to those block WikiText elements that are introduced through characters on the beginning of the line. The classes prefixed with `.` are specified immediately after the special characters, followed by a ` ` space.
|
|
|
|
<<wikitext-example src:"!!!.coloured-bg Heading with a custom background class.
|
|
|
|
* Standard list element.
|
|
*.coloured-bg List element with a custom background colour class.
|
|
*.coloured-text List element with a custom text colour class.
|
|
*.coloured-bg.coloured-text List element with both of the custom classes.
|
|
">> |