Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88

<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->

To get started with this blank [[TiddlyWiki]], you'll need to modify the following tiddlers:
* [[SiteTitle]] & [[SiteSubtitle]]: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* [[MainMenu]]: The menu (usually on the left)
* [[DefaultTiddlers]]: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>

<<importTiddlers>>

<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->

These [[InterfaceOptions]] for customising [[TiddlyWiki]] are saved in your browser

Your username for signing your edits. Write it as a [[WikiWord]] (eg [[JoeBloggs]])

<<option txtUserName>>
<<option chkSaveBackups>> [[SaveBackups]]
<<option chkAutoSave>> [[AutoSave]]
<<option chkRegExpSearch>> [[RegExpSearch]]
<<option chkCaseSensitiveSearch>> [[CaseSensitiveSearch]]
<<option chkAnimate>> [[EnableAnimations]]

----
Also see [[AdvancedOptions]]

<!--{{{-->
<div class='header' role='banner' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' role='navigation' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' role='navigation' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' role='complementary' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea' role='main'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}

.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}

.tabSelected {color:[[ColorPalette::PrimaryDark]];
	background:[[ColorPalette::TertiaryPale]];
	border-left:1px solid [[ColorPalette::TertiaryLight]];
	border-top:1px solid [[ColorPalette::TertiaryLight]];
	border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}

.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}

.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

.tiddler .defaultCommand {font-weight:bold;}

.shadow .title {color:[[ColorPalette::TertiaryDark]];}

.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}

.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}

.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

.imageLink, #displayArea .imageLink {background:transparent;}

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}

.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}

.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}
.readOnly {background:[[ColorPalette::TertiaryPale]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:alpha(opacity=60);}
/*}}}*/

/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0; top:0;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0 0 0.5em;}
.tab {margin:0 0 0 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0 0.25em; padding:0 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0 3px 0 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.editorFooter .button {padding-top:0; padding-bottom:0;}

.fieldsetFix {border:0; padding:0; margin:1px 0px;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/

/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/

/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
#displayArea {margin: 1em 1em 0em;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/

<!--{{{-->
<div class='toolbar' role='navigation' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->

/***
|''Name:''|BackstageSidebarPlugin|
|''Description:''|Moves the sidebar to the backstage, as suggested at http://www.tiddlywiki.org/wiki/Dev:Backstage#Customization|
|''Author''|JonathanLister|
|''CodeRepository:''|n/a |
|''Version:''|0.1|
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''License''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''~CoreVersion:''|2.4|

***/

//{{{
if(!version.extensions.BackstageSidebarPlugin) {
version.extensions.BackstageSidebarPlugin = {installed:true};

config.tasks.sidebar = {
	text: "sidebar",
	tooltip: "sidebar options",
	content: "<<tiddler SideBarOptions>><<tiddler SideBarTabs>>"
};
config.backstageTasks.push("sidebar");

config.macros.BackstageSidebarPlugin = {
	tiddler:tiddler
};

config.macros.BackstageSidebarPlugin.init = function() {
	var tiddler = this.tiddler;
	setStylesheet(store.getTiddlerText(tiddler.title+'##Stylesheet'),'BackstageSidebarPlugin');
};

} //# end of 'install only once'
//}}}

/***
!Stylesheet

#sidebar {
	display:none;
}

!(end of Stylesheet)
***/

/*{{{*/
Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #0078a5
PrimaryDark: #014
SecondaryPale: #ededed
SecondaryLight: #f16c7c
SecondaryMid: #00adee
SecondaryDark: #bf404f
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
Grey: #e9e9e9
/*}}}*/

Contact me by mail
[[Bauwe Bijl|mailto:bauwebijl@gmail.com]]

[[Hello]]

@@float:right;<<closeAll>><<permaview>><<newTiddler>><<newJournal "DD MMM YYYY" "journal">><<saveChanges>>@@

;Accessibility
:By adding accessibility features to this ~TiddlyWiki, visually impaired people are enabled to navigate to specific elements in the page with a screenreader. This demo shows a vanilla ~TiddlyWiki and the visual impact accessibility features have on the default ~TiddlyWiki styling ... enabling developers to modify.
:[[accessibilitydemo|http://bauwebijl.github.com/accessibilitydemo/]]

Welcome on my Github page.
Here you can find links to some of my other activity's.
This page is also used as showcase for my MineralTheme.
...Featuring css3 with fallback for older browsers.

Have Fun!

<<tiddler SideBarTabs>>

[[Home|Hello]][[Contact]][[GithubLinks]]<<tag menu>> -- <<slider chkHistory ToolBox "ToolBox" "show or hide the Tools">>

/***
|!|!|!|!|!|!|!|!|!|!|!|!|!|!|!|!|
|!|!|!|!|!|!|!|!|!|!|!|!|!|!|!|!|
|!|!||||||||||||!|!|!|
|!|!||!|!|!|!|!|!|!|!|!||!|!|!|
|!|!||!||||!||!||!||!|!|!|
|!|!||!||!||!||!||!||!|!|!|
|!|!||!||||!||!||!||!|!|!|
|!|!||!||!||!||!||!||!|!|!|
|!|!||!||||!||!||!||!|!|!|
|!|!||!|!|!|!|!|!|!||!||!|!|!|
|!|!||||||||||!||||!|
|!|!|!|!|!|!|!|!|!|!|!|!|!|!|!|!|
|!|!|!|!|!|!|!|!|!|!|!|!|!|!|!|!|

|''Name''|MineralTheme|
|''Source''|http://bauwebijl-tiddlywiki.appspot.com/#MineralTheme|
|''Version:''|1.1|
|''Author:''|Bauwe Bijl|
|''Date:''|March 15, 2011|
|''License:''|[[BSD License|http://bauwebijl-tiddlywiki.appspot.com/#LegalStatements]]|
|''Comments:''|Please make comments at http://groups.google.nl/group/TiddlyWiki|
|''~CoreVersion:''|2.6.0|
|''Type''|CSS|
|''Description''|a ''~TiddlyWiki'' theme: http://bauwebijl-tiddlywiki.appspot.com/#MineralThemeInfo|
|''PageTemplate:''|##PageTemplate|
|''ViewTemplate:''|##ViewTemplate|
|''EditTemplate:''|##EditTemplate|
|''StyleSheet:''|##StyleSheet|

Depends on BackstageSidebarPlugin (optional), SimpleSearchPlugin and TiddlerTweakerPlugin
***/

!PageTemplate
<!--{{{-->
<div id='header'>
<div id='sidebarSearch'>
<span macro='search'></span>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='topMenu' refresh='content' tiddler='MainMenu'></div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
!ViewTemplate
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
!EditTemplate
<!--{{{-->
<span class='title' macro='edit title'></span></div>
<span class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></span></div>
<div macro='annotations'></div><br>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<div class='editor' macro='edit text'></div>
<!--}}}-->
!StyleSheet
/*{{{*/
body {
    margin-left: 2px;
    margin-right: 2px;
}
#backstageArea, #backstageCloak {
    margin-left: -2px;
    margin-right: -2px;
}
#contentWrapper {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#header {
    [[MineralTheme##StyleGrey]]
    display: block;
    margin-bottom: 6px;
    margin-top: 6px;
    text-align: left;
}
#header .tiddlyLinkExisting, #header .tiddlyLinkNonExisting {
    background: none;
    color:[[ColorPalette::SecondaryMid]];
}
#sidebarSearch .txtOptionInput {
    margin-top: 10px;
    float: right;
    width: 11em;
}
#sidebarSearch .searchButton {
    display: none;
}
#sidebar {
	display: none;
}
#topMenu{
    [[MineralTheme##StyleWhite]]
    display: block;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
    text-shadow: none;
}
#topMenu .tiddlyLink, #topMenu .button, .viewer .button, #topMenu .externalLink, #tiddlerMainMenu .tiddlyLinkExisting, #tiddlerMainMenu .tiddlyLinkNonExisting, #tiddlerMainMenu .externalLink {
    [[MineralTheme##StyleBlue]]
    font-size:120%;
}
#topMenu .tiddlyLink:hover, #topMenu .button:hover, .viewer .button:hover, #topMenu .externalLink:hover, #tiddlerMainMenu .tiddlyLinkExisting:hover, #tiddlerMainMenu .tiddlyLinkNonExisting:hover, #tiddlerMainMenu .externalLink:hover, .popup li a:hover {
    [[MineralTheme##StyleBlueHover]]
}
#topMenu .tiddlyLink:active, #topMenu .button:active, .viewer .button:active, #topMenu .externalLink:active, #tiddlerMainMenu .tiddlyLinkExisting:active ,#tiddlerMainMenu .tiddlyLinkNonExisting:active, #tiddlerMainMenu .externalLink:active, .popup li a:active {
    [[MineralTheme##StyleBlueActive]]
}
#searchResults .button {
    [[MineralTheme##StyleBlue]]
}
#searchResults .button:hover {
    [[MineralTheme##StyleBlueHover]]
}
#searchResults .button:active {
    [[MineralTheme##StyleBlueActive]]
}
#searchResults {
    [[MineralTheme##StyleWhite]]
    text-shadow: none;
    text-align: left;
    display: block;
    margin-bottom: 10px;
}
.tiddlerTweaker {
    background: [[MineralTheme##StyleWhite]]
    text-shadow: none;
    text-align: left;
}
#displayArea {
    margin-left: 0px;
    margin-right: 0px;
}
.toolbar {
    float: right;
    visibility:hidden;
}
.selected .toolbar, .toolbar a:hover {
    visibility:visible;
}
.annotation {
    margin-bottom: -8px;
}
.tiddler, .viewer pre {
    [[MineralTheme##StyleWhite]]
    display: block;
    margin-bottom: 10px;
    text-align: left;
    text-shadow: none;
}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {
    [[MineralTheme##BlueSharp]]
    text-shadow: none;
    color:[[ColorPalette::Background]];
}
.viewer table, table.twtable {
    border: 1px;
}
.viewer td, .viewer tr, .twtable td, .twtable tr {
    vertical-align: top;
}
.tabContents {
    background: [[MineralTheme##StyleWhite]]
    text-shadow: none;
    text-align: left;
    margin-bottom: 10px;
}
.tabUnselected {
    background: [[MineralTheme##StyleGrey]]
}
.tabSelected {
    background: [[MineralTheme##StyleBlue]]
}
.tagging, .tagged {
    [[MineralTheme##StyleWhite]]
    text-align: left;
    text-shadow: none;
    margin-top: 6px;
    margin-bottom: 10px;
}
.tagging {
    display: none;
}
.tagging .button, .tagged .button, .tagging .tiddlyLinkExisting, .tagging .tiddlyLinkNonExisting {
    [[MineralTheme##StyleWhite]]
}
.tagging .button:hover, .tagged .button:hover, .tagging:hover .tiddlyLinkExisting:hover, .tagging .tiddlyLinkNonExisting:hover {
    [[MineralTheme##StyleWhiteHover]]
}
.tagging .button:active, .tagged .button:active, .tagging:active .tiddlyLinkExisting:active, .tagging .tiddlyLinkNonExisting:active {
    [[MineralTheme##StyleWhiteActive]]
}
.tagged li, .tagging li  {
    margin-bottom: 6px;
    margin-top: 2px;
}
.popup {
    [[MineralTheme##StyleGrey]]
    text-align: left;
}
.popup li a:hover {
    margin-bottom: 4px;
    margin-top: 4px;
}
.popup li a, .popup li a:visited {
    [[MineralTheme##StyleBlue]]
    margin-bottom: 4px;
    margin-top: 4px;
}
.popup li.disabled {
    color:[[ColorPalette::Grey]];
}
.tiddler .toolbar .button {
    [[MineralTheme##StyleRosy]]
}
.tiddler .toolbar .button:hover {
    [[MineralTheme##StyleRosyHover]]
}
.tiddler .toolbar .button:active {
    [[MineralTheme##StyleRosyActive]]
}
#messageArea {
    [[MineralTheme##StyleGrey]]
    display: none;
    text-align: left;
}
#messageArea a, #messageArea a:hover {
    color:[[ColorPalette::SecondaryMid]];
}
[[StyleSheet]]
/*}}}*/
/%
!StyleBase
/*{{{*/
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: arrow;
	text-align: center;
	text-decoration: none;
	font-size: 11px/100% Arial, Helvetica, sans-serif;
	padding: .2em 1em .275em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
/*}}}*/
!GreySharp
/*{{{*/
	color: #606060;
	border: solid 1px #b7b7b7 !important;
	color: #e9e9e9;
	border: solid 1px #555 !important;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
/*}}}*/
!StyleGrey
/*{{{*/
[[MineralTheme##StyleBase]]
	color: #606060;
	border: solid 1px #b7b7b7 !important;
	color: #e9e9e9;
	border: solid 1px #555 !important;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
/*}}}*/
!StyleGreyHover
/*{{{*/
	color:#FFFFFF;
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
/*}}}*/
!StyleGreyActive
/*{{{*/
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
	position: relative;
	top: 1px;
/*}}}*/
!WhiteSharp
/*{{{*/
	color: #606060;
	border: solid 1px #b7b7b7 !important;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
/*}}}*/
!StyleWhite
/*{{{*/
[[MineralTheme##StyleBase]]
	color: #606060;
	border: solid 1px #b7b7b7 !important;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
/*}}}*/
!StyleWhiteHover
/*{{{*/
	color: #606060;
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
/*}}}*/
!StyleWhiteActive
/*{{{*/
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
	position: relative;
	top: 1px;
/*}}}*/
!BlueSharp
/*{{{*/
	color: #d9eef7;
	border: solid 1px #0076a3 !important;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
/*}}}*/
!StyleBlue
/*{{{*/
[[MineralTheme##StyleBase]]
	color: #d9eef7;
	border: solid 1px #0076a3 !important;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
/*}}}*/
!StyleBlueHover
/*{{{*/
	color:#FFFFFF;
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
/*}}}*/
!StyleBlueActive
/*{{{*/
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
	position: relative;
	top: 1px;
/*}}}*/
!RosySharp
/*{{{*/
	color: #fae7e9;
	border: solid 1px #b73948 !important;
	background: #da5867;
	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
	background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
/*}}}*/
!StyleRosy
/*{{{*/
[[MineralTheme##StyleBase]]
	color: #fae7e9;
	border: solid 1px #b73948 !important;
	background: #da5867;
	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
	background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
/*}}}*/
!StyleRosyHover
/*{{{*/
	color:#FFFFFF;
	background: #ba4b58;
	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
	background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
/*}}}*/
!StyleRosyActive
/*{{{*/
	color: #dca4ab;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
	background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
	position: relative;
	top: 1px;
/*}}}*/
!End
%/

| Date modified | Date created |h
|<<timeline "modified" "20">>|<<timeline "created" "20">>|
| [[Show all Tiddlers|Lists]] |>|f

/***
|''Name''|SimpleSearchPlugin|
|''Description''|displays search results as a simple list of matching tiddlers|
|''Authors''|FND|
|''Version''|0.4.1|
|''Status''|stable|
|''Source''|http://devpad.tiddlyspot.com/#SimpleSearchPlugin|
|''CodeRepository''|http://svn.tiddlywiki.org/Trunk/contributors/FND/plugins/SimpleSearchPlugin.js|
|''License''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''Keywords''|search|
!Revision History
!!v0.2.0 (2008-08-18)
* initial release
!!v0.3.0 (2008-08-19)
* added Open All button (renders Classic Search option obsolete)
* sorting by relevance (title matches before content matches)
!!v0.4.0 (2008-08-26)
* added tag matching
!To Do
* tag matching optional
* animations for container creation and removal
* when clicking on search results, do not scroll to the respective tiddler (optional)
* use template for search results
!Code
***/
//{{{
if(!version.extensions.SimpleSearchPlugin) { //# ensure that the plugin is only installed once
version.extensions.SimpleSearchPlugin = { installed: true };

if(!config.extensions) { config.extensions = {}; }

config.extensions.SimpleSearchPlugin = {
	heading: "Search Results",
	containerId: "searchResults",
	btnCloseLabel: "close",
	btnCloseTooltip: "dismiss search results",
	btnCloseId: "search_close",
	btnOpenLabel: "Open all",
	btnOpenTooltip: "open all search results",
	btnOpenId: "search_open",

	displayResults: function(matches, query) {
		story.refreshAllTiddlers(true); // update highlighting within story tiddlers
		var el = document.getElementById(this.containerId);
		query = '"""' + query + '"""'; // prevent WikiLinks
		if(el) {
			removeChildren(el);
		} else { //# fallback: use displayArea as parent
			var container = document.getElementById("displayArea");
			el = document.createElement("div");
			el.id = this.containerId;
			el = container.insertBefore(el, container.firstChild);
		}
		var msg = "!" + this.heading + "\n";
		if(matches.length > 0) {
			msg += "''" + config.macros.search.successMsg.format([matches.length.toString(), query]) + ":''\n";
			this.results = [];
			for(var i = 0 ; i < matches.length; i++) {
				this.results.push(matches[i].title);
				msg += "* [[" + matches[i].title + "]]\n";
			}
		} else {
			msg += "''" + config.macros.search.failureMsg.format([query]) + "''"; // XXX: do not use bold here!?
		}
		createTiddlyButton(el, this.btnCloseLabel, this.btnCloseTooltip, config.extensions.SimpleSearchPlugin.closeResults, "button", this.btnCloseId);
		wikify(msg, el);
		if(matches.length > 0) { // XXX: redundant!?
			createTiddlyButton(el, this.btnOpenLabel, this.btnOpenTooltip, config.extensions.SimpleSearchPlugin.openAll, "button", this.btnOpenId);
		}
	},

	closeResults: function() {
		var el = document.getElementById(config.extensions.SimpleSearchPlugin.containerId);
		removeNode(el);
		config.extensions.SimpleSearchPlugin.results = null;
		highlightHack = null;
	},

	openAll: function(ev) {
		story.displayTiddlers(null, config.extensions.SimpleSearchPlugin.results);
		return false;
	}
};

config.shadowTiddlers.StyleSheetSimpleSearch = "/*{{{*/\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " {\n" +
	"\toverflow: auto;\n" +
	"\tpadding: 5px 1em 10px;\n" +
	"\tbackground-color: [[ColorPalette::TertiaryPale]];\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " h1 {\n" +
	"\tmargin-top: 0;\n" +
	"\tborder: none;\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " ul {\n" +
	"\tmargin: 0.5em;\n" +
	"\tpadding-left: 1.5em;\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " .button {\n" +
	"\tdisplay: block;\n" +
	"\tborder-color: [[ColorPalette::TertiaryDark]];\n" +
	"\tpadding: 5px;\n" +
	"\tbackground-color: [[ColorPalette::TertiaryLight]];\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " .button:hover {\n" +
	"\tborder-color: [[ColorPalette::SecondaryMid]];\n" +
	"\tbackground-color: [[ColorPalette::SecondaryLight]];\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.btnCloseId + " {\n" +
	"\tfloat: right;\n" +
	"\tmargin: -5px -1em 5px 5px;\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.btnOpenId + " {\n" +
	"\tfloat: left;\n" +
	"\tmargin-top: 5px;\n" +
	"}\n" +
	"/*}}}*/";
store.addNotification("StyleSheetSimpleSearch", refreshStyles);

// override Story.search()
Story.prototype.search = function(text, useCaseSensitive, useRegExp) {
	highlightHack = new RegExp(useRegExp ? text : text.escapeRegExp(), useCaseSensitive ? "mg" : "img");
	var matches = store.search(highlightHack, null, "excludeSearch");
	var q = useRegExp ? "/" : "'";
	config.extensions.SimpleSearchPlugin.displayResults(matches, q + text + q);
};

// override TiddlyWiki.search() to sort by relevance
TiddlyWiki.prototype.search = function(searchRegExp, sortField, excludeTag, match) {
	var candidates = this.reverseLookup("tags", excludeTag, !!match);
	var primary = [];
	var secondary = [];
	var tertiary = [];
	for(var t = 0; t < candidates.length; t++) {
		if(candidates[t].title.search(searchRegExp) != -1) {
			primary.push(candidates[t]);
		} else if(candidates[t].tags.join(" ").search(searchRegExp) != -1) {
			secondary.push(candidates[t]);
		} else if(candidates[t].text.search(searchRegExp) != -1) {
			tertiary.push(candidates[t]);
		}
	}
	var results = primary.concat(secondary).concat(tertiary);
	if(sortField) {
		results.sort(function(a, b) {
			return a[sortField] < b[sortField] ? -1 : (a[sortField] == b[sortField] ? 0 : +1);
		});
	}
	return results;
};

} //# end of "install only once"
//}}}

... a ~TiddlyWiki hosted on github

Bauwe's page

/***
|Name|TiddlerTweakerPlugin|
|Source|http://www.TiddlyTools.com/#TiddlerTweakerPlugin|
|Version|2.4.5|
|Author|Eric Shulman|
|License|http://www.TiddlyTools.com/#LegalStatements|
|~CoreVersion|2.1|
|Type|plugin|
|Description|select multiple tiddlers and modify author, created, modified and/or tag values|
~TiddlerTweaker is a 'power tool' for TiddlyWiki authors.  Select multiple tiddlers from a listbox and 'bulk modify' the creator, author, created, modified and/or tag values of those tiddlers using a compact set of form fields.  The values you enter into the fields simultaneously overwrite the existing values in all tiddlers you have selected.
!!!!!Usage
<<<
{{{<<tiddlerTweaker>>}}}
{{smallform{<<tiddlerTweaker>>}}}
By default, any tags you enter into the TiddlerTweaker will //replace// the existing tags in all the tiddlers you have selected.  However, you can also use TiddlerTweaker to quickly filter specified tags from the selected tiddlers, while leaving any other tags assigned to those tiddlers unchanged:
>Any tag preceded by a '+' (plus) or '-' (minus), will be added or removed from the existing tags //instead of replacing the entire tag definition// of each tiddler (e.g., enter '-excludeLists' to remove that tag from all selected tiddlers.  When using this syntax, care should be taken to ensure that //every// tag is preceded by '+' or '-', to avoid inadvertently overwriting any other existing tags on the selected tiddlers.  (note: the '+' or '-' prefix on each tag value is NOT part of the tag value, and is only used by TiddlerTweaker to control how that tag value is processed)
Important Notes:
* TiddlerTweaker is a 'power user' tool that can make changes to many tiddlers at once.  ''You should always have a recent backup of your document (or 'save changes' just *before* tweaking the tiddlers), just in case you accidentally 'shoot yourself in the foot'.''
* The date and author information on any tiddlers you tweak will ONLY be updated if the corresponding checkboxes have been selected.  As a general rule, after using TiddlerTweaker, always ''//remember to save your document//'' when you are done, even though the tiddler timeline tab may not show any recently modified tiddlers.
* Selecting and updating all tiddlers in a document can take a while.  Your browser may warn about an 'unresponsive script'.  Usually, if you allow it to continue, it should complete the processing... eventually.  Nonetheless, be sure to save your work before you begin tweaking lots of tiddlers, just in case something does get stuck.
<<<
!!!!!Revisions
<<<
2011.01.21 2.4.5 auto-selection: use "-" for untagged tiddlers.  Also, added 'opened', 'invert'
2009.09.15 2.4.4 added 'edit' button. moved html definition to separate section
2009.09.13 2.4.3 in settiddlers(), convert backslashed chars (\n\b\s\t) in replacement text
2009.06.26 2.4.2 only add brackets around tags containing spaces
2009.06.22 2.4.1 in setFields(), add brackets around all tags shown tweaker edit field
2009.03.30 2.4.0 added 'sort by modifier'
2009.01.22 2.3.0 added support for text pattern find/replace
2008.10.27 2.2.3 in setTiddlers(), fixed Safari bug by replacing static Array.concat(...) with new Array().concat(...)
2008.09.07 2.2.2 added removeCookie() function for compatibility with [[CookieManagerPlugin]]
2008.05.12 2.2.1 replace built-in backstage tweak task with tiddler tweaker control panel (moved from BackstageTweaks)
2008.01.13 2.2.0 added 'auto-selection' links: all, changed, tags, title, text
2007.12.26 2.1.0 added support for managing 'creator' custom field (see [[CoreTweaks]])
2007.11.01 2.0.3 added config.options.txtTweakerSortBy for cookie-based persistence of list display order preference setting.
2007.09.28 2.0.2 in settiddlers() and deltiddlers(), added suspend/resume notification handling (improves performance when operating on multiple tiddlers)
2007.08.03 2.0.1 added shadow definition for [[TiddlerTweaker]] tiddler for use as parameter references with {{{<<tiddler>>, <<slider>> or <<tabs>>}}} macros.
2007.08.03 2.0.0 converted from inline script
2006.01.01 1.0.0 initial release
<<<
!!!!!Code
***/
//{{{
version.extensions.TiddlerTweakerPlugin= {major: 2, minor: 4, revision: 5, date: new Date(2011,1,21)};

// shadow tiddler
config.shadowTiddlers.TiddlerTweaker='<<tiddlerTweaker>>';

// defaults
if (config.options.txtTweakerSortBy==undefined) config.options.txtTweakerSortBy='modified';

// backstage task
if (config.tasks) { // for TW2.2b3 or above
	config.tasks.tweak.tooltip='review/modify tiddler internals: dates, authors, tags, etc.';
	config.tasks.tweak.content='{{smallform small groupbox{<<tiddlerTweaker>>}}}';
}

// if removeCookie() function is not defined by TW core, define it here.
if (window.removeCookie===undefined) {
	window.removeCookie=function(name) {
		document.cookie = name+'=; expires=Thu, 01-Jan-1970 00:00:01 UTC; path=/;'; 
	}
}

config.macros.tiddlerTweaker = {
	handler: function(place,macroName,params,wikifier,paramString,tiddler) {
		var span=createTiddlyElement(place,'span');
		span.innerHTML=store.getTiddlerText('TiddlerTweakerPlugin##html');
		this.init(span.getElementsByTagName('form')[0],config.options.txtTweakerSortBy);
	},
	init: function(f,sortby) { // set form controls
		if (!f) return; // form might not be rendered yet...
		while (f.list.options[0]) f.list.options[0]=null; // empty the list
		var tids=store.getTiddlers(sortby);
		if (sortby=='size') // descending order
			tids.sort(function(a,b) {return a.text.length > b.text.length ? -1 : (a.text.length == b.text.length ? 0 : +1);});
		var who='';
		for (i=0; i<tids.length; i++) { var t=tids[i];
			var label=t.title; var value=t.title;
			switch (sortby) {
				case 'modified':
				case 'created':
					var t=tids[tids.length-i-1]; // reverse order
					var when=t[sortby].formatString('YY.0MM.0DD 0hh:0mm ');
					label=when+t.title;
					value=t.title;
					break;
				case 'size':
					label='['+t.text.length+'] '+label;
					break;
				case 'modifier':
				case 'creator':
					if (who!=t[sortby]) {
						who=t[sortby];
						f.list.options[f.list.length]=new Option('by '+who+':','',false,false);
					}
					label='\xa0\xa0\xa0'+label; // indent
					break;
			}
			f.list.options[f.list.length]=new Option(label,value,false,false);
		}
		f.title.value=f.who.value=f.creator.value=f.tags.value='';
		f.cm.value=f.cd.value=f.cy.value=f.ch.value=f.cn.value='';
		f.mm.value=f.md.value=f.my.value=f.mh.value=f.mn.value='';
		f.stats.disabled=f.set.disabled=f.del.disabled=f.edit.disabled=f.display.disabled=true;
		f.settitle.disabled=false;
		config.options.txtTweakerSortBy=sortby;
		f.sortby.value=sortby; // sync droplist
		if (sortby!='modified') saveOptionCookie('txtTweakerSortBy');
		else removeCookie('txtTweakerSortBy');
	},
	enablefields: function(here) { // enables/disables inputs based on #items selected
		var f=here.form; var list=f.list;
		var c=0; for (i=0;i<list.length;i++) if (list.options[i].selected) c++;
		if (c>1) f.title.disabled=true;
		if (c>1) f.settitle.checked=false;
		f.set.disabled=(c==0);
		f.del.disabled=(c==0);
		f.edit.disabled=(c==0);
		f.display.disabled=(c==0);
		f.settitle.disabled=(c>1);
		f.stats.disabled=(c==0);
		var msg=(c==0)?'select tiddlers':(c+' tiddler'+(c!=1?'s':'')+' selected');
		here.previousSibling.firstChild.firstChild.nextSibling.innerHTML=msg;
		if (c) clearMessage(); else displayMessage('no tiddlers selected');
	},
	setfields: function(here) { // set fields from first selected tiddler
		var f=here.form;
		if (!here.value.length) {
			f.title.value=f.who.value=f.creator.value=f.tags.value='';
			f.cm.value=f.cd.value=f.cy.value=f.ch.value=f.cn.value='';
			f.mm.value=f.md.value=f.my.value=f.mh.value=f.mn.value='';
			return;
		}
		var tid=store.getTiddler(here.value); if (!tid) return;
		f.title.value=tid.title;
		f.who.value=tid.modifier;
		f.creator.value=tid.fields['creator']||''; // custom field - might not exist
		f.tags.value=tid.tags.map(function(t){return String.encodeTiddlyLink(t)}).join(' ');
		var c=tid.created; var m=tid.modified;
		f.cm.value=c.getMonth()+1;
		f.cd.value=c.getDate();
		f.cy.value=c.getFullYear();
		f.ch.value=c.getHours();
		f.cn.value=c.getMinutes();
		f.mm.value=m.getMonth()+1;
		f.md.value=m.getDate();
		f.my.value=m.getFullYear();
		f.mh.value=m.getHours();
		f.mn.value=m.getMinutes();
	},
	selecttiddlers: function(here,callback) {
		var f=here; while (f&&f.nodeName.toLowerCase()!='form')f=f.parentNode;
		for (var t=f.list.options.length-1; t>=0; t--)
			f.list.options[t].selected=callback(f.list.options[t]);
		config.macros.tiddlerTweaker.enablefields(f.list);
		return false;
	},
	settiddlers: function(here) {
		var f=here.form; var list=f.list;
		var tids=[];
		for (i=0;i<list.length;i++) if (list.options[i].selected) tids.push(list.options[i].value);
		if (!tids.length) { alert('please select at least one tiddler'); return; }
		var cdate=new Date(f.cy.value,f.cm.value-1,f.cd.value,f.ch.value,f.cn.value);
		var mdate=new Date(f.my.value,f.mm.value-1,f.md.value,f.mh.value,f.mn.value);
		if (tids.length>1 && !confirm('Are you sure you want to update these tiddlers:\n\n'+tids.join(', '))) return;
		store.suspendNotifications();
		for (t=0;t<tids.length;t++) {
			var tid=store.getTiddler(tids[t]); if (!tid) continue;
			var title=!f.settitle.checked?tid.title:f.title.value;
			var who=!f.setwho.checked?tid.modifier:f.who.value;
			var text=tid.text;
			if (f.replacetext.checked) {
				var r=f.replacement.value.replace(/\\t/mg,'\t').unescapeLineBreaks();
				text=text.replace(new RegExp(f.pattern.value,'mg'),r);
			}				
			var tags=tid.tags;
			if (f.settags.checked) { 
				var intags=f.tags.value.readBracketedList();
				var addtags=[]; var deltags=[]; var reptags=[];
				for (i=0;i<intags.length;i++) {
					if (intags[i].substr(0,1)=='+')
						addtags.push(intags[i].substr(1));
					else if (intags[i].substr(0,1)=='-')
						deltags.push(intags[i].substr(1));
					else
						reptags.push(intags[i]);
				}
				if (reptags.length)
					tags=reptags;
				if (addtags.length)
					tags=new Array().concat(tags,addtags);
				if (deltags.length)
					for (i=0;i<deltags.length;i++)
						{ var pos=tags.indexOf(deltags[i]); if (pos!=-1) tags.splice(pos,1); }
			}
			if (!f.setcdate.checked) cdate=tid.created;
			if (!f.setmdate.checked) mdate=tid.modified;
			store.saveTiddler(tid.title,title,text,who,mdate,tags,tid.fields);
			if (f.setcreator.checked) store.setValue(tid.title,'creator',f.creator.value); // set creator
			if (f.setcdate.checked) tid.assign(null,null,null,null,null,cdate); // set create date
		}
		store.resumeNotifications();
		this.init(f,f.sortby.value);
	},
	displaytiddlers: function(here,edit) {
		var f=here.form; var list=f.list;
		var tids=[];
		for (i=0; i<list.length;i++) if (list.options[i].selected) tids.push(list.options[i].value);
		if (!tids.length) { alert('please select at least one tiddler'); return; }
		story.displayTiddlers(story.findContainingTiddler(f),tids,edit?DEFAULT_EDIT_TEMPLATE:null);
	},
	deltiddlers: function(here) {
		var f=here.form; var list=f.list;
		var tids=[];
		for (i=0;i<list.length;i++) if (list.options[i].selected) tids.push(list.options[i].value);
		if (!tids.length) { alert('please select at least one tiddler'); return; }
		if (!confirm('Are you sure you want to delete these tiddlers:\n\n'+tids.join(', '))) return;
		store.suspendNotifications();
		for (t=0;t<tids.length;t++) {
			var tid=store.getTiddler(tids[t]); if (!tid) continue;
			if (tid.tags.contains('systemConfig')) {
				var msg=tid.title+' is tagged with systemConfig.'
					+'\n\nRemoving this tiddler may cause unexpected results.  Are you sure?';
				if (!confirm(msg)) continue;
			}
			store.removeTiddler(tid.title);
			story.closeTiddler(tid.title);
		}
		store.resumeNotifications();
		this.init(f,f.sortby.value);
	},
	stats: function(here) {
		var f=here.form; var list=f.list; var tids=[]; var out=''; var tot=0;
		var target=f.nextSibling;
		for (i=0;i<list.length;i++) if (list.options[i].selected) tids.push(list.options[i].value);
		if (!tids.length) { alert('please select at least one tiddler'); return; }
		for (t=0;t<tids.length;t++) {
			var tid=store.getTiddler(tids[t]); if (!tid) continue;
			out+='[['+tid.title+']] '+tid.text.length+'\n'; tot+=tid.text.length;
		}
		var avg=tot/tids.length;
		out=tot+' bytes in '+tids.length+' selected tiddlers ('+avg+' bytes/tiddler)\n<<<\n'+out+'<<<\n';
		removeChildren(target);
		target.innerHTML="<hr><font size=-2><a href='javascript:;' style='float:right' "
			+"onclick='this.parentNode.parentNode.style.display=\"none\"'>close</a></font>";
		wikify(out,target);
		target.style.display='block';
	}
};
//}}}
/***
//{{{
!html
<style>
.tiddlerTweaker table,
.tiddlerTweaker table tr,
.tiddlerTweaker table td
	{ padding:0;margin:0;border:0;white-space:nowrap; }
</style><form class='tiddlerTweaker'><!--
--><table style="width:100%"><tr valign="top"><!--
--><td style="text-align:center;width:99%;"><!--
	--><font size=-2><div style="text-align:left;"><span style="float:right"><!--
	-->&nbsp; <a href="javascript:;" 
		title="select all tiddlers"
		onclick="return config.macros.tiddlerTweaker.selecttiddlers(this,function(opt){
			return opt.value.length;
		});">all</a><!--
	-->&nbsp; <a href="javascript:;" 
		title="select tiddlers currently displayed in the story column"
		onclick="return config.macros.tiddlerTweaker.selecttiddlers(this,function(opt){
			return story.getTiddler(opt.value);
		});">opened</a><!--
	-->&nbsp; <a href="javascript:;" 
		title="select tiddlers that are new/changed since the last file save"
		onclick="var lastmod=new Date(document.lastModified);
			return config.macros.tiddlerTweaker.selecttiddlers(this,function(opt){
				var tid=store.getTiddler(opt.value);
				return tid&&tid.modified>lastmod;
			});
		">changed</a><!--
	-->&nbsp; <a href="javascript:;" 
		title="select tiddlers with at least one matching tag"
		onclick="var t=prompt('Enter space-separated tags (match one or more).  Use \x22-\x22 to match untagged tiddlers');
			if (!t||!t.length) return false;
			var tags=t.readBracketedList();
			return config.macros.tiddlerTweaker.selecttiddlers(this,function(opt){
				var tid=store.getTiddler(opt.value);
				return tid&&tags[0]=='-'?!tid.tags.length:tid.tags.containsAny(tags);
			});
		">tags</a><!--
	-->&nbsp; <a href="javascript:;" 
		title="select tiddlers whose titles include matching text"
		onclick="var t=prompt('Enter a title (or portion of a title) to match');
			if (!t||!t.length) return false;
			return config.macros.tiddlerTweaker.selecttiddlers(this,function(opt){
				return opt.value.indexOf(t)!=-1;
			});
		">titles</a><!--
	-->&nbsp; <a href="javascript:;" 
		title="select tiddlers containing matching text"
		onclick="var t=prompt('Enter tiddler text (content) to match');
			if (!t||!t.length) return false;
			return config.macros.tiddlerTweaker.selecttiddlers(this,function(opt){
				var tt=store.getTiddlerText(opt.value,'');
				return tt.indexOf(t)!=-1;
			});
		">text</a><!--
	-->&nbsp; <a href="javascript:;" 
		title="reverse selection of all list items"
		onclick="return config.macros.tiddlerTweaker.selecttiddlers(this,function(opt){
			return !opt.selected;
		});">invert</a><!--
	--></span><span>select tiddlers</span><!--
	--></div><!--
	--></font><select multiple name=list size="11" style="width:99.99%" 
		title="use click, shift-click and/or ctrl-click to select multiple tiddler titles" 
		onclick="config.macros.tiddlerTweaker.enablefields(this)" 
		onchange="config.macros.tiddlerTweaker.setfields(this)"><!--
	--></select><br><!--
	-->show<input type=text size=1 value="11" 
		onchange="this.form.list.size=this.value; this.form.list.multiple=(this.value>1);"><!--
	-->by<!--
	--><select name=sortby size=1 
		onchange="config.macros.tiddlerTweaker.init(this.form,this.value)"><!--
	--><option value="title">title</option><!--
	--><option value="size">size</option><!--
	--><option value="modified">modified</option><!--
	--><option value="created">created</option><!--
	--><option value="modifier">modifier</option><!--
	--></select><!--
	--><input type="button" value="refresh" 
		onclick="config.macros.tiddlerTweaker.init(this.form,this.form.sortby.value)"<!--
	--> <input type="button" name="stats" disabled value="totals..." 
		onclick="config.macros.tiddlerTweaker.stats(this)"><!--
--></td><td style="width:1%"><!--
	--><div style="text-align:left"><font size=-2>&nbsp;modify values</font></div><!--
	--><table style="width:100%;"><tr><!--
	--><td style="padding:1px"><!--
		--><input type=checkbox name=settitle unchecked 
			title="allow changes to tiddler title (rename tiddler)" 
			onclick="this.form.title.disabled=!this.checked">title<!--
	--></td><td style="padding:1px"><!--
		--><input type=text name=title size=35 style="width:98%" disabled><!--
	--></td></tr><tr><td style="padding:1px"><!--
		--><input type=checkbox name=setcreator unchecked 
			title="allow changes to tiddler creator" 
			onclick="this.form.creator.disabled=!this.checked">created by<!--
	--></td><td style="padding:1px;"><!--
		--><input type=text name=creator size=35 style="width:98%" disabled><!--
	--></td></tr><tr><td style="padding:1px"><!--
		--><input type=checkbox name=setwho unchecked 
			title="allow changes to tiddler author" 
			onclick="this.form.who.disabled=!this.checked">modified by<!--
	--></td><td style="padding:1px"><!--
		--><input type=text name=who size=35 style="width:98%" disabled><!--
	--></td></tr><tr><td style="padding:1px"><!--
		--><input type=checkbox name=setcdate unchecked 
			title="allow changes to created date" 
			onclick="var f=this.form;
				f.cm.disabled=f.cd.disabled=f.cy.disabled=f.ch.disabled=f.cn.disabled=!this.checked"><!--
		-->created on<!--
	--></td><td style="padding:1px"><!--
		--><input type=text name=cm size=2 style="width:2em;padding:0;text-align:center" disabled><!--
		--> / <input type=text name=cd size=2 style="width:2em;padding:0;text-align:center" disabled><!--
		--> / <input type=text name=cy size=4 style="width:3em;padding:0;text-align:center" disabled><!--
		--> at <input type=text name=ch size=2 style="width:2em;padding:0;text-align:center" disabled><!--
		--> : <input type=text name=cn size=2 style="width:2em;padding:0;text-align:center" disabled><!--
	--></td></tr><tr><td style="padding:1px"><!--
		--><input type=checkbox name=setmdate unchecked 
			title="allow changes to modified date" 
			onclick="var f=this.form;
				f.mm.disabled=f.md.disabled=f.my.disabled=f.mh.disabled=f.mn.disabled=!this.checked"><!--
		-->modified on<!--
	--></td><td style="padding:1px"><!--
		--><input type=text name=mm size=2 style="width:2em;padding:0;text-align:center" disabled><!--
		--> / <input type=text name=md size=2 style="width:2em;padding:0;text-align:center" disabled><!--
		--> / <input type=text name=my size=4 style="width:3em;padding:0;text-align:center" disabled><!--
		--> at <input type=text name=mh size=2 style="width:2em;padding:0;text-align:center" disabled><!--
		--> : <input type=text name=mn size=2 style="width:2em;padding:0;text-align:center" disabled><!--
	--></td></tr><tr><td style="padding:1px"><!--
		--><input type=checkbox name=replacetext unchecked
			title="find/replace matching text" 
			onclick="this.form.pattern.disabled=this.form.replacement.disabled=!this.checked">replace text<!--
	--></td><td style="padding:1px"><!--
		--><input type=text name=pattern size=15 value="" style="width:40%" disabled 
			title="enter TEXT PATTERN (regular expression)"> with<!--
		--><input type=text name=replacement size=15 value="" style="width:40%" disabled 
			title="enter REPLACEMENT TEXT"><!--
	--></td></tr><tr><td style="padding:1px"><!--
		--><input type=checkbox name=settags checked 
			title="allow changes to tiddler tags" 
			onclick="this.form.tags.disabled=!this.checked">tags<!--
	--></td><td style="padding:1px"><!--
		--><input type=text name=tags size=35 value="" style="width:98%" 
			title="enter new tags or use '+tag' and '-tag' to add/remove tags from existing tags"><!--
	--></td></tr></table><!--
	--><div style="text-align:center"><!--
	--><nobr><input type=button name=display disabled style="width:24%" value="display" 
		title="show selected tiddlers"
		onclick="config.macros.tiddlerTweaker.displaytiddlers(this,false)"><!--
	--> <input type=button name=edit disabled style="width:23%" value="edit" 
		title="edit selected tiddlers"
		onclick="config.macros.tiddlerTweaker.displaytiddlers(this,true)"><!--
	--> <input type=button name=del disabled style="width:24%" value="delete" 
		title="remove selected tiddlers"
		onclick="config.macros.tiddlerTweaker.deltiddlers(this)"><!--
	--> <input type=button name=set disabled style="width:24%" value="update" 
		title="update selected tiddlers"
		onclick="config.macros.tiddlerTweaker.settiddlers(this)"></nobr><!--
	--></div><!--
--></td></tr></table><!--
--></form><span style="display:none"><!--content replaced by tiddler "stats"--></span>
!end
//}}}
***/
 

<br><<tiddlerTweaker>><br><<tiddler EditBar>>

<br><br><<tiddlerTweaker>>

My name is Bauwe Bijl

config.options.txtTheme = "MineralTheme";
config.options.chkAnimate = false;