diff --git a/editions/tw5.com/tiddlers/Customising TiddlyWiki's user interface.tid b/editions/tw5.com/tiddlers/Customising TiddlyWiki's user interface.tid new file mode 100644 index 000000000..6f24857c0 --- /dev/null +++ b/editions/tw5.com/tiddlers/Customising TiddlyWiki's user interface.tid @@ -0,0 +1,55 @@ +created: 20211127084727217 +modified: 20211128200929866 +tags: [[Customise TiddlyWiki]] +title: Customising TiddlyWiki's user interface +type: text/vnd.tiddlywiki + +TiddlyWiki’s user interface is designed to be highly extensible. Every element can be augmented, removed, or rearranged. + +Several different mechanisms are used to achieve this: + +* special fields +* special titles +* special tags + +Here we provide an overview of those mechanisms and how they relate together. + +!! Special Fields + +Special fields are used to assign an appearance or behaviour to individual tiddlers. They can be thought of as flags or values that directly control the tiddler to which they are applied. + +For example: + +* Set the `icon` field to the title of an image tiddler to be used as the icon for this tiddler +* Set the `color` field to a CSS colour that is then used for icons and tag pills associated with this tiddler +* Set the `hide-body` field to `yes` to hide the view template body for this tiddler + +See TiddlerFields for details of all the special fields. + +!! Special Titles + +Certain special titles identify configuration tiddlers that customise TiddlyWiki's appearance or behaviour. They can be thought of as global settings that affect an entire wiki. + +For example: + +* $:/DefaultTiddlers is a filter yielding the titles of the tiddlers that should be displayed at startup +* $:/SiteTitle specifies the text of the wiki title +* $:/config/Tags/MinLength controls the minimum number of characters to trigger tag autocompletion + +Many of TiddlyWiki's configuration tiddlers are presented as options in [[$:/ControlPanel]]. Less commonly used configuration tiddlers do not have a user interface, but are documented in [[Hidden Settings]]. + +!! Special Tags + +Special tags assign special behaviour or appearance to all of the tiddlers to which they are applied. They can be thought of as establishing ordered lists of tiddlers that are processed or displayed in a particular way. + +For example: + +* $:/tags/Macro causes the macros defined in a tiddler to be available globally +* $:/tags/Stylesheet causes the tiddler to be interpreted as a CSS stylesheet +* $:/tags/SideBar causes the tiddler to be displayed as a sidebar tab + +See SystemTags for details of all the special tags. + +The entire TiddlyWiki user interface is constructed from lists formed from special system tags. + +The ordering of these lists is determined by the [[order of tagged tiddlers|Order of Tagged Tiddlers]] rules. Users can re-order tags using drag and drop within a tag dropdown. diff --git a/editions/tw5.com/tiddlers/concepts/Order of Tagged Tiddlers.tid b/editions/tw5.com/tiddlers/concepts/Order of Tagged Tiddlers.tid index 7a6427889..650e98baa 100644 --- a/editions/tw5.com/tiddlers/concepts/Order of Tagged Tiddlers.tid +++ b/editions/tw5.com/tiddlers/concepts/Order of Tagged Tiddlers.tid @@ -1,6 +1,6 @@ created: 20150124125646000 -modified: 20211119191622651 -tags: Tagging Concepts +modified: 20211127140005352 +tags: Tagging title: Order of Tagged Tiddlers type: text/vnd.tiddlywiki diff --git a/editions/tw5.com/tiddlers/concepts/TagTiddlers.tid b/editions/tw5.com/tiddlers/concepts/TagTiddlers.tid index 8223df19d..5eebbbcdc 100644 --- a/editions/tw5.com/tiddlers/concepts/TagTiddlers.tid +++ b/editions/tw5.com/tiddlers/concepts/TagTiddlers.tid @@ -1,6 +1,6 @@ created: 20141228094500000 -modified: 20211119191532192 -tags: Tagging Concepts +modified: 20211127135914596 +tags: Tagging title: TagTiddlers type: text/vnd.tiddlywiki diff --git a/editions/tw5.com/tiddlers/customising/Adding custom-made tiddlers to the user interface.tid b/editions/tw5.com/tiddlers/customising/Adding custom-made tiddlers to the user interface.tid deleted file mode 100644 index ae6718eb4..000000000 --- a/editions/tw5.com/tiddlers/customising/Adding custom-made tiddlers to the user interface.tid +++ /dev/null @@ -1,9 +0,0 @@ -created: 20211124205353184 -modified: 20211124215729065 -tags: [[Page and tiddler layout customisation]] -title: Adding custom-made tiddlers to the user interface -type: text/vnd.tiddlywiki - -You can create any tiddler you want and tag it with the appropriate [[system tag|SystemTags]], and it will appear in that place. For example, if you create a tiddler 'Reminder to self', add the text 'This is a reminder' and tag it `$:/tags/EditTemplate`, the words 'This is a reminder' will appear inside every tiddler when you edit it. - -When you add new tiddlers to be displayed within tiddlers or within the page layout, you will also probably need to reposition it so that it appears precisely where you want it to appear. To do this, edit the appropriate shadow tiddler with the prefix `$:/tags/`, and insert the title of your tiddler in the proper place in the list field. For example, if you want the words 'This is a reminder' from the example above to appear above the tags editor in editing mode, edit the tiddler $:/tags/EditTemplate, go to the 'list' field, and insert `[[Reminder to self]]` right before `$:/core/ui/EditTemplate/tags`. \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/customising/Alternative page layouts.tid b/editions/tw5.com/tiddlers/customising/Alternative page layouts.tid index 7d7e251a2..52fad00cb 100644 --- a/editions/tw5.com/tiddlers/customising/Alternative page layouts.tid +++ b/editions/tw5.com/tiddlers/customising/Alternative page layouts.tid @@ -1,6 +1,6 @@ created: 20201123172925848 -modified: 20211124205959371 -tags: [[Customise TiddlyWiki]] [[Page and tiddler layout customisation]] +modified: 20211126120310891 +tags: [[Customise TiddlyWiki]] title: Alternative page layouts type: text/vnd.tiddlywiki diff --git a/editions/tw5.com/tiddlers/customising/Creating new buttons for the ViewToolbar and page controls.tid b/editions/tw5.com/tiddlers/customising/Creating new toolbar buttons.tid similarity index 93% rename from editions/tw5.com/tiddlers/customising/Creating new buttons for the ViewToolbar and page controls.tid rename to editions/tw5.com/tiddlers/customising/Creating new toolbar buttons.tid index a885a0162..ddf89e982 100644 --- a/editions/tw5.com/tiddlers/customising/Creating new buttons for the ViewToolbar and page controls.tid +++ b/editions/tw5.com/tiddlers/customising/Creating new toolbar buttons.tid @@ -1,7 +1,7 @@ created: 20211124205415217 -modified: 20211124205413283 -tags: [[Page and tiddler layout customisation]] -title: Creating new buttons for the ViewToolbar and page controls +modified: 20211126162937536 +tags: [[Customise TiddlyWiki]] +title: Creating new toolbar buttons type: text/vnd.tiddlywiki Let's say you have a skeleton tiddler called 'Recipe template', and you want to have a button available in the tiddler ViewToolbar to create new recipe tiddlers on demand. This will require the following steps: diff --git a/editions/tw5.com/tiddlers/customising/Customise TiddlyWiki.tid b/editions/tw5.com/tiddlers/customising/Customise TiddlyWiki.tid index a0bc138c2..10e0cc7f8 100644 --- a/editions/tw5.com/tiddlers/customising/Customise TiddlyWiki.tid +++ b/editions/tw5.com/tiddlers/customising/Customise TiddlyWiki.tid @@ -1,10 +1,10 @@ created: 20140904101600000 -list: [[Adding a table of contents to the sidebar]] [[Alternative page layouts]] [[Configuring startup tiddlers]] [[Configuring the default TiddlerInfo tab]] [[Creating a custom export format]] [[Creating a splash screen]] [[Customising search results]] [[Hidden Settings]] [[How to add a new tab to the sidebar]] [[How to apply custom styles]] [[How to create keyboard shortcuts]] [[How to turn off camel case linking]] [[How to widen tiddlers (aka storyriver)]] [[Making a custom journal button]] [[Page and tiddler layout customisation]] [[Preserving open tiddlers at startup]] [[Setting a favicon]] [[Setting a page background image]] [[Using Stylesheets]] -modified: 20211124215925621 +list: [[Adding a table of contents to the sidebar]] [[Alternative page layouts]] [[Configuring startup tiddlers]] [[Configuring the default TiddlerInfo tab]] [[Creating a custom export format]] [[Creating a splash screen]] [[Creating new toolbar buttons]] [[Customising search results]] [[Customising TiddlyWiki's user interface]] [[Hidden Settings]] [[How to add a new tab to the sidebar]] [[How to apply custom styles]] [[How to create keyboard shortcuts]] [[How to turn off camel case linking]] [[How to widen tiddlers (aka storyriver)]] [[Making a custom journal button]] [[Preserving open tiddlers at startup]] [[Setting a favicon]] [[Setting a page background image]] [[Using Stylesheets]] +modified: 20211127140430506 tags: TableOfContents title: Customise TiddlyWiki type: text/vnd.tiddlywiki -Information about customising TiddlyWiki +Information about customising TiddlyWiki. See [[Customising TiddlyWiki's user interface]] for an overview of the mechanisms employed. <> diff --git a/editions/tw5.com/tiddlers/customising/Page and tiddler layout customisation.tid b/editions/tw5.com/tiddlers/customising/Page and tiddler layout customisation.tid deleted file mode 100644 index 005fd4639..000000000 --- a/editions/tw5.com/tiddlers/customising/Page and tiddler layout customisation.tid +++ /dev/null @@ -1,15 +0,0 @@ -created: 20141120125300000 -modified: 20211124210034410 -tags: [[Customise TiddlyWiki]] -title: Page and tiddler layout customisation -type: text/vnd.tiddlywiki - -One major feature of TiddlyWiki that many new users are unaware of is the degree to which TiddlyWiki can be customised, just by adding or removing SystemTags in key shadow tiddlers or in your own custom tiddlers. - -* You can add and remove default features in tiddlers in either viewing or editing mode (let's say you find the tiddler subtitle distracting, or you want to add yourself a reminder that you will see when you edit tiddlers) -* You can also add and remove default features from the general page layout (maybe you want to add a clock to the sidebar, or replace one of the page control buttons with your own) -* You can also rearrange the order in which these features are displayed (perhaps you would like tags above tiddler titles, or the subtitle of your TiddlyWiki below the page control buttons) - -Once you know what you are doing, all of these things are actually pretty easy to do. - -<> diff --git a/editions/tw5.com/tiddlers/customising/Removing shadow tiddlers from the user interface.tid b/editions/tw5.com/tiddlers/customising/Removing shadow tiddlers from the user interface.tid deleted file mode 100644 index 05e9b7708..000000000 --- a/editions/tw5.com/tiddlers/customising/Removing shadow tiddlers from the user interface.tid +++ /dev/null @@ -1,13 +0,0 @@ -created: 20211124205744669 -modified: 20211124210238900 -tags: [[Page and tiddler layout customisation]] -title: Removing shadow tiddlers from the user interface -type: text/vnd.tiddlywiki - -In the More > Shadows tab you will find a list of all the shadow tiddlers. In this list you will find many tiddlers with the prefix `$:/core/ui/`. These are the core tiddlers that define the user interface. These tiddlers are tagged with SystemTags, and removing or adding these tags will adjust the tiddler and page layouts. - -For example, $:/core/ui/SideBar/More is the tiddler for the More tab in the Sidebar, and it is tagged with the [[SystemTag: $:/tags/MoreSideBar]] so that it appears in the Sidebar. Removing the tag from that tiddler will remove the More tab from the Sidebar, and reinserting the Sidebar tag to that tiddler will make it reappear in the Sidebar. - -You can use the same process for any of the core user interface tiddlers with the `$:/core/ui/` prefix. For example, removing the [[SystemTag: $:/tags/ViewTemplate]] from the tiddler `$:/core/ui/ViewTemplate/subtitle` will remove the subtitles from all tiddlers. - -If you modify a shadow tiddler in this way you will overwrite the pre-installed value. If you want to revert, just delete the modified tiddler to restore the underlying shadow tiddler. diff --git a/editions/tw5.com/tiddlers/demonstrations/KeyboardDrivenInput/Demonstration_ keyboard-driven-input Macro.tid b/editions/tw5.com/tiddlers/demonstrations/KeyboardDrivenInput/Demonstration_ keyboard-driven-input Macro.tid index 519f01c0f..977a4f391 100644 --- a/editions/tw5.com/tiddlers/demonstrations/KeyboardDrivenInput/Demonstration_ keyboard-driven-input Macro.tid +++ b/editions/tw5.com/tiddlers/demonstrations/KeyboardDrivenInput/Demonstration_ keyboard-driven-input Macro.tid @@ -1,6 +1,6 @@ created: 20210222140234737 -modified: 20210520174049056 -tags: Learning +modified: 20211123034501278 +tags: Learning KeyboardDrivenInput title: Demonstration: keyboard-driven-input Macro type: text/vnd.tiddlywiki diff --git a/editions/tw5.com/tiddlers/demonstrations/KeyboardDrivenInput/kdi-demo-configtid.tid b/editions/tw5.com/tiddlers/demonstrations/KeyboardDrivenInput/kdi-demo-configtid.tid index f13ff6b15..bac952aee 100644 --- a/editions/tw5.com/tiddlers/demonstrations/KeyboardDrivenInput/kdi-demo-configtid.tid +++ b/editions/tw5.com/tiddlers/demonstrations/KeyboardDrivenInput/kdi-demo-configtid.tid @@ -1,6 +1,7 @@ created: 20210131043724146 first-search-filter: [!is[system]search:titlesort[]] -modified: 20210204012422020 -tags: +modified: 20211123034440629 +tags: KeyboardDrivenInput title: kdi-demo-configtid -type: text/vnd.tiddlywiki \ No newline at end of file +type: text/vnd.tiddlywiki + diff --git a/editions/tw5.com/tiddlers/howtos/Creating SubStories.tid b/editions/tw5.com/tiddlers/howtos/Creating SubStories.tid index d23f0278b..1d7a83699 100644 --- a/editions/tw5.com/tiddlers/howtos/Creating SubStories.tid +++ b/editions/tw5.com/tiddlers/howtos/Creating SubStories.tid @@ -1,44 +1,32 @@ created: 20140214215718317 -modified: 20140919161514318 +modified: 20211127032217828 tags: Learning title: Creating SubStories type: text/vnd.tiddlywiki -This example shows how to create a sub-story within a tiddler that is independent of the main story. +This example shows how to create a sub-story within a tiddler that is independent of the main [[story|Story River]]. The NavigatorWidget and ListWidget work together to: -Here's the code: +# Add tiddlers to the [[story|Story River]] when links are clicked. Navigate to the tiddler corresponding to the link click. (''story'' attribute of the NavigatorWidget) +# Remove tiddlers from the [[story|Story River]] when tiddler close buttons are clicked. (''story'' attribute of NavigatorWidget) +# Animate the opening and closing of tiddlers. (''storyview'' attribute of the ListWidget) +# Display the list of open tiddlers. (''filter'' and ''template'' attributes of the ListWidget) +# Display tiddlers in [[draft mode|DraftMechanism]]. (''editTemplate'' attribute of the ListWidget) +# Track [[navigation history|HistoryMechanism]]. (''history'' attribute of both NavigatorWidget and ListWidget) +# And more! -``` -<$navigator story="MySubStoryList" history="MySubHistoryList"> +Here is the example code (see also StateMechanism for related discussion): -Click this link to get started: HelloThere +<$macrocall $name='wikitext-example-without-html' +src='<$navigator story="$:/temp/DemoStoryList" history="$:/temp/DemoHistoryList"> -<$list filter="[list[MySubStoryList]]" history="MySubHistoryList"> -
+{{$:/core/ui/SideBarSegments/search}} -! <$button message="tm-close-tiddler" class="tc-btn-invisible">{{$:/core/images/close-button}} <$view field="title"/> +<$list + filter="[list[$:/temp/DemoStoryList]]" + history="$:/temp/DemoHistoryList" + template={{$:/config/ui/ViewTemplate}} + editTemplate={{$:/config/ui/EditTemplate}} + storyview="classic" + emptyMessage="Use search box above. Clicked search links will open here instead of in the main story.

No search ideas? Click this link to get started: HelloThere

"/> -<$transclude/> -
- - - -``` - -Note how you can open the HelloThere tiddler in the substory by clicking on the link below. Links within the substory open within the substory, and not in the main story. - -<$navigator story="MySubStoryList" history="MySubHistoryList"> - -Click this link to get started: HelloThere - -<$list filter="[list[MySubStoryList]]" history="MySubHistoryList"> -
- -! <$button message="tm-close-tiddler" class="tc-btn-invisible">{{$:/core/images/close-button}} <$view field="title"/> - -<$transclude/> - -
- - - +'> \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/mechanisms/StateMechanism.tid b/editions/tw5.com/tiddlers/mechanisms/StateMechanism.tid index 5f9d2622c..49f8f2450 100644 --- a/editions/tw5.com/tiddlers/mechanisms/StateMechanism.tid +++ b/editions/tw5.com/tiddlers/mechanisms/StateMechanism.tid @@ -1,5 +1,5 @@ created: 20131228164411884 -modified: 20150221225557000 +modified: 20211127033939415 tags: Mechanisms title: StateMechanism type: text/vnd.tiddlywiki @@ -17,7 +17,7 @@ The stack of templates that make up the TiddlyWiki display are complex but we'll Breaking down the attributes applied to the list widget: * ''filter'': selects the list of tiddlers in the `list` field of the tiddler [[$:/StoryList]]. If a tiddler is added or removed from that list then it is automatically reflected in the displayed list -* ''history'': references the tiddler to be used to store the history stack (see the NavigationMechanism) +* ''history'': references the tiddler to be used to store the history stack (see the HistoryMechanism) * ''template'': identifies a template tiddler to be used for rendering each tiddler in the list * ''editTemplate'': identifies a different template tiddler to be used for rendering tiddlers that are in [[draft mode|DraftMechanism]] * ''storyview'': specifies the story view to be used (eg classic, or zoomin) diff --git a/editions/tw5.com/tiddlers/widgets/NavigatorWidget.tid b/editions/tw5.com/tiddlers/widgets/NavigatorWidget.tid index bfb5a0816..48f042463 100644 --- a/editions/tw5.com/tiddlers/widgets/NavigatorWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/NavigatorWidget.tid @@ -1,6 +1,6 @@ caption: navigator created: 20131024141900000 -modified: 20211009122821140 +modified: 20211127023932158 tags: Widgets MessageHandlerWidgets title: NavigatorWidget type: text/vnd.tiddlywiki @@ -39,3 +39,6 @@ The following [[Variables]] are assigned by the navigator widget: * <<.vlink tv-story-list>>, giving the name of the tiddler containing the story list * <<.vlink tv-history-list>>, giving the name of the tiddler containing the history list +! Examples + +See [[Creating SubStories]]. \ No newline at end of file