From 7437a3ce49edc86b160dce36d7ccd4f31014d44a Mon Sep 17 00:00:00 2001 From: Yakov Litvin Date: Thu, 29 Feb 2024 11:11:41 +0300 Subject: [PATCH] docs: improve formatting in some tiddlers about StyleSheets --- content/AnotherExampleStyleSheet.tid | 16 ++++++++-------- content/CustomStyleSheet.tid | 4 ++-- content/ExampleStyleSheet.tid | 8 +++++--- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/content/AnotherExampleStyleSheet.tid b/content/AnotherExampleStyleSheet.tid index a3650d934..6fc272fdf 100644 --- a/content/AnotherExampleStyleSheet.tid +++ b/content/AnotherExampleStyleSheet.tid @@ -11,40 +11,40 @@ This tiddler shows some more complex effects that can be obtained with cunning u You can have special formatting for a specific, named tiddler like this: {{{ #tiddlerHelloThere .title { -background-color: #99aaee; + background-color: #99aaee; } }}} Or for the first displayed tiddler: {{{ div.tiddler:first-child .title { -font-size: 28pt; + font-size: 28pt; } }}} Or just for the first line of every tiddler: {{{ .viewer:first-line { -background-color: #999999; + background-color: #999999; } }}} Or just for the first letter of every tiddler: {{{ .viewer:first-letter { -float: left; -font-size: 28pt; -font-weight: bold; + float: left; + font-size: 28pt; + font-weight: bold; } }}} Or just for tiddlers tagged with a particular tag (note that this won't work for tags that contain spaces): {{{ div[tags~="welcome"].tiddler .viewer { -background-color: #ffccaa; + background-color: #ffccaa; } div[tags~="features"].tiddler .viewer { -background-color: #88aaff; + background-color: #88aaff; } }}} \ No newline at end of file diff --git a/content/CustomStyleSheet.tid b/content/CustomStyleSheet.tid index 2d9bdcb39..ec4b53a4c 100644 --- a/content/CustomStyleSheet.tid +++ b/content/CustomStyleSheet.tid @@ -6,6 +6,6 @@ tags: features title: CustomStyleSheet type: text/x-tiddlywiki -You can skin TiddlyWiki with a special StyleSheet tiddler containing your own CSS style sheet declarations. Unlike hacking the HTML directly, the StyleSheet tiddler withstands upgrading to a new version of the TiddlyWiki code (see HowToUpgrade). You can also use the NestedStyleSheets feature to structure your CSS declarations. +You can skin ~TiddlyWiki with a special StyleSheet tiddler containing your own CSS style sheet declarations. Unlike hacking the HTML directly, the ~StyleSheet tiddler withstands upgrading to a new version of the ~TiddlyWiki code (see HowToUpgrade). You can also use the NestedStyleSheets feature to structure your CSS declarations. -The ExampleStyleSheet shows some of the basic options you can control (see AnotherExampleStyleSheet for more complex examples). SaveChanges and then click refresh in your browser to see StyleSheet changes. Any errors in your CSS syntax will be caught and displayed, but they shouldn't stop TiddlyWiki from working. +The ExampleStyleSheet shows some of the basic options you can control (see AnotherExampleStyleSheet for more complex examples). SaveChanges and then click refresh in your browser to see StyleSheet changes. Any errors in your CSS syntax will be caught and displayed, but they shouldn't stop ~TiddlyWiki from working. diff --git a/content/ExampleStyleSheet.tid b/content/ExampleStyleSheet.tid index 988659165..86fe4573a 100644 --- a/content/ExampleStyleSheet.tid +++ b/content/ExampleStyleSheet.tid @@ -6,6 +6,8 @@ tags: examples title: ExampleStyleSheet type: text/x-tiddlywiki -#displayArea {background-color: #ffccff; } -#mainMenu {border: 1px solid #ffff88; } -#commandPanel {background-color: #008800; } \ No newline at end of file +/*{{{*/ +#displayArea { background-color: #ffccff; } +#mainMenu { border: 1px solid #ffff88; } +#commandPanel { background-color: #008800; } +/*}}}*/ \ No newline at end of file