TiddlySlidy - a TiddlyWiki for creating and presenting Slideshows

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

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

/*{{{*/
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]];}

.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}

.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]];}

#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:0px; top:0px;}

.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:0px 3px 0px 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:0px; padding-bottom:0px;}

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

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.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='header' 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' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

<!--{{{-->
<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>
<!--}}}-->

<!--{{{-->
<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>>

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]]

<<importTiddlers>>

<html><a class="button" href="#" onclick="story.displayTiddlers(null,['NewSlide'])" >New&nbsp;Slide</a></html>

|''PageTemplate''|##PageTemplate|
|''StyleSheet''|##StyleSheet|

!PageTemplate
<!--{{{-->
<div id='header'>
    <p class='siteTitle' refresh='content' tiddler='SiteTitle'></p>
    <div class="modeSwitch" refresh='content' tiddler='ModeSwitch'></div>
</div>
<div id='messageArea'></div>
<div id='author'>
    <div id="mainNav">
        <div id='authorButtons' refresh='content' tiddler='AuthorButtons'></div>
        <div id='mainMenu' refresh='content' force='true' tiddler='MainMenuWrapper'></div>
    </div>
    <div id="displayContainer">
        <div id='displayArea'>
            <div id='tiddlerDisplay'></div>
        </div>
        <div id='sidebar'>
            <div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
            <div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
        </div>
    </div>
</div>
<div id='footer'></div>
<!--}}}-->

!StyleSheet
[[StyleSheet]]
/*{{{*/

    #contentWrapper {
        width: 100%;
        max-width: 100%;
    }

    #author {
        width: 100em;
        margin: 0 auto;
        text-align: left;
    }

    #mainNav {
        width: 18em;
        max-width: 20%;
        float: left;
        margin: 1em 0;
    }

    #displayContainer {
        float: right;
        width: 75em;
        margin: 0;
    }

    #tiddlerDisplay {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    #displayArea {
        width: 50em;
        display: inline;
        margin: 0;
        padding: 0;
    }

    #sidebar {
        width: 18em;
        margin: 0;
        right: 0;
        top: 0;
        float: left;
        margin: 0;
        padding: 0;
        margin: 0;
        position: static;
        float: right;

        /* IE6 hack */
        _position: absolute;
        _top: 8em;
    }

    #footer { 
        clear: both;
    }

#sidebarTabs .tabContents {
    margin: 0 auto;
    text-align: left;
}
#sidebarOptions {
    padding-top:1em;
}
#sidebarOptions a {
    margin:0; 
    padding:0; 
    display: inline; 
}
#sidebarOptions input {
    margin:0.4em 0.5em;
}

#sidebarTabs .tabContents {
    width: 15em; 
    overflow: hidden;
    color: [[ColorPalette::SecondaryMid]];
    border: 2px solid [[ColorPalette::PrimaryPale]];
    background-color: [[ColorPalette::Background]];
    margin: 0;
}

#sidebar .tabUnselected {
    background-color: [[ColorPalette::SecondaryMid]];
    color: [[ColorPalette::Background]];
    margin: 0;
}

#sidebar .tiddlyLinkExisting {
    color: [[ColorPalette::SecondaryMid]];
    margin: 0;
}

#authorButtons {
    height: 3.5em;
    padding: 0 auto;
}

#sidebar a.button,
#authorButtons a.button {
    text-align: center;
    font-size: 1.2em;
}

/* ie6.0 hack */
div#tiddlerDisplay div.viewSlide {
    _height: 475px;
}



/*}}}*/

/***
|''Name:''|BackstageTiddlersPlugin|
|''Description:''|Adds a backstage panel allowing easy access to all tiddlers|
|''Author:''|JeremyRuston|
|''Source:''|http://www.osmosoft.com/#BackstageTiddlersPlugin |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/JeremyRuston/plugins/BackstageTiddlersPlugin.js |
|''Version:''|0.0.1|
|''Date:''|Feb 28, 2008|
|''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.3|

***/

//{{{
if(!version.extensions.BackstageTiddlersPlugin) {

version.extensions.BackstageTiddlersPlugin = {installed:true};

config.tasks.tiddlers = {
	text: "tiddlers",
	tooltip: "Access the raw tiddlers",
	content: "<<tabs txtMainTab 'Timeline' 'Timeline' TabTimeline 'All' 'All tiddlers' TabAll 'Tags' 'All tags' TabTags 'More' 'More lists' TabMore>>"};
config.backstageTasks.push("tiddlers");

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

[[View East|http://www.flickr.com/photos/psd/72440450/]] is a photograph taken by [[Paul Downey|http://blog.whatfettle.com]] of the [[Buncefield Fire|http://en.wikipedia.org/wiki/Buncefield_fire]] from [[Berkhamsted|http://en.wikipedia.org/wiki/Berkhamsted]] on the 11th December 2005.

Bespin

JSBin

JSFiddle

... TiddlyWiki

Background: #fff
Foreground: #000

PrimaryPale: #e8e8e8
PrimaryLight: #747474
PrimaryMid: #333
PrimaryDark: #111

SecondaryPale: #f8f8f8
SecondaryLight: #dddddd
SecondaryMid: #5B6D6E
SecondaryDark: #000

TertiaryPale: #e8e8e8
TertiaryLight: #dddddd
TertiaryMid: #404040
TertiaryDark: #000

Error: #faa

SelectedPale: #dafaff
SelectedLight: #459BF9
SelectedDark: #07f

TiddlySlidyLight: #50a0fc
TiddlySlidyMid: #2d00ff
TiddlySlidyDark: #0069dd

<<knob "|&#x25c4;" "story.firstTiddler()" "First slide">><<knob "&#x25c4;" "story.prevTiddler()" "Previous slide">><<knob "&#x25a3;" "story.switchTheme('AuthorMode');" "Author mode">><<knob "&#x25ba;" "story.nextTiddler()" "Next slide">><<knob "&#x25ba;|" "story.lastTiddler()" "Last slide">><<currentPosition "MainMenu" "SlideSorter">><<progressBar MainMenu>><<knob "F" "#fullscreen" "Full screen" "fullscreen">>

/*{{{*/

.controls {
    font-size: 1.2em;
    color: [[ColorPalette::PrimaryMid]];
    background-color: [[ColorPalette::PrimaryPale]];
    border: 2px solid [[ColorPalette::SecondaryLight]];
    width: 600px;
    height: 2em;
    margin: 0 auto 1em auto;
    padding: 1em;
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
    text-align: center;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.knob {
    float: left;
    margin: 0;
    border: 2px solid [[ColorPalette::PrimaryPale]];
    background-color: [[ColorPalette::PrimaryPale]];
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: normal;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center; 
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
}

.contents {
    width: 6em;
    text-align: center;
}

.controls a:hover div,
.controls a:hover div div,
.controls .contents a:hover {
    text-decoration: none;
    color: [[ColorPalette::Foreground]];
    background-color: [[ColorPalette::Background]];
}

.controls a:active div,
.controls a:active div div,
.controls .contents a:active {
    color: [[ColorPalette::Background]];
}

.controls *:focus {
    outline: none;
}

.controls .fullscreen a:hover div,
.controls .fullscreen a:active div {
    text-decoration: none;
    background-color: [[ColorPalette::PrimaryMid]];
    border: 2px solid [[ColorPalette::PrimaryMid]];
}

.controls .fullscreen a:hover div div,
.controls .fullscreen a:active div div {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.knob div {
    font-weight: bolder;
    -webkit-border-radius: 1em; 
    -moz-border-radius: 1em;
    border-radius: 1em;
    color: [[ColorPalette::Background]];
    background-color: [[ColorPalette::PrimaryMid]];
    -webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
    -moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
    box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
}


.squeeze {
    letter-spacing: -3px; 
}

.fullscreen {
    float: right;
    background-color: [[ColorPalette::PrimaryPale]];
    margin-top: -0.2em;
}

.fullscreen div {
    border: 2px solid [[ColorPalette::PrimaryMid]];
    background-color: [[ColorPalette::PrimaryPale]];
    width: 1em;
    height: 1em;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.fullscreen div div {
    text-indent: -300px;
    overflow: hidden;
    background-color: [[ColorPalette::PrimaryMid]];
    border: 2px solid [[ColorPalette::PrimaryMid]];
    margin-top: -2px;
    margin-left: -2px;
    display: block;
    float: left;
    width: 50%;
    height: 50%;
}

.progressBar {
    margin-top: 0.4em;
}

.progressBar ul {
    list-style-type: none; 
    word-spacing: 0px;
    display: inline;
    padding: 0px;
}

.progressBar li {
    display: inline;
    cursor: pointer;
}

.progressBar a {
    display: block;
    margin: 2px;
    float: left;
    border: 2px solid [[ColorPalette::PrimaryMid]];
    line-height: 5px;
    min-width: 5px;
    width: 5px;
    background-color: [[ColorPalette::PrimaryPale]];
    color: [[ColorPalette::Foreground]];
    padding: 0;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -border-radius: 1em;
    -webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
    -moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
    box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
}

.progressBar .selected {
    background-color: [[ColorPalette::PrimaryMid]];
    color: [[ColorPalette::PrimaryMid]];
    border-color: [[ColorPalette::PrimaryMid]];
}


/*
 *  tooltip balloon
 */
#balloonHook { 
    display: none;
    position: relative;
    z-index: 100;
    opacity: 0.9;
}

#balloonHook .balloon {
    position: absolute;
    z-index: 101;
    margin: 1em auto;
    background-color: [[ColorPalette::PrimaryPale]];
    font-family: Constantia,Palatino,"Palatino Linotype","Palatino LT STD","Times New Roman",serif;
    width: 15em;
    left: -7.25em;
    bottom: 0.2em;
    display: block;
    opacity: 0.95;
}

#balloonHook .balloon > div {
    background-color: [[ColorPalette::PrimaryMid]];
}

#balloonHook .balloon .content {
    color: [[ColorPalette::Background]];
    background-color: [[ColorPalette::PrimaryMid]];
    line-height: 1em;
    padding: 1em;
    text-align:center;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
}

#balloonHook .balloon .pointer {
    height: 0.5em;
}

#balloonHook .balloon .pointer span {
    background-color: [[ColorPalette::PrimaryPale]];
    width: 49.5%;
    height: 100%;
}

#balloonHook .balloon .pointer .left {
    -moz-border-radius-topright: 1em;
    -webkit-border-top-right-radius: 1em;
    float: left;
}

#balloonHook .balloon .pointer .right {
    -moz-border-radius-topleft: 1em;
    -webkit-border-top-left-radius: 1em;
    float: right;
}

.contents {
    float: left;
    font-size: 0.8em;
    padding: 0.4em 1em 0;
    font-weight: lighter;
}

.contents a {
    padding: 0.3em 1em;
}

.contents > a.tiddlyLink,
.contents > a.tiddlyLink:hover {
    padding: 1em 0 0.5em 0;
}

.contents .spacer {
    padding-left: 0.3em;
}

#contents .balloon {
    bottom: 0.6em;
    left: -4.5em;
}

#contentsBalloon,
#contentsBalloon a.tiddlyLink {
    background-color: [[ColorPalette::PrimaryMid]];
    color: [[ColorPalette::Background]];
    font-size: 1.1em;
}

#contentsBalloon a.tiddlyLink:hover {
    color: [[ColorPalette::PrimaryMid]];
    background-color: [[ColorPalette::Background]];
}

#contentsBalloon ul {
    list-style: none;
    text-align: left;
    padding-left: 0;
    margin-left: 0;
    line-height: 1.8em;
}

#contentsBalloon li {
    list-style: none;
}

/*}}}*/

/***
|''Name:''|CurrentPositionPlugin|
|''Description:''| Display current position n/n in a list of tiddlers |
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com) |
|''Source:''|http://whatfettle.com/2008/07/CurrentPositionPlugin/ |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/CurrentPositionPlugin/ |
|''Version:''|0.1|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.4|
!!Documentation
Developed for TiddlySlidy, this Macro to displays the position of the current slide (the most recently displayed tiddler) in a list of tiddlyLinks in the form n/n.

<<currentPosition>>
!!Code
***/
//{{{
/*jslint onevar: false nomen: false plusplus: false */
/*global config onClickTiddlerLink store wikify */
(function ($) {
    version.extensions.CurrentPositionPlugin = {installed: true};

    config.macros.currentPosition = {};
    var macro = config.macros.currentPosition;
    macro.handler = function (place, macroName, params) {
        var list = params[0] || "MainMenu";
        var tiddlylink = params[1] || list;

        var listtext = store.fetchTiddler(list).text;
        var text = listtext.replace(/\**\s*\[\[/g, "");
        text = text.replace(/\]\]\s*$/, "");
        var items = text.split(/\]\]\s*/);

        var total = items.length;
        var first = $('#tiddlerDisplay .tiddler').attr('tiddler');
        var current = items.indexOf(first) + 1;

        $('<div id="contents" class="contents">' +
            '<a class="tiddlyLink" href="javascript:;" tiddlyLink="' + tiddlylink + '">' +
            '<span class="current">' + current + '</span>' + 
            '<span class="spacer">/</span>' +
            '<span class="total">' + total + '</span>' +
            '</a></div>'
        ).appendTo(place);
        $(place).find('a.tiddlyLink')
            .click(onClickTiddlerLink)
            .each(function () {
                if (config.macros.progressBar) {
                    var e = $('<span id="contentsBalloon"></span>')[0];
                    wikify(listtext, e, null, store.getTiddler(list));
                    config.macros.progressBar.popup(this, e);
                    $(e).find('a').attr('title', '');
                }
            });
    };

})(jQuery);
//}}}

/***
|''Name:''|DefaultTiddlerListPlugin|
|''Description:''|DefaultTiddlers taken from a list of tiddler references |
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com) |
|''Source:''|http://whatfettle.com/2008/07/DefaultTiddlerListPlugin/ |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/DefaultTiddlerListPlugin/ |
|''Version:''|0.1|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.4|
!!Documentation
This plugin constructs the default tiddlers from the MainMenu or other tiddler containing a list of tiddler references.
!!Code
***/
//{{{
/*jslint onevar: false nomen: false plusplus: false */
/*global config */
(function ($) {
    version.extensions.DefaultTiddlerListPlugin = {installed: true};

    config.extensions.DefaultTiddlersListPlugin = {
        list: 'MainMenu',
        max: 1,
        filter: function(list, max) {
            var list = store.getTiddlerText("MainMenu");
            list = list.replace(/^[^\[]*\[\[/, "[[");
            list = list.replace(/\]\][^\[]*(\[\[|$)/g, "]]$1");
            return store.filterTiddlers(list).slice(0,max);
        }
    };
    var macro = config.extensions.DefaultTiddlersListPlugin;

    Story.prototype.displayDefaultTiddlers = function()
    {
        this.displayTiddlers(null, macro.filter(macro.list, macro.max));
    };

})(jQuery);
//}}}

http://12days.osmosoft.com/#Forum

<html>
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9978872&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=9978872&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><p></p>
</html>

/***
|''Name:''|DisableWikiLinksPlugin|
|''Description:''|Allows you to disable TiddlyWiki's automatic linking of WikiWords|
|''Author:''|Martin Budden (mjbudden (at) gmail (dot) com)|
|''Source:''|http://www.martinswiki.com/#DisableWikiLinksPlugin |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/MartinBudden/plugins/DisableWikiLinksPlugin.js |
|''Version:''|0.1.3|
|''Date:''|Aug 5, 2006|
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''License:''|[[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]] |
|''~CoreVersion:''|2.1.0|

|''Disable WikiLinks''|<<option chkDisableWikiLinks>>|

***/

//{{{
// Ensure that the DisableWikiLinksPlugin is only installed once.
if(!version.extensions.DisableWikiLinksPlugin) {
version.extensions.DisableWikiLinksPlugin = {installed:true};

if(version.major < 2 || (version.major == 2 && version.minor < 1))
	{alertAndThrow('DisableWikiLinksPlugin requires TiddlyWiki 2.1 or newer.');}

if (config.options.chkDisableWikiLinks==undefined)
	{config.options.chkDisableWikiLinks = false;}

Tiddler.prototype.autoLinkWikiWords = function()
{
	if(config.options.chkDisableWikiLinks==true)
		{return false;}
	return !this.isTagged('systemConfig') && !this.isTagged('excludeMissing');
};

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

<!--{{{-->
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div><div macro='annotations'></div>
<div class="label">Master</div><div class="master editor" macro="edit theme"></div>
<div macro='message views.editor.tagPrompt'></div>
<div class='editor' macro='edit tags'></div>
<div class='editor' macro='edit text'></div>
[[EditToolbar]]
<!--}}}-->

<div class='toolbar' macro='toolbar -cancelTiddler deleteTiddler +saveTiddler'></div>

Can also embed audio, video, font faces, etc.

http://softwareas.com/offline-sound-no-flash-no-file

/***
|''Name:''|FadingMessagesPlugin|
|''Description:''|Automatically clear a displayed message after an interval |
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com) |
|''Source:''|http://whatfettle.com/2008/07/FadingMessagesPlugin/ |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/FadingMessagesPlugin/ |
|''Version:''|0.2|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.4|
|''Overrides:''|displayMessage|
|''Requires:''|WikifiedMessagesPlugin|
!!Documentation
Displayed messages automatically fade away after a short interval. 
!!Options
|<<option txtFadingMessagesTimeout>>|<<message config.optionsDesc.txtFadingMessagesTimeout>>|
|<<option chkAnimate>>|<<message config.optionsDesc.chkAnimate>>|
!!Code
***/
//{{{
if(!version.extensions.FadingMessagesPlugin) {
version.extensions.FadingMessagesPlugin = {installed:true};

	config.options.txtFadingMessagesTimeout = 5;
	config.optionsDesc.txtFadingMessagesTimeout = "seconds before a displayed message clears itself";

	config.animDurationFade = 900;

	config.extensions.FadingMessages = {
		Fader: function(e,done)
		{
			e.style.overflow = 'hidden';
			e.style.display = 'block';
			var p = [];
			p.push({style: 'display', atEnd: 'none'});
			p.push({style: 'opacity', start: 1, end: 0, template: '%0'});
			p.push({style: 'filter', start: 100, end: 0, template: 'alpha(opacity:%0)'});
			return new Morpher(e,config.animDurationFade,p,done);
		},  
		clearMessageBox: function(e)
		{
			try { removeNode(e); } catch(ex) {}
			var msgArea = document.getElementById("messageArea");
			var n = msgArea.getElementsByTagName('div');
			if(!(n&&n.length)){
				msgArea.style.display = "none";
			}
		},
		fadeMessageBox: function(e)
		{
			var me = config.extensions.FadingMessages;
			if(config.options.chkAnimate && anim){
				anim.startAnimating(new me.Fader(e,me.clearMessageBox));
			}else{
				me.clearMessageBox(e);
			}
		},
		createClearAllButton: function(e)
		{
			return null;
		},
		createClearMessageButton: function(e)
		{
			var me = config.extensions.FadingMessages;
			return createTiddlyButton(createTiddlyElement(e,"span",null,"messageClear"),
				"×","",
				function(){me.clearMessageBox(e);});
		},
		_displayMessage: displayMessage,
		displayMessage: function(text,linkText)
		{
			var me = config.extensions.FadingMessages;
			var e = me._displayMessage(text,linkText);
			if(e){
				window.setTimeout(function(){me.fadeMessageBox(e);},config.options.txtFadingMessagesTimeout*1000);
			}
			return e;
		}
	};

	displayMessage = config.extensions.FadingMessages.displayMessage;
	config.extensions.WikifiedMessages.createClearMessageButton = config.extensions.FadingMessages.createClearMessageButton;
	config.extensions.WikifiedMessages.createClearAllButton = config.extensions.FadingMessages.createClearAllButton;
}
//}}}

{{{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var file = fso.OpenTextFile(filePath,2,-1,0);
file.Write(content);
file.Close();
}}}

{{{
if(document.applets["TiddlySaver"])
  return document.applets["TiddlySaver"]
             .saveFile
             (javaUrlToFilename(filePath),"UTF-8",content);
}}}

{{{
var s = new java.io.PrintStream
    (new java.io.FileOutputStream(javaUrlToFilename(filePath)));
s.print(content);
s.close();
}}}

{{{
netscape.security.PrivilegeManager.enablePrivilege
  ("UniversalXPConnect");
var file = Components.classes
  ["@mozilla.org/file/local;1"]
  .createInstance(Components.interfaces.nsILocalFile);
...
var out = Components.classes
  ["@mozilla.org/network/file-output-stream;1"]
  .createInstance(Components.interfaces.nsIFileOutputStream);

out.init(file,0x20|0x02,00004,null);
out.write(content,content.length);
out.flush();
out.close();
}}}

Type the text for 'File Access [Mozilla'

http://www.tiddlywiki.com/firstversion.html

<<<
This FirstVersion  of TiddlyWiki doesn't handle saving at all elegantly. Click the 'Save all' link at the top right for more details.

|''ViewTemplate''|##ViewTemplate|
|''EditTemplate''|##EditTemplate|
|''StyleSheet''|##StyleSheet|

!ViewTemplate
<!--{{{-->
<h2 class="preview">Preview Four Images: <span macro="view title"></span></h2>
<div class='viewSlide'>
    <div class='fourImagesSlide'>
        <div class='title viewer' macro='view title wikified'></div>
        <div class='subtitle viewer' macro='view subtitle wikified'></div>
        <div class='boxes'>
            <div class='box'>
                <div class='caption viewer' macro='view caption wikified'></div>
                <div class='image viewer' macro="imagezoom @image"></div>
            </div>
            <div class='box'>
                <div class='caption viewer' macro='view caption2 wikified'></div>
                <div class='image viewer' macro="imagezoom @image2"></div>
            </div>
            <div class='box'>
                <div class='caption viewer' macro='view caption3 wikified'></div>
                <div class='image viewer' macro="imagezoom @image3"></div>
            </div>
            <div class='box'>
                <div class='caption viewer' macro='view caption4 wikified'></div>
                <div class='image viewer' macro="imagezoom @image4"></div>
            </div>
        </div>
    </div>
</div>
[[ViewToolbar]]
<!--}}}-->

!EditTemplate
<!--{{{-->
<h2>Edit Four Images Slide: <span macro="view title"></span></h2>
<div class='editSlide fourImagesSlideEdit'>
    <div class="label">Title</div><div class="title editor" macro="edit title"></div>
    <div class="label">Subtitle</div><div class="subtitle editor" macro="edit subtitle"></div>
    <div class="label">Caption</div><div class="subtitle editor" macro="edit caption"></div>
    <div class="label">Image</div><div class="subtitle editor" macro="edit image"></div>
    <div class="label">Caption</div><div class="subtitle editor" macro="edit caption2"></div>
    <div class="label">Image</div><div class="subtitle editor" macro="edit image2"></div>
    <div class="label">Caption</div><div class="subtitle editor" macro="edit caption3"></div>
    <div class="label">Image</div><div class="subtitle editor" macro="edit image3"></div>
    <div class="label">Caption</div><div class="subtitle editor" macro="edit caption4"></div>
    <div class="label">Image</div><div class="subtitle editor" macro="edit image4"></div>
</div>
[[EditToolbar]]
<!--}}}-->

!StyleSheet
/*{{{*/
.fourImagesSlide {
    font-size: 2em;
    text-align: left;
    background-color: #e8e8e8;
    height: 100%;
    min-height: 400px;
}

.fourImagesSlide .title {
    color: #747474;
    font-weight: normal;
    letter-spacing: 0;
    padding-left: 0.5em;
}

.fourImagesSlide .subtitle {
    color: #747474;
    font-weight: normal;
    font-size: 0.8em;
    padding-left: 1em;
}

.fourImagesSlide .boxes {
    padding-left: 2em;
}

.fourImagesSlide .box {
    margin: 2px;
    height: auto;
    width: 22%;
    float: left;
    padding: 1em 0;
    text-align: center;
}

.fourImagesSlide .caption {
    text-align: center;
    font-size: 0.6em;
}

.fourImagesSlide .image img {
    border: 1px solid #fff;
    padding: 0;
    margin: 0;
    width: 90%;
    height: auto; 
}

/*}}}*/

Single Page Application (SPA)

Single Page Application/Database (SPAD)

Single Page Application Development Environment (SPADE)

[[Frosty Figs|http://www.flickr.com/photos/psd/64465147/]] is a photograph taken by [[Paul Downey|http://blog.whatfettle.com]] in [[Berkhamsted|http://en.wikipedia.org/wiki/Berkhamsted]].

|''PageTemplate''|##PageTemplate|
|''StyleSheet''|##StyleSheet|

!PageTemplate
<!--{{{-->
<div id='messageArea'></div>
<div id='presentation'>
    <div id='slide'>
        <div id='tiddlerDisplay'>display</div>
    </div>
</div>
<div id='footer'>
    <div class="controls" refresh='content' tiddler='ControlPanel'></div>
</div>

<!--}}}-->

!StyleSheet
[[StyleSheet]]
/*{{{*/

#messageArea {
    display: none;
}

a#backstageShow {
    color: [[ColorPalette::SecondaryPale]];
}

#presentation .tiddler,
#presentation .viewSlide {
    overflow: scroll;
}

/*}}}*/

/*{{{*/
#messageArea {
	border:none;
	background: transparent;
}

#messageArea .messageBox {
	border:2px solid [[ColorPalette::SecondaryMid]];
	color:[[ColorPalette::Foreground]];
	background:[[ColorPalette::SecondaryLight]]; 
	width:20em;
	padding:10px;
	margin-top:0px;
	margin-bottom:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	filter:alpha(opacity=80);
}

#messageArea .messageText {
	display:block;
	width:15em;
	margin:0;
	padding:0;
}

#messageArea .messageClear {
	display:block;
	float:right;
	width:1em;
}

#messageArea .messageClear a {
	text-decoration:none;
	background-color: transparent;
	color:[[ColorPalette::Foreground]];
}

/*}}}*/

jQuery plugin:

http://jquery.tiddlywiki.org/twFile.html

http://softwareas.com/svg-and-vml-in-one-chameleon-file

http://project.mahemoff.com/vector/ellipse.xhtml

1. Receive SVG from Ajax call
2. ???
3. SVG diagram is displayed
{{{
var svgObject = document.createElement('object');
svgObject.setAttribute('type',
    'image/svg+xml');
svgObject.setAttribute('data',
   'data:image/svg+xml,'+ svgCode);
$("#reportSVGDiv").append(svgObject);
}}}
Unique namespacing http://gist.github.com/362627

e.g. http://tiddlywiki.mahemoff.com/html5.html

1. Build HTML document
2. ???
3. HTML is rendered in iFrame

http://softwareas.com/design-pattern-script-islands

cf Google's performance optimisation
{{{
<script>
/*
  alert("this is my script - it's eval'd on demand");
*/
</script>
}}}

http://tiddlywiki.com/#Examples

http://tiddlywiki.com/#filter:[tag[community]]

The Law of Unintended Consequences

Firefox Extension &rarr; Core code

/***
|''Name:''|ImageMacroPlugin|
|''Description:''| macro to create an image using a tiddler field |
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com) |
|''Source:''|http://whatfettle.com/2008/07/ImageMacroPlugin/ |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/ImageMacroPlugin/ |
|''Version:''|0.1|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.4|
!!Documentation
This macro was created to assist including images in a tiddler view template, where the source 
of an image is defined by a tiddler field:

&lt;&lt;image "http://tiddlywiki.com/fractalveg.jpg"&gt;&gt;

<<image "http://tiddlywiki.com/fractalveg.jpg">>

&lt;&lt;image "@image"&gt;&gt;

<<image @image>>

!!Code
***/
//{{{
/*jslint onevar: false nomen: false plusplus: false */
/*global config */
if (!version.extensions.ImageMacroPlugin) {
    version.extensions.ImageMacroPlugin = {installed: true};

	config.macros.image = {};
	config.macros.image.handler = function(place, macroName, params, wikifier, paramString,tiddler) {
        
        var value = params[0].match(/^@/) ? store.getValue(tiddler, params[0].substring(1))
			: value = params[0];

		var e = createTiddlyElement(place, 'img', null, null);
		e.setAttribute('src', value);
	}
}
//}}}

/***
|''Name:''|ImageZoomMacroPlugin|
|''Description:''| macro to create a zoomable image using a tiddler field |
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com) |
|''Source:''|http://whatfettle.com/2008/07/ImageZoomMacroPlugin/ |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/ImageZoomMacroPlugin/ |
|''Version:''|0.1|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.4|
!!Documentation
This macro was created to assist including images in a tiddler view template, where the source 
of an image is defined by a tiddler field:

&lt;&lt;imagezoom "http://tiddlywiki.com/fractalveg.jpg"&gt;&gt;

<<imagezoom "http://farm1.static.flickr.com/33/65468830_ef7d984ba2_o.jpg">>

&lt;&lt;imagezoom "@image"&gt;&gt;

<<imagezoom @image>>

Clicking on the image creates a display containing the full sized image.
Both the image and the fullframe version may be styled using CSS.

!!Code
***/
//{{{
/*jslint onevar: false nomen: false plusplus: false */
/*global config jQuery store window */
(function ($) {
    version.extensions.ImageZoomMacroPlugin = {installed: true};

	config.macros.imagezoom = {};
	config.macros.imagezoom.color = '#000';
	config.macros.imagezoom.handler = function (place, macroName, params, wikifier, paramString, tiddler) {
        
        var src = params[0].match(/^@/) ? store.getValue(tiddler, params[0].substring(1))
			: params[0];

        if (!src) {
            return;
        }

        $(place).append($("<img>")
            .attr("src", src)
            .css('cursor', 'pointer')
            .click(function () { 
            $('body').append("<div id='fullframe'><img src='" + this.src + "'></div>");
            $('#contentWrapper').hide();

            $('#fullframe img')
                .css('display', 'block')
                .css('margin', 'auto');

            $('#fullframe')
                .click(function () {
                    $(this).remove();
                    $('#contentWrapper').show();
                })

                .css('position', 'absolute')
                .css('z-index', '999')
                .css('top', '0')
                .css('left', '0')
                .css('width', '100%')
                .css('height', Math.max($('#fullframe img').height(), $(window).height()))
                .css('background-color', config.macros.imagezoom.color);
        }));
	};
})(jQuery);
//}}}

http://project.mahemoff.com/josh/

<!--
// Javascript goes here
window.onload = function() {
  // blah blah
}
/*
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
HTML goes here
</html>
<!--
*/
-->