JavaScript is turned off in your web browser. Turn it on to view TW Help

TiddlyWiki help file for beginners is loading
please wait....

Assembled and Built by Morris Gray



Douglas Adams «Hitchhiker's Guide to the Galaxy»
TwHelp -
<!--{{{-->
<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]];}

#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 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 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:0em 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 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

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

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

.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 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 0em;}
.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 0em 0em 0.5em;}
.tab {margin:0em 0em 0em 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 0em 14em;}

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

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

.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:0em 0.25em; padding:0em 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 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px 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 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 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 1em;}
/* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
noscript {display:none;}
}
/*}}}*/
<!--{{{-->
<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'></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>>
!!!<<gradient horiz #fc3 #fff>>&nbsp;[[Any format of a journal you want|JournalTemplate]]^^<<tiddler CloseThisOpen with: "Macros Built-in"  '« back'>>|<<toolbar editTiddler>>» ^^>>
!!!<<gradient horiz #abf #fff>>&nbsp;Goals>>
Dear Journal,

Today is @@color:#C06;''<<today "YYYY.0MM.0DD 0hh:0mm:0ss week 0WW">>''@@ and I am going to dance at the slightest sound of music I hear played.  It might sound funny but that's my goal for today.
!!!<<gradient horiz #abf #fff>>&nbsp;Tasks>>
Completed every task. Am very proud and bored.

!!!<<gradient horiz #abf #fff>>&nbsp;Day's end>>

!!!<<gradient horiz #fc3 #fff>>&nbsp;[[22SafeColors]]^^<<tiddler CloseThisOpen with: UsingColor  '« back'>>|<<toolbar editTiddler>>» ^^>>

{{borderless{
|vertical-align:bottom;<<fullscreen>><<toggleSideBar>>|<<tiddler NavButtons>>|vertical-align:bottom;[[Open in a new window|http://www.webmonkey.com/reference/Color_Charts]]&nbsp;&raquo;|
<html><div align="center"><iframe src ="http://www.webmonkey.com/reference/Color_Charts" width="100%" align="center" height="600"></iframe></div></html>}}}
{{textcenter{
''[[List of tiddlers sorted by Modified Date.|25TiddlersByModifiedDate]]''
(25 only)
}}}
{{tablecenter{
<<forEachTiddler 
 where
 'tiddler.modified'
 sortBy
 'tiddler.modified'
 descending
 write
 '(index < 25) ? "|"+(index+1)+"|[["+tiddler.title+"]] |@@color:#c06;&raquo;  &raquo;@@ |"+tiddler.modified.formatString("YYYY.0MM.0DD"+" @ "+"0hh:0mm:0ss")+"|\n" : ""'
>>
}}}
<<gradient horiz #fc3 #ffffff>>&nbsp;[[2BL 702AM|2BL 702AM]]>>
{{borderless{
| <<tiddler ./player>> | &nbsp;&nbsp;&nbsp; |<<tiddler ./702am>> |
}}}
<part 702am hidden>
{{textleft{
[img[http://img299.imageshack.us/img299/5325/abclogoot5.gif]][img[http://img340.imageshack.us/img340/9374/abcbannerlocalii6.gif]]
@@color:#c06;''&raquo;''@@ [[Go to Web Site|http://abc.net.au/sydney/]]
@@color:#c06;''&bull;''&nbsp; @@ [[Media Player|http://abc.net.au/streaming/702/702stream.asx]]
@@color:#c06;''&bull;''&nbsp; @@ [[RealPlayer|http://www.abc.net.au/streaming/702/702stream.ram]]
}}}
</part>
<part player hidden>
@@color:#c06;''&bull;''@@&nbsp; @@color:#00f;Streaming ABC Radio 702AM@@[img[http://img218.imageshack.us/img218/7518/speakersmqz8.gif]]
<html><embed type="video/x-ms-asf" id="player_FF" name="player_FF" displaysize="4" autosize="0"
  bgcolor="white" showcontrols="true" showtracker="1" showdisplay="1" showstatusbar="1" videoborder3d="0" width="300" height="142" src="http://abc.net.au/streaming/702/702stream.asx" autostart="true" designtimesp="5311" loop="false" volume="100"></embed></html>
</part>
[img[http://img218.imageshack.us/img218/7518/speakersmqz8.gif]][[Listen 2CBA 103.2FM |mms://202.147.105.45/fm1032]] - [[Go to Web Site|http://fm1032.relate.com.au/]]
[img[http://img218.imageshack.us/img218/7518/speakersmqz8.gif]] [[Listen 2CH 1170AM|http://2ch.com/cgi-bin/listenlive.pl]] - [[ Go to Web Site|http://2ch.com.au/welcome.shtml]]
<<gradient horiz #fc3 #ffffff>>&nbsp;[[2PB 630AM|2PB 630AM]]>>
{{borderless{
| <<tiddler ./player>> | &nbsp;&nbsp;&nbsp; |<<tiddler ./630am>> |
}}}
<part 630am hidden>
{{textleft{
[img[http://img143.imageshack.us/img143/3461/newsradiokv8.gif]]
@@color:#c06;''&raquo;''@@ [[Go to Web Site|http://www.abc.net.au/newsradio/]]
@@color:#c06;''&bull;''&nbsp; @@ [[Media Player|http://www.abc.net.au/newsradio/audio/winplayer.htm]]
@@color:#c06;''&bull;''&nbsp; @@ [[RealPlayer|http://www.abc.net.au/newsradio/audio/realplayer.htm]]
}}}
</part>
<part player hidden>
@@color:#c06;''&bull;''@@&nbsp; @@color:#00f;Streaming ABC News Radio 630AM @@[img[http://img218.imageshack.us/img218/7518/speakersmqz8.gif]]
<html><embed type="video/x-ms-asf" id="player_FF" name="player_FF" displaysize="4" autosize="0"
  bgcolor="white" showcontrols="true" showtracker="1" showdisplay="1" showstatusbar="1" videoborder3d="0" width="300" height="142" src="http://www.abc.net.au/streaming/newsradio.asx" autostart="true" designtimesp="5311" loop="false" volume="100"></embed></html>
</part>
<<gradient horiz #fc3 #ffffff>>&nbsp;[[2RN-576AM|2RN-576AM]]>>
{{borderless{
|<<gradient horiz #abf #ffffff>> <<tiddler ./player>>>> |&nbsp;&nbsp;&nbsp;|<<gradient horiz #abf #ffffff>><<tiddler ./576am>>>> |
}}}
<part 576am hidden>

{{textleftpad5{
[img[http://img176.imageshack.us/img176/882/abcsb3.gif]][img[http://img72.imageshack.us/img72/7418/rnhn0.gif]]

@@color:#c06;''&raquo;''@@ [[Go to Web Site|http://www.abc.net.au/rn/]]
@@color:#c06;''&bull;''&nbsp; @@ [[Media Player|http://www.abc.net.au/rn/listen/wmp.htm]]
@@color:#c06;''&bull;''&nbsp; @@ [[RealPlayer|http://www.abc.net.au/rn/listen/real.htm]]
}}}
</part>
<part player hidden>
{{textleftpad5{
@@color:#c06;''&bull;''@@&nbsp; @@color:#00f;Streaming ABC Radio National 576AM@@&nbsp;~~[img[http://img218.imageshack.us/img218/7518/speakersmqz8.gif]]~~
<html><embed type="video/x-ms-asf" id="player_FF" name="player_FF" displaysize="4" autosize="0"
  bgcolor="white" showcontrols="true" showtracker="1" showdisplay="1" showstatusbar="1" videoborder3d="0" width="300" height="142" src="http://www.abc.net.au/streaming/RN.asx" autostart="true" designtimesp="5311" loop="false" volume="100"></embed></html>
}}}
</part>
{{tablecenter{
<<forEachTiddler 
where
'tiddler.title.toLowerCase().startsWith("a")'
sortBy '(tiddler.title.toLowerCase())' 
 ascending
write
 '"|bgcolor:#fdf; "+(index+1)+"|[["+tiddler.title+"]]| "+tiddler.text.length+"|"+tiddler.tags+"|bgcolor:#fdf;"+tiddler.modified.formatString("YYYY.0MM.0DD")+"|\n"'
 begin '"| sort &raquo;| Title | Size | Tags |Modified|h\n"'
>>
!!!Color Wheel
http://www.ficml.org/jemimap/style/color/wheel.html
!!!Color Names
http://coloria.net/bonus/colornames.htm
!!!CSS Tools awesome
[[CSS Tools|http://www.realsoftwaredevelopment.com/2006/10/the_complete_li.html]]
<<gradient horiz #fc3 #ffffff>>&nbsp;[[ABC 92.9FM|ABC 92.9FM]]>>
{{borderless{
| <<tiddler ./player>> | &nbsp;&nbsp;&nbsp; |<<tiddler ./92.9FM>> |
}}}
<part 92.9FM hidden>
{{textleft{
[img[www.abc.net.au_FM.jpg]]
@@color:#c06;''&raquo;''@@ [[Go to Web Site|http://www.abc.net.au/classic/]]
@@color:#c06;''&bull;''&nbsp; @@ [[Media Player|http://www.abc.net.au/classic/audio/streaming_wmp.htm]]
@@color:#c06;''&bull;''&nbsp; @@ [[RealPlayer|http://www.abc.net.au/streaming/classic/classicfm.ram]]
}}}
</part>
<part player hidden>
@@color:#c06;''&bull;''@@&nbsp; @@color:#00f;Streaming ABC Classic FM 92.9FM@@[img[http://img218.imageshack.us/img218/7518/speakersmqz8.gif]]
<html><embed type="video/x-ms-asf" id="player_FF" name="player_FF" displaysize="4" autosize="0"
  bgcolor="white" showcontrols="true" showtracker="1" showdisplay="1" showstatusbar="1" videoborder3d="0" width="300" height="142" src="http://www.abc.net.au/streaming/classic/classicfm.asx" autostart="true" designtimesp="5311" loop="false" volume="100"></embed></html>
</part>
!!!<<gradient horiz #fc3 #fff>>&nbsp;ABetterIntro^^<<tiddler CloseThisOpen with: NestedStyles  '« back'>>|<<toolbar editTiddler>>» ^^>>
These tabs represent the nested stylesheets that are located at the bottom of ~StyleSheet.  The tabs were created using a script that makes a set of tabs based on a tag. In this case the tag is "nestedstyle".

Reference:
NestedStyleSheets
[[Create tabs with a script|tabs]]
{{textcenter{
AS TIME GOES BY
Words and Music by Herman Hupfeld
}}}
| !Verse<br><script label="(memorize)">return Mem.start(place)</script> | !Words<br><script label="(memorize)">return Mem.start(place)</script> |
|You must remember this |a kiss is still a kiss, A sigh is just a sigh, the fundamental things apply, As time goes by.....|
|An' when two lovers woo |they still say "I love you," On that you can rely, no matter what the future brings, As time goes by......|
|Moonlight an' love songs |never out of date, Hearts full of passion, jealousy an' hate, Woman needs man and man must have his mate, That no one can deny.....|
|It's still the same old story |a fight for love an' glory, A case of do or die, the world will always welcome lovers, As time goes by.....|
!!!<<gradient horiz #fc3 #fff>>&nbsp;ASCII-HTMLTable^^<<tiddler CloseThisOpen with: Entities-Codes  '« back'>>|<<toolbar editTiddler>>» ^^>>
*<<toggleSideBar>>
*[[ Open in a new window|http://img406.imageshack.us/img406/7268/webpt9.gif]]&nbsp;&raquo;<html>
{{textjustify{
@@color:#090;
To get special characters to show on an HTML web page, special codes can be used (ascii code or word) and are interpretted by the web browser.@@

}}}<div align="center"><iframe src ="http://img406.imageshack.us/img406/7268/webpt9.gif" width="100%" align="center" height="600"></iframe></div></html>


<script src="ASCIIMathML.js"></script>
!!!!!ASCIITable ^^&bull;[[Detach this|ASCIITable]]^^
*<<toggleSideBar>>
*&nbsp;[[Open in a new window|http://img244.imageshack.us/img244/1193/asciifullyq6.gif]]&nbsp;&raquo;<html>
{{textleft{

+++[ASCII stands for American Standard Code for Information Interchange. Click for more] @@color:#090;Computers can only understand numbers, so an ASCII code is the numerical representation of a character such as 'a' or '@' or an action of some sort. ASCII was developed a long time ago and now the non-printing characters are rarely used for their original purpose. 

Below is the ASCII character table and this includes descriptions of the first 32 non-printing characters. ASCII was actually designed for use with teletypes and so the descriptions are somewhat obscure. 

If someone says they want your CV however in ASCII format, all this means is they want 'plain' text with no formatting such as tabs, bold or underscoring - the raw format that any computer can understand. This is usually so they can easily import the file into their own applications without issues. Notepad.exe creates ASCII text, or in MS Word you can save a file as 'text only'@@
===
}}}<div align="center"><iframe src ="http://img244.imageshack.us/img244/1193/asciifullyq6.gif" width="100%" align="center" height="600"></iframe></div></html>








!!!<<gradient horiz #fc3 #ffffff>>&nbsp;[[DefaultTiddlers|AboutDefaultTiddlers]]^^<<tiddler CloseThisOpen with: FormattingTiddlers  '« back'>>|<<toolbar editTiddler>>» ^^>>
''DefaultTiddlers'' is simply a tiddler that contains the names of the tiddlers that you wish ~TiddlyWiki to load on startup; such as ''Start Here'' or ''Welcome''.  

Tiddlers listed there that contain spaces in their title should be enclosed in square brackets
 {{{[[Start Here]]}}}; in fact I enclose all tiddlers there in square brackets.

From version 2.3 you can use:
{{{<<list filter [tag[css]]>>}}} tag css* (any tag)*
{{{<<list filter "[tag[css]] [tag[list]]">>}}} tag css and tag list
{{{<<list filter "[tag[css]] [!tag[list]]">>}}} tag css and not tag list
!!!End
!Welcome to your ''tiddlyspot.com'' ~TiddlyWiki!
''[[tiddlyspot.com|http://tiddlyspot.com]]'' gives you an instant [[TiddlyWiki|http://tiddlywiki.com]] hosted on our ''tiddlyspot.com'' servers.

Want to work online?  No problem, you can go to your ''tiddlyspot.com'' URL (which is http://tiddlyspot.com/twhelp/ ) and start editing.  Click "save to web" and your changes are saved directly to your ''tiddlyspot.com'' home -- no messing about with local files or ftp.

Want to work offline?  No problem, your ''tiddlyspot.com'' ~TiddlyWiki is a real, fully functioning ~TiddlyWiki that you can save onto your hard drive or USB stick.  Use the link below to save to your local computer.  As you make changes, use the "save to disk" button to save to your local file.  Whenever you're ready to sync up again, just click "save to web".

!To save online
Enter the upload password provided when you created your ~TiddlyWiki.  Then click the "save to web" button below (or in the right side column) to save your ~TiddlyWiki.
Upload Password: <<option pasUploadPassword>>
<<upload http://tiddlyspot.com/science/store.cgi index.html . .  twhelp>>

!To save offline
To take this ~TiddlyWiki offline, click [[Download|http://tiddlyspot.com/?action=download&site=twhelp]]. Save the file locally then open it in your browser.


!Learn more about ~TiddlyWiki
Find out more about ~TiddlyWiki at [[TiddlyWiki.com|http://tiddlywiki.com]].  Also visit [[TiddlyWiki Guides|http://tiddlywikiguides.org]] for documentation on learning and using ~TiddlyWiki.

The [[TiddlyWiki mailing list|http://groups.google.com/group/TiddlyWiki]] is an excellent place to ask questions and get help.

!Enjoy!
We hope you like using your ''tiddlyspot.com'' ~TiddlyWiki.  Please email [[feedback@tiddlyspot.com|mailto:feedback@tiddlyspot.com]] with any comments.

----
!!!<<gradient horiz http://www.symbex.net.au/Wiki/LastUpdate.htmfc3 http://www.symbex.net.au/Wiki/LastUpdate.htmfff>>&nbsp;AccessingIframes^^<<tiddler CloseThisOpen with: Iframes  '« back'>>|<<toolbar editTiddler>>» ^^>>

<html><iframe src="http://www.symbex.net.au/Wiki/LastUpdate.htm" id="updatewindow" name="updatewindow" style="border: 1px solid rgb(0, 0, 0); width: 50%; height: 50px; margin-left: 10%;"></iframe>

<ul class="smaller">
<li class=""><a href="http://www.symbex.net.au/Wiki/LastUpdate.htm" onclick="theiframe2.src = changeIt(); return false">document.getElementById('updatewindow').src</a></li>
<li class="odd"><a href="http://www.symbex.net.au/Wiki/LastUpdate.htm" onclick="theiframe2.location.href = changeIt(); return false">document.getElementById('updatewindow').location.href</a></li>
<li class=""><a href="http://www.symbex.net.au/Wiki/LastUpdate.htm" onclick="frames['updatewindow'].src = changeIt(); return false">frames['updatewindow'].src</a></li>
<li class="odd"><a href="http://www.symbex.net.au/Wiki/LastUpdate.htm" onclick="frames['updatewindow'].location.href = changeIt(); return false">frames['updatewindow'].location.href</a></li>
<li class=""><a href="http://www.symbex.net.au/Wiki/LastUpdate.htm" onclick="frames[1].location.href = changeIt(); return false">frames[1].location.href</a></li>
<li class="odd"><a href="http://www.symbex.net.au/Wiki/LastUpdate.htm" onclick="frames[1].window.location.href = changeIt(); return false">frames[1].window.location.href</a></li>
<li class=""><a href="http://www.symbex.net.au/Wiki/LastUpdate.htm" onclick="frames['updatewindow'].window.location.href = changeIt(); return false">frames['updatewindow'].window.location.href</a></li>
<li class="odd"><a href="iframe_page2.html" target="updatewindow">target="updatewindow"</a> (loads only page2, not page1)</li>
</ul></html>
!!!<<gradient horiz #fc3 #ffffff>>&nbsp;Sites mentioning or linked to TW Help>>
{{textcenter{
http://www.wholinks2me.com/}}}
----
A case of copying ~Science-Matters for another purpose @@color:#C06;''&raquo; &raquo;''@@ http://projectneutral.tiddlyspot.com/ Mexico
----
+++[Мать честная... тут:]
<<<
Мать честная... тут: http://tiddlyspot.com/twhelp/ туева хуча плагов и макросов! Тока я ни фига пока не понимаю, как это всё работает...
 
Добавлено:
А с макросами-то - как работать???
 
Добавлено:
Мдааа... походила по этому сайту - мама моя родная же ж! Такие возможности, а я НИЧЕГО не понимаю! Ну почему! ПОЧЕМУ??? я не учила английский в школе!!! Дура...
----
Translation:
Mother is honest... here: http://tiddlyspot.com/twhelp/ is white-cedar khucha of plagov and macros! Current 4 not figs I thus far understand, as this all works... It is added: But macro- that - as to work??? It is added: However, Mdaaa... resembled on this site - mom my native zh! Such possibilities, but 4 nothing I understand! Well why! WHY??? 4 she did not teach English in the school!!! Fool...
<<<
===
----
+++[Taiwanese copies]
<<<
[img[http://img74.imageshack.us/img74/1894/taiwanflagtkj1.png]]&nbsp;&nbsp;@@color:#C06;''&raquo; &raquo;'' @@ Taiwanese copies
http://54nc.com/jane/twhelp.html
http://54nc.com/olivia/twhelp.html
<<<
===
----
<<<
http://scottlabnotebook.tiddlyspot.com/ @@color:#C06;''&raquo; &raquo;'' @@ Excellent examples of working ~TiddlyWikis
http://ashmousestocks.tiddlyspot.com/  @@color:#C06;''&raquo; &raquo;'' @@ Keep trak of your meeces :-)
http://scottlabnotebook.tiddlyspot.com/#TableTemplates @@color:#C06;''&raquo; &raquo;'' @@ TableTemplates
<<<
http://132.229.51.112/~zandee/news/archives/2008/04/10/tiddlywiki_als_onderwijsplatform.html (Science Matters: Een prachtig voorbeeld van een vrij complexe webstek gemaakt met ~TiddlyWiki.@@color:#C06; {Science Matters: A splendid example of a rather complex web site made with ~TiddlyWiki.}@@)
http://huili.online.googlepages.com/index.html#Welcome
http://wiki.livedoor.jp/mobilememobiz/d/GTD-GtdStyleWiki  @@color:#C06;''&raquo; &raquo;'' Japanese@@
http://tinyurl.com/ytb5er @@color:#C06;''&raquo; &raquo;'' @@ Chinese copied most of TW Help
http://leftclickblog.blogspot.com/2008/02/tiddlywiki-for-left-journoes-and.html @@color:#C06;''&raquo; &raquo;'' @@ Science Matters highlighted
http://www.answers.com/topic/tiddlywiki @@color:#C06;''&raquo; &raquo;''  answers.com @@
http://swik.net/tiddlywiki/TiddlyWiki%20Changes%20RSS/GettingStarted/cyx2
http://www.xingangfang.net/
http://groups.diigo.com/groups/Tiddlers
http://jermolene.wordpress.com/category/tiddlywiki/
http://anthologyoi.com/computers/software/tiddlywiki-is-both-good-and-bad.html
http://ieditor.tiddlyspot.com/ @@color:#C06;''&raquo; &raquo;''  TiddlyWiki在线帮助@@
http://wikis.healthwealthandmusic.co.uk/worldwideweb.html
http://www.toolblog.de/index.php?paged=3 @@color:#c06;(Deutsche)@@
http://www.missmopi.net/IMG/html/twpourtous-V1-0.html @@color:#C06;''&raquo; &raquo;'' en français@@
http://www.oraltradition.org/otclass/
http://www.ruiz-tapiador.com/ @@color:#C06;''&raquo; &raquo;''  en español @@
http://earpriority.tiddlyspot.com/ @@color:#C06;''&raquo; &raquo;''  Good start to a nice site@@
http://www.marvincable.com/lWiki/index.php?
http://wiki.famvisser.net/
http://bbz-dormagen.de/wennmann/TWGeschaeftskorrespondenz/TWGeschaeftskorrespondenz.html @@color:#c06;(Deutsche)@@
http://www.youthwork.co.uk/magazine/resourcebox/webs0708.html
http://www.appxweb.com/applications/tiddlers/tiddlers.html @@color:#c06;Interesting application site@@
http://www.comp.nus.edu.sg/~chengwe2/index2.html @@color:#c06;I suggest a comprehensive help site here TW Help@@
http://almostporn.net/ @@color:#c06;It is... almost@@
http://keith.tiddlyspot.com/ @@color:#c06;copied origami, radio, iframes@@
http://thetwilightkid.tiddlyspot.com/index.html @@color:#c06;Very heavily loaded with flash@@
http://www.healthwealthandmusic.co.uk/wikis/princewiki/worldwideweb.html @@color:#c06;twhelp - extremely comprehensive - everything you need to know@@
http://alexa.chinaz.com/Cache/2007/5/14/tiddlyspot.com@Alexa_More.asp @@color:#c06;(Chinese)@@
http://bbz-dormagen.de/wennmann/twexe/twexe.html @@color:#c06;(Deutsche Handbuch engl. = Manual ) (copied stylesheet)@@
http://conversadigital.blogspot.com/feeds/posts/default @@color:#c06;(Portuguese)@@
http://csandro.tiddlyspot.com/index.html @@color:#c06;(Italian)@@
http://dariomor.com/ @@color:#c06;(Portuguese)@@
http://de.wikipedia.org/wiki/TiddlyWiki @@color:#c06;(German - Deutsche)@@
http://earpriority.tiddlyspot.com/
http://en.wikipedia.org/wiki/Tiddlywiki
http://euicho.com/index.php?p=123 @@color:#c06;(Good description about ~TiddlyWiki)@@
[[http://faq.tiddlyspot.com/|http://tinyurl.com/2gd4st]]
http://groups.google.com/group/TiddlyWiki/msg/dc97dd924cf902fb?dmode=print
http://luceatlux.net/wikimath/wikimathhelp.html#Welcome
http://ma.gnolia.com/people/seanabrady/tags/wiki?page=3
http://technology-escapades.net/PDA.htm
http://technology-escapades.net/qualitative.htm
http://tiddlyspot.com/?page=gallery
http://tiddlywikiguides.org/index.php?title=TiddlyWiki_Guides
http://tidhelp.tiddlyspot.com/
http://tvphoto.eml.cc/ @@color:#c06;(Beautiful photography site) @@
http://www.amospalla.es/wiki/wiki.html @@color:#c06;(Spanish)@@
http://www.blinklist.com/tag/tiddlywiki/
http://www.climate-change-summer.net/
http://www.euicho.com/wiki/
http://www.fdresa.org/ettc/tiddlywiki/
http://www.giffmex.org/twfortherestofus.html
http://www.johngelling.co.uk/rgu/
http://www.kultofbubb.net/tiddlywiki/
http://www.missmopi.net/IMG/html/twpourtous-V1-0.html @@color:#c06;(French)@@
http://www.nullfeld.de/
http://www.redhotchilli.com/australian-radio-stations-online.htm
http://www.the-bizness.co.uk/wikis/princewiki/miscellany.html#TiddlyWikiHelp
http://www.tiddlywiki.com/
http://www.wikicreole.org/wiki/ListOfWikiMarkup @@color:#c06;(Text Formatting Rules across all wikis)@@

!!!Netherlands about Science Matters
Wow! Een zeer mooie TW, en ook nog informatief!
(Wow! Very beautiful TW, and also still informative!)
!!!Google Groups
Josef   	

Thanks for the training!  BTW, your TwHelp site is awesome.  The
WhatsInATiddler should be required reading. 
----

BJ
I think any site that displays quotes by Douglas Adams should
automatically be required viewing, but that's just my opinion... 

!!!Haloscan
#+++[The most treasured comment yet!]
Your TW Help is absolutely marvelous. I have been a professional programmer for more than 30 years and I feel that you have created a "master Piece!"

Suggestion: Pseudo classes - CSS it would benefit me and I suspect others if you included examples of the usage of these items. Both the code and the effect it has on the page.

Again, my complements on the results of what has to have been many weeks of effort for this most useful demonstation of TW.

Regards,
IanO
===

#+++[Alexandra]
Wow that is an awesome site, so much good information and especially the color wheel is great!

Alexandra
===

!!!codecraft.proboards59.com
+++[Here's a little better tutorial: Jerry Muelver]
<<<
From:http://codecraft.proboards59.com/index.cgi?board=osp&action=display&thread=1167142626

Re: TiddlyWiki

Here's a little better tutorial:
http://tiddlyspot.com/twhelp/

Use the menu items in the left column for navigation. Remember that most TiddlyWikis open new tiddlers (pages) by appending them to the top or bottom of the displayed tiddlers, so you may have to scroll down after selecting a menu item. You can use the scroll-over-pop-up toolbar (new the top right of each tiddler) to close all the other open tiddlers if you wish. Also note the use of tabs -- horizontal menu items -- across the top of tiddles like the "Formatting Tiddlers" entry.

Click on the "MyGroup" menu item (left column) to get a nifty set of core topic tiddlers, each with a set of tabs, for a quick-reference guide.

Who'd have thunk you could do this kind of stuff in realtime in a browser with simple markup?

Jerry Muelver
Administrator
----
Re: TiddlyWiki

lol yeah, that's the part that got me clicking there in the first place...makes one wonder what the heck php, pearl, cgi and all that other stuff is fer! lol.

you're right, that tutorial is like THE tutorial to read first man...straighforward, to the point, just how I like em. ;-).

mystikshadows
Developer
<<<
===

!!!del.icio.us
http://bluedot.us/users/Information-Ecologist/dot/76880678000
jeremyruston's bookmarks on del.icio.us

~TwHelp - ~TiddlyWiki help file for beginners
Extensive ~TiddlyWiki documentation project, nicely built with good use of tabs and diagrams
to tiddlywiki help ... on dec 27

!!!Google Groups
Morris, this "experiment" is really, really, really nice! I'm pointing
all tiddlywiki inquiries on my several forums to your help page.

Did I mention that it is a really nice job?

---- Jerry Muelver 

!!!http://tiddlywiki.com/
GettingStarted
The easiest way to learn about TiddlyWiki is to use it! Try clicking on various links and see what happens - you cannot damage tiddlywiki.com or your browser. One tip is to use the close all button over on the right to clear all the displayed tiddlers and start again. Dave Gifford has prepared a new beginners guide: "~TiddlyWiki for the Rest of Us". There's also MorrisGray's excellent TW Help - ~TiddlyWiki help file for beginners.

!!!http://www.fdresa.org/ettc/tiddlywiki/
If you're still trying to get your head around what TiddlyWiki is all about:

    * Dave Gifford has prepared a new beginners guide: "TiddlyWiki for the Rest of Us".
    * There's also Morris Gray's excellent TW Help - TiddlyWiki help file for beginners.
    * If you're totally confused, you might find Leon Kilat's video tutorial useful.

!!!http://es.blinklist.com/tag/tutorial/
Descubre lo mejor tutorial y tutorial manual sitios en BlinkList
TwHelp - TiddlyWiki help file for beginners. http://tiddlyspot.com/twhelp/.
(votos:0) Marcar como spam. guardado en tiddlywiki, tutorial por rdeheras ...
es.blinklist.com

!!!Google Groups
Nice page, by the way. I hadn't checked it out before because I am now
fairly comfortable with TW, but there's tons of stuff in there I
didn't know (or things I once learned how to do, but promptly forgot).

Hope this is of some help

Andrew 
http://groups.google.com/group/TiddlyWiki/browse_thread/thread/5c4ea575bed1f504/#
----
Re the ethical considerations of linking to a site that you weren't
explicitly invited to link to, on the one hand you wouldn't think twice
about linking to any regular web page. But with a TW because it's commonly
used to for private or personal details the likelyhood of non-tech savvy
users unintentionally putting their private journal or their bank account
details online is higher. So it's kind of a <div macro="gradient #555 #888
#222"> I mean grey ish area. (I have pondered this in relation to making a
site directory on tiddlyspot).

So I hesitate before sharing this, a very beautiful TW:
http://science.tiddlyspot.com/

I believe it's one or Morris Gray's (he's a list member and author of
http://twhelp.tiddlyspot.com so I hope he doesn't mind me posting it), if so
Morris I apologise.
----
Wow, what a stunning site! Way to go, Morris! I(I will have to e-mail
him tomorrow to beg him to include it.)

Dave Gifford 

!!!RPG Forum
PostPosted: Mon Apr 16, 2007 1:13 pm    Post subject:  	Reply with quote
different wikis have different formatting rules. What may work for TiddlyWiki may not work for Matt's Age of Worms wiki.

that said, here's the site I use to figure out tiddlywiki formatting:

http://tiddlyspot.com/twhelp/
_________________
<html><div style=text-align:center><img src="http://img262.imageshack.us/img262/9619/deliciousxd7.png" border="0"> <a class="previewlink" href="http://del.icio.us/post?url=http%3A%2F%2Ftwhelp.tiddlyspot.com&amp;title=TiddlyWiki%20help%20file%20for%20beginners" target="_blank">Bookmark TW Help at del.icio.us here.</a></div></html>
----
[[Detach Advanced Options|AdvancedOptions]]
<<slider chkSliderOptionsPanel OptionsPanel +options 'Change TiddlyWiki advanced options'>>
----
<<option chkGenerateAnRssFeed>> GenerateAnRssFeed
<<option chkRegExpSearch>> RegExpSearch
<<option chkCaseSensitiveSearch>> CaseSensitiveSearch
<<option chkHttpReadOnly>> Hide Editing Features 
<<option chkSearchTitles>> Search tiddler titles
<<option chkSearchText>> Search tiddler text
<<option chkSearchTags>> Search in tiddler tags
<<option chkSearchTitlesFirst>> Show title matches first
<<option chkSearchList>> Show list of matching tiddlers
<<option chkHoldSearches>> Hold search results
<<option chkOpenInNewWindow>> OpenLinksInNewWindow
<<option chkSaveEmptyTemplate>> SaveEmptyTemplate
<<option chkSinglePageMode>> Display one tiddler at a time
<<option chkToggleLinks>> Click open links to close
^^(override with Control or other modifier key)^^
Maximum number of lines in a tiddler edit box: <<option txtMaxEditRows>>
Folder name for backup files: <<option txtBackupFolder>>
Your username for signing your edits. Write it as a WikiWord (eg JoeBloggs)
<<option txtUserName>>
|>|>|>|+++[Go to tiddler »]<<gotoTiddler>>===|
|>|>|>|<<search>> |
|>|>|{{unboldlink{[[look for in|NewPathFinder]]}}} |>|>|
| <<option chkSearchTitles>> | <<option chkSearchText>> | <<option chkSearchTags>> | <<option chkHoldSearches>> |
| titles |  text  | tags | hold |
|borderlessL0|k
----
+++[Display Options]
<<option chkDisableTabsBar>> Disable the tabs bar
<<option chkSinglePageMode>> Display one tiddler at a time
<<option chkTopOfPageMode>> Open tiddlers at the top
===
----
<<permaview>>
<<tiddler MakeTiddlers>>
@@{{locLink{<<tiddler ShowUnsavedChanges>>}}}@@
<<saveChanges>>+++[QuickView »]<<tiddler RefreshStyles>>
|>|>|>|<<popup [[quick edit]] [[<<forEachTiddler where 'tiddler.tags.containsAny(["quickedit"])'$))]]>> |
|>|>|>|<<popup [[hidden tiddlers]] [[<<forEachTiddler where 'tiddler.tags.containsAny(["excludeLists","excludeSearch"])'$))]]>> |
|>|>|>|<<popup [[systemConfig tiddlers]] [[<<forEachTiddler where 'tiddler.tags.containsAny(["systemConfig"])'$))]]>> |
===
+++[TspotControls »]
Upload Password: <<option pasUploadPassword>>
<<upload http://tiddlyspot.com/twhelp/store.cgi index.html . .  twhelp>>
<html><a href="http://tiddlyspot.com/?action=download&site=twhelp" target="_blank">download from server</a></html>
[[control panel|http://tiddlyspot.com/twhelp/controlpanel.cgi?]]
[[Tspot FAQ|http://faq.tiddlyspot.com/]]
[[Comment Control|http://www.haloscan.com/members/posts.php]]
[[StatCounter|http://my2.statcounter.com/project/]]
===

<<slider chkSliderOptionsPanel OptionsPanel 'options »' 'Change TiddlyWiki advanced options'>>
<<slider chkAdvancedOptions AdvancedOptions 'AdvancedOptions »' 'AdvancedOptions'>>
+++[Box - CSS]
<<tiddler [[Box - CSS]]>>
===
+++[Box Properties]
<<tiddler [[Box Properties - CSS]]>>
===
----
<<tiddler  [[A Few Helpful Links - CSS]]>>
<<tiddler  [[Box - CSS]]>>
<<tiddler  [[Box Properties - CSS]]>>
<<tiddler  [[Classification Properties - CSS]]>>
<<tiddler  [[Color and Background Properties - CSS]]>>
<<tiddler  [[Cursor Property - CSS]]>>
<<tiddler  [[Font Properties - CSS]]>>
<<tiddler  [[List-style-type Property - CSS]]>>
<<tiddler  [[Margin Properties - CSS]]>>
<<tiddler  [[Positioning Properties - CSS]]>>
<<tiddler  [[Printing Properties - CSS]]>>
<<tiddler  [[Pseudo Classes - CSS]]>>
<<tiddler  [[Selectors - CSS]]>>
<<tiddler  [[Text Properties - CSS]]>>
<<tiddler  [[Units - CSS]]>>
<<forEachTiddler
    where
       'tiddler.tags.contains("script")'
    sortBy
       'tiddler.title.toUpperCase()'
    write '" [["+tiddler.title+" ]] \"view ["+tiddler.title+"]\" [["+tiddler.title+"]] "'
        begin '"<<tabs txtMyAutoTab "'
        end '">"+">"'
        none '"//No tiddler tagged with \"script\"//"'
>>
{{textcenter scrollauto{
<<tabs "" [[Intro ]] "A" [[AlphaIntro]] [[A ]] "A" [[A]] [[B ]] "B" [[B]] [[C ]] "C" [[C]] [[D ]] "D" [[D]] [[E ]] "E" [[E]] [[F ]] "F" [[F]] [[G ]] "G" [[G]] [[H ]] "H" [[H]] [[I ]] "I" [[I]] [[J ]] "J" [[J]] [[K ]] "K" [[K]] [[L ]] "L" [[L]] [[M ]] "M" [[M]] [[N ]] "N" [[N]] [[O ]] "O" [[O]]  [[P ]] "P" [[P]] [[Q ]] "Q" [[Q]] [[R ]] "R" [[R]] [[S ]] "S" [[S]] [[T ]] "T" [[T]] [[U ]] "U" [[U]]  [[V ]] "V" [[V]] [[W ]] "W" [[W]] [[X ]] "X" [[X]] [[Y ]] "Y" [[Y]] [[Z ]] "Z" [[Z]] >>
}}}
{{textleft{
|<<tiddler ./alphaintro>>|<<tiddler ./alphacode>>|

<part alphaintro hidden>
!!!<<gradient horiz #abf #fff>>&nbsp;[[Find Tiddlers By Alpha|AlphaIntro]]>>
This code finds tiddlers by their first letter. Click on a tab.
	
@@position:relative;+++^50em^[Code by Saq Imtiaz]
<<<
Saq Imtiaz of
~TiddlyThemes.com ( http://tiddlythemes.com ) : a gallery of ~TiddlyWiki themes.
~TiddlySnip ( http://tiddlysnip.com ) : a firefox extension that turns ~TiddlyWiki into a scrapbook!
~LewcidTW ( http://tw.lewcid.org ) : a repository of extensions for ~TiddlyWiki
<<<
===@@
</part>

<part alphacode hidden>
{{{
{{tablecenter{
<<forEachTiddler 
where
'tiddler.title.toLowerCase().startsWith("a")'
sortBy '(tiddler.title.toLowerCase())' 
 ascending
 write
 '"|"+(index+1)+"|[["+tiddler.title+"]] |@@color:#c06;&raquo;  &raquo;@@ |"+tiddler.tags+"|\n"'>>
}}}
</part>
}}}
!!!<<gradient horiz #fc3 #fff>>&nbsp;AlphaTabs^^<<tiddler CloseThisOpen with: HowToUseLinks  '« back'>>|<<toolbar editTiddler>>» ^^>>
<<tiddler Alpha>>

Put this in ~StyleSheet
{{{
.alt { background-color:#abf;}
}}}

<script>
// Declare and populate array with content
var arrContent = new Array;
arrContent[0] = "First row";
arrContent[1] = "Second row";
arrContent[2] = "Third row";
arrContent[3] = "Fourth row";
arrContent[4] = "Fifth row";
// Declare variable and start saving table code
var strOutput = "<table>";
for(var i=0;i<arrContent.length;i++)
{  if(i%2==0)   
       // If remainder is even, output tr with class="alt"
       {  strOutput += "<tr class='alt'><td>" + arrContent[i] + "</td>";   
  }
      else  // Else, output tr with no class
      {  strOutput += "<tr><td>" + arrContent[i] + "</td>";
       }
}
// Close table
strOutput += "</table>";     
// Write out table code to HTML page 
document.write(strOutput); </script>
!!!<<gradient horiz #fc3 #fff>>&nbsp;AlternateViews^^<<tiddler CloseThisOpen with: FormattingThePage  '« back'>>|<<toolbar editTiddler>>» ^^>>

There is an excellent plugin called TaggedTemplateTweak from [[TiddlyTools|http://www.TiddlyTools.com/#TaggedTemplateTweak]] that allows you to use a different ViewTemplate or EditTemplate to view a tiddler depending on how it is tagged.
<<<
Briefly; to use this plugin, you create a new ~ViewTemplate or ~EditTemplate to represent the display for a tiddler (or set of tiddlers) that require a special presentation. These special templates have a prefix (the same name as the tag) attached to them e.g. @@color:#C06;tagnameViewTemplate@@
<<<
<<<
For example in TW Help most of the tiddlers have a bookmark icon for a quick link or bookmark.  Obviously the results of a ~TiddlyWiki search should not be bookmarked.@@color:#C06;^^[1}^^@@ So a new template was created to apply only to those tiddlers that should not display a bookmark icon.  
<<<
<<<
Those tiddlers that should not have a bookmark icon have a tag of @@color:#C06;killbookmark@@; therefore, the template to display those tiddlers is named @@color:#C06;killbookmarkViewTemplate@@ that does not contain the code to display the bookmark icon.
<<<
@@color:#C06;^^[1}^^@@''Just for fun, or possibly a warning'', TW Help has a ''systemConfigViewTemplate'' that colors the background of all plugins gradient gold try it here: Click here to see all the tags marked<<tag systemConfig>>.
|bgcolor:#fcf;Note that the bookmark icon is gone as well.  This is to prevent people bookmarking a plugin at TW Help that should properly be obtained from the sites of the authors of those plugins.|

You can obtain the plugin and complete instructions on how to use it here:
http://www.TiddlyTools.com/#TaggedTemplateTweak


!!!<<gradient horiz #abf #fff>>&nbsp;End
''One can obtain a full sized version and the program to make your own [[here|http://www.pocketmod.com/]]''

[img[http://img160.imageshack.us/img160/7850/shopweeklyfoldaf9.jpg]]
!!!<<gradient horiz #abf #fff>>&nbsp;[[Another type of slider]]^^<<tiddler CloseThisOpen with: SlidersOther  '« back'>>|<<toolbar editTiddler>>» ^^>>
''There is a very good slider plugin it's called the'' NestedSlidersPlugin that allows you to create many versatile sliders. You will see it used a lot in ~TWHelp.  

''This slider does not use tiddlers for the content.''  All the necessary information is located in the tiddler that contains the slider. They can be nested and you can create as many as you need in the same tiddler. 


NestedSlidersPlugin also has lots of other powerful features, including the ability to
display alternative 'slider labels' when the slider is opened vs. closed, like this:
{{{
+++[+Header][- Header]
   content goes here
===
}}}
The first label, "+Header", is shown when the slider is closed.  The
second label, "- Header", is shown when the slider is open. 

They can be already open on load or closed as normal.
!!!!!<<gradient horiz #aaa #fff>>&nbsp;Example 1>>
*+++[This Slider was closed on Loading (click to open)]
<<<
Its now been opened+++[click here to see the code.]
{{{
+++[This slider was Closed on loading]
You will see it used a lot in TWHelp.  
===
}}}
===
<<<
===

!!!!!<<gradient horiz #aaa #fff>>&nbsp;Example 2>>
*++++[This Slider was Opened on Loading (click to close)]
<<<
This slider is open+++[click here to see the code.]
{{{
++++[This slider was Opened on loading]
To have this slider default to being opened upon 
loading use 4 plus signs instead of three.
===
}}}
===
<<<
===

!!!!!<<gradient horiz #aaa #fff>>&nbsp;Example 3>>
@@position:relative;+++^45em^[A floating slider]
To have a slider float instead displacing the following text
use a caret (^) with the plus signs like this
{{{
+++^[slider label]
slider content
===
}}}

===  @@ 
!!!!Summary:
*~NestedSliderPlugin syntax allows you to wrap the "label" portion of
the definition in a """{{class wrapper{...}}}""", like this:
{{{
+++*{{someclass{[relevantInfo]}}}<<tiddler SideBarTabs>>=== 
}}}
+++[more about class wrapper...]

From: http://tinyurl.com/3dc9dr

> Using TiddlyPedia as my style.  The MainMenu and SideBarOptions are
> boxed with a 1px gray line.  I put my SideBarTabs in a dropdown, like
> <pre>+++*[relevantInfo]===</pre>.  It is in a separate box, and only
> has a gray line around it <u>when it is selected</u>.
> What is the CSS object that the NestedSlider is referencing here?  How
> can I change the formatting so it doesn't look funny next to the other
> two boxes?

NestedSliderPlugin syntax allows you to wrap the "label" portion of
the definition in a {{class wrapper{...}}}, like this:

+++*{{someclass{[relevantInfo]}}}<<tiddler SideBarTabs>>===

Where "someclass" is any custom or pre-defined core classname (or
combination of several classnames) that you want use.  Also, the
plugin "panel" styles use a CSS class of either "sliderPanel" OR
"floatingPanel", where "sliderPanel" is defined by the TW core, while
"floatingPanel" is added by NestedSliderPlugin.

In addition to specifying the CSS style for the panels, these class
names are also used programmatically by the plugin to provide some of
its enhanced features (such as "transient" behavior, where only one
slider remains open at a time).

Because of this, you have to be careful not to change some of the
required attributes values or the classnames themselves.  Nonetheless,
you can still 'tweak' many different CSS styles for these class
definitions to customize the look-and-feel of the sliding/floating
panels to match the rest of your page content.

The first step is to figure out what styles are being used for that
other content.  Then, enter that same CSS syntax into your
[[StyleSheet]], to override some of the styles for "sliderPanel" and/
or "floatingPanel", like this:

.sliderPanel { border:1px solid #ccc; }
   (I think this will match the TiddlyPedia look)
.floatingPanel { border:5px solid blue; background-color:green; } ===

*Using 3 plus signs {{{e.g. +++[Sliders - Nested]}}} causes the slider to remain closed on loading (i.e. click to slide open)
*Using 4 plus signs {{{e.g. ++++[Sliders - Nested]}}} causes the slider to be executed open on loading (i.e. click to close)
*Using a caret (^) with the plus signs {{{e.g. +++^[slider name etc.]}}} creates a slider that floats over text.
*For very detailed instructions see the actual plugin doumentation+++[slide it down here.]
!!!!The Nested Slider Plugin Documentation
<<tiddler NestedSlidersPlugin>>
===

*You can obtain the plugin at: http://www.TiddlyTools.com/#NestedSlidersPlugin
!!!The Lazy Slider
+++[The Lazy Slider]
<<tiddler LazySlider>>
===


!!!Tame wandering or stranded ~NestedSliders floating panel
+++[Slider position tweak]

Sometimes under certain conditions the floating slider panel can stray out of position.  By adding {{{@@position:relative;...@@}}} it resets the position of the floating panel so it stays beside its link.

{{{
@@position:relative;+++^35em^[What's In A Tiddler]
This is a tabbed list of some of the common things you can put into a tiddler.  They include text, images, CSS, HTML,  JavaScript, Plugins etc.
[[Go there...|WhatsInATiddler]]
===@@
}}}

@@position:relative;+++^35em^[What's In A Tiddler]
This is a tabbed list of some of the common things you can put into a tiddler.  They include text, images, CSS, HTML,  JavaScript, Plugins etc.
[[Go there...|WhatsInATiddler]]
===@@

===
!!!&nbsp; End
This tiddler shows some more complex effects that can be obtained with cunning use of CSS. Not all of these will work properly on all browsers because of differences in CSS implementation, but they should fail gracefully.

You can have special formatting for a specific, named tiddler like this:
{{{
#tiddlerHelloThere .title {
background-color: #99aaee;
}
}}}

Or for the first displayed tiddler:
{{{
div.tiddler:first-child .title {
font-size: 28pt;
}
}}}

Or just for the first line of every tiddler:
{{{
.viewer:first-line {
background-color: #999999;
}
}}}

Or just for the first letter of every tiddler:
{{{
.viewer:first-letter {
float: left;
font-size: 28pt;
font-weight: bold;
}
}}}

Or just for tiddlers tagged with a particular tag (note that this won't work for tags that contain spaces):
{{{
div[tags~="welcome"].tiddler .viewer {
background-color: #ffccaa;
}

div[tags~="features"].tiddler .viewer {
background-color: #88aaff;
}
}}}
!!!<<gradient horiz #fc3 #fff>>&nbsp;AnswerMacro^^<<tiddler CloseThisOpen with: 'Macros Other'  '« back'>>|<<toolbar editTiddler>>» ^^>>
''Displays answers and feedback for online questions.''

* displays an answer or other feedback either
**inserted in content like the standard slider or
**floated above existing tiddler content on a panel
* provides default feedback for correct and incorrect responses
* uses no cookies to remember its open or closed state; defaults to closed, so a new user on a shared machine always gets hidden answers
* offers three interfaces
**the standard tiddlybutton
**checkboxes for questions with multiple correct answers
**radio buttons for questions with a single correct answer
* provides option to display default feedback plus a tiddler button for more information [NEW in v1.2]

Get it here:
http://luceatlux.net/macros/answer/index.html
!!!<<gradient horiz #abf #fff>>&nbsp;End
{{tablecenter{
|>|>|>|>| !April 2007 Statistics |
|&nbsp;|Page Loads|Unique Visitors|First Time Visitors|Returning Visitors|
|Total | 4,447| 3,713| 2,596| 1,117|
|Average | 148| 124| 87| 37|
}}}
{{tablecenter{
|>|>|>|>| !August 2007 Statistics |
|&nbsp;|Page Loads|Unique Visitors|First Time Visitors |Returning Visitors|
|Total 	| 6,510| 5,488| 3,843| 1,645|
|Average| 203| 172| 120| 51|
}}}
/%
|Name|AutoRefresh|
|Source|http://www.TiddlyTools.com/#AutoRefresh|
|Version|0.6.0|
|Author|Eric Shulman - ELS Design Studios|
|License|http://www.TiddlyTools.com/#LegalStatements <<br>>and [[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|~CoreVersion|2.1|
|Type|script|
|Requires|InlineJavascriptPlugin|
|Overrides||
|Description|enable/disable auto-refresh of selected content to force/prevent re-rendering when tiddler changes occur|

usage:
	<<tiddler AutoRefresh with: mode id>>

where:
	mode - (optional) is one of:
		off (or disable) - prevent refresh of rendered content (except when PageTemplate is changed!)
		on (or enable)- re-render content whenever corresponding tiddler source is changed
		force - re-render content whenever ANY tiddler content is changes (or refreshDisplay() is triggered)
	id - (optional)
		is a unique DOM element identifier on which to operate.
		If not specified, the current tiddler (or containing parent if not in a tiddler) is used.

%/<script>
	var here=story.findContainingTiddler(place);
	if (here) { // in a tiddler, get containing viewer element
		var here=place; while (here && here.className!='viewer') here=here.parentNode;
		if (!here) return; // no 'viewer' element (perhaps a custom template?)
	}
	else here=place.parentNode; // not in a tiddler, use immediate parent container

	// if DOM id param, get element by ID instead of using container
	if ("$2"!="$"+"2") var here=document.getElementById("$2");

	if (!here) return; // safety check

	var mode="$1"; if (mode=="$"+"1") mode="on";

	switch (mode.toLowerCase()) {
		case 'on':
		case 'enable':
		case 'force':
			var title=here.getAttribute("tiddler");
			if (!title) { // find source tiddler title
				var tid=story.findContainingTiddler(place);
				if (!tid) return; // can't determine source tiddler
				title=tid.getAttribute("tiddler");
			}
			here.setAttribute("tiddler",title);
			here.setAttribute("refresh","content");
			here.setAttribute("force",(mode=='force')?"true":"");
			break;
		case 'off':
		case 'disable':
			here.setAttribute("refresh","");
			here.setAttribute("force","");
			break;
	}
</script>
<html><a href="javascript:;" onclick="var tid=story.findContainingTiddler(this); if (tid) story.refreshTiddler(tid.getAttribute('tiddler'),null,true); return false;">refresh</a></html>
<script>
function calcHeight()
{
var the_height=document.getElementById('ifsample1').contentWindow.document.body.scrollHeight;//find the height of the internal page
document.getElementById('ifsample1').style.height=the_height;//change the height of the iframe
}
</script>
<html>
<iframe id="ifsample1" onLoad="calcHeight();" name="ifsample1" width="600" scrolling="no" frameborder="0" marginheight=0 marginwidth=0 src="file:///I:\TiddlySpot\TiddlyWiki2.1\ifsample1.htm" target="ifsample1"><noframes>Your browser doesn't support Iframes</noframe></iframe>
  </html>
<html><a href="javascript:;" onclick="var tid=story.findContainingTiddler(this); if (tid) story.refreshTiddler(tid.getAttribute('tiddler'),null,true); return false;">refresh</a></html>
<script>
function calcHeight()
{
var the_height=document.getElementById('ifsample1').contentWindow.document.body.scrollHeight;//find the height of the internal page
document.getElementById('ifsample1').style.height=the_height;//change the height of the iframe
}
</script>
<html>
<iframe id="ifsample1" onLoad="calcHeight();" name="ifsample1" width="600" scrolling="no" frameborder="0" marginheight=0 marginwidth=0 src="file:///I:\TiddlySpot\TiddlyWiki2.1\ifsample2.htm" target="ifsample1"><noframes>Your browser doesn't support Iframes</noframe></iframe>
  </html>
<html><div style="width:550px;">
<<forEachTiddler
    where
       'tiddler.tags.contains("ft")'
    sortBy
       'tiddler.title.toUpperCase()'
    write '" [["+tiddler.title+" ]] \"view ["+tiddler.title+"]\" [["+tiddler.title+"]] "'
        begin '"<<tabs txtMyAutoTab "'
        end '">"+">"'
        none '"//No tiddler tagged with \"ft\"//"'
>>
</div></html>
{{tablecenter{
<<forEachTiddler 
where
'tiddler.title.toLowerCase().startsWith("b")'
sortBy '(tiddler.title.toLowerCase())' 
 ascending
 write
 '"|bgcolor:#fcf; "+(index+1)+"|[["+tiddler.title+"]]| "+tiddler.text.length+"|"+tiddler.tags+"|bgcolor:#fcf;"+tiddler.modified.formatString("YYYY.0MM.0DD")+"|\n"'
 begin '"|sort &raquo;| Title | Size | Tags |Modified|h\n"'
>>
<html><a href="http://www.wholinks2me.com/" target="_blank" title="Click here to see who's linking to my site.">Who links to my website?</a></html>
config.options.txtBackupFolder="BackupTwHelp"; 
!!!<<gradient horiz #fc3 #fff>>&nbsp;[[BackstageButtonConfig]]^^<<tiddler CloseThisOpen with: FormattingThePage '« back'>>|<<toolbar editTiddler>>» ^^>>
This code in a tiddler  tagged with 'systemConfig' removes the word "backstage" and leaves only the little bent arrow. (or straight in the case of IE)
{{{
config.messages.backstage = {
	open: {text: " ", tooltip: "Open the backstage tools."},
	close: {text: " ", tooltip: "Close the backstage area"},
	prompt: "backstage: ",
	decal: {
		edit: {text: "edit", tooltip: "Edit the tiddler '%0'"}
	}
};
}}}
/***
!!!<<gradient horiz #fc3 #fff >><<tiddler RefreshStyles>>&nbsp;BackstageCSS>>/%==================================================%/
***/
#backstageArea {background-color:#00a;}
#backstageArea a {background-color:#abf;color:#000; border:none;}
#backstageArea a:hover {background:#fff; color:#f00; }
#backstageArea a.backstageSelTab {background:#abf; color:#fff;}
#backstageButton {background:transparent; }
#backstageButton a {background:transparent; color:#000; border:none;}
#backstageButton a:hover {background:#fff;color:#f00; border:none;}
#backstagePanel {background:#abf; color:#000; border-color:#fcf ;width:50em;}
#backstagePanel a {color:#00f;}
#backstagePanel a:hover {background:#eee;color:#f00;  border:#f00 solid 1px;}
.backstagePanelFooter .button {border:none; color:#fcf ;}
.backstagePanelFooter .button:hover {color:#0f0;}


#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.5; filter:'alpha(opacity:50)';}
#backstageArea { width:100%;display:none; position:relative; overflow: hidden; z-index:150; padding:0.2em 0.5em 0.2em 0.5em;margin-left:auto;margin-right:auto;}

#backstageToolbar {position:relative; width:60%;margin-left:0;margin-right:auto;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; margin-right:auto;margin-left:auto; padding:0.1em 0.5em 0.2em 0.5em;}

#backstageArea a {font-weight:normal; margin-left:0.5em; padding:0.2em 0.5em 0.2em 0.5em;}

#backstage {position:relative; width:100%;}

#backstagePanel {display:none; z-index:100; position:absolute; margin:0em 3em 0em 0.2em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:50; position:absolute; width:100%; height:100px;}

.contentWrapper {margin-top:0em;
}



.popup {position: absolute;  z-index:0; font-size:.9em; padding:0; list-style-type: decimal; margin:-1.0em;}

/***
!!!<<gradient horiz #fc3 #fff >><<tiddler RefreshStyles>>&nbsp;BackstageCSS>>/%==================================================%/
***/



#backstageArea {background-color:#00a;}
#backstageArea a {background-color:#abf;color:#000; border:none;}
#backstageArea a:hover {background:#fff; color:#f00; }
#backstageArea a.backstageSelTab {background:#abf; color:#fff;}
#backstageButton {background:transparent; }
#backstageButton a {background:transparent; color:#000; border:none;}
#backstageButton a:hover {background:#fff;color:#f00; border:none;}
#backstagePanel {background:#abf; color:#000; border-color:#fcf ;width:50em;}
#backstagePanel a {color:#00f;}
#backstagePanel a:hover {background:#eee;color:#f00;  border:#f00 solid 1px;}
.backstagePanelFooter .button {border:none; color:#fcf ;}
.backstagePanelFooter .button:hover {color:#0f0;}


#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.5; filter:'alpha(opacity:50)';}
#backstageArea { width:100%;display:none; position:relative; overflow: hidden; z-index:150; padding:0.2em 0.5em 0.2em 0.5em;margin-left:auto;margin-right:auto;}

#backstageToolbar {position:relative; width:60%;margin-left:0;margin-right:auto;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; margin-right:auto;margin-left:auto; padding:0.1em 0.5em 0.2em 0.5em;}

#backstageArea a {font-weight:normal; margin-left:0.5em; padding:0.2em 0.5em 0.2em 0.5em;}

#backstage {position:relative; width:100%;}

#backstagePanel {display:none; z-index:100; position:absolute; margin:0em 3em 0em 0.2em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:50; position:absolute; width:100%; height:100px;}

.contentWrapper {margin-top:0em;
}



.popup {position: absolute;  z-index:0; font-size:.9em; padding:0; list-style-type: decimal; margin:-1.0em;}

|>|>|>|+++[Go to tiddler »]<<gotoTiddler>>===|
|>|>|>|<<search>> |
|>|>|{{unboldlink{[[look for in|NewPathFinder]]}}} |>|>|
| <<option chkSearchTitles>> | <<option chkSearchText>> | <<option chkSearchTags>> | <<option chkHoldSearches>> |
| titles |  text  | tags | hold |
|borderlessL0|k
<<permaview>>
<<tiddler MakeTiddlers>>@@{{locLink{<<tiddler ShowUnsavedChanges>>}}}@@<<saveChanges>>
+++[QuickView »]<<tiddler RefreshStyles>>
|>|>|>|<<popup [[quick edit]] [[<<forEachTiddler where 'tiddler.tags.containsAny(["quickedit"])'$))]]>> |
|>|>|>|<<popup [[hidden tiddlers]] [[<<forEachTiddler where 'tiddler.tags.containsAny(["excludeLists","excludeSearch"])'$))]]>> |
|>|>|>|<<popup [[systemConfig tiddlers]] [[<<forEachTiddler where 'tiddler.tags.containsAny(["systemConfig"])'$))]]>> |
===

+++[TspotControls »]
Upload Password: <<option pasUploadPassword>>
<<upload http://tiddlyspot.com/twhelp/store.cgi index.html . .  twhelp>>
<html><a href="http://tiddlyspot.com/?action=download&site=twhelp" target="_blank">download from server</a></html>
[[control panel|http://tiddlyspot.com/twhelp/controlpanel.cgi?]]
[[Tspot FAQ|http://faq.tiddlyspot.com/]]
[[Comment Control|http://www.haloscan.com/members/posts.php]]
[[StatCounter|http://my2.statcounter.com/project/]]
===

<<slider chkSliderOptionsPanel OptionsPanel 'options »' 'Change TiddlyWiki advanced options'>>
<<slider chkAdvancedOptions AdvancedOptions 'AdvancedOptions »' 'AdvancedOptions'>>
config.tasks.sidebaroptions = {
	text: "SideBarOptions",
	tooltip: "A custom backstage tab",
	content: "|width:30em;<<tiddler BackstageSideBarOptions>><<tiddler SideBarTabs>>|"
};
config.backstageTasks.push("sidebaroptions");
!!!<<gradient horiz #fc3 #fff>>&nbsp;BackstageTabTweak^^<<tiddler CloseThisOpen with: BackstageTab  '« back'>>|<<toolbar editTiddler>>» ^^>>

This is how to add a tab to backstage; put in a configSystem tagged tiddler.

''Show ~SidebarOptions'' @@color:#C06;''&raquo; &raquo;'' @@
<<<
{{{
config.tasks.sidebaroptions = {
	text: "SideBarOptions",
	tooltip: "A custom backstage tab",
	content: "<<tiddler SideBarOptions>>"
};
config.backstageTasks.push("sidebaroptions");
}}}
<<<
''~ToggleSidebar'' @@color:#C06;''&raquo; &raquo;'' @@
<<<
{{{
config.tasks.sidebarToggle = {
     text: "Sidebar",
     tooltip: "Toggle Sidebar",
     content: "<<toggleSideBar 'Toggle Sidebar' 'show/hide' hide>>"
};

config.backstageTasks.push("sidebarToggle"); 
}}}
<<<
''Make new tiddlers'' @@color:#C06;''&raquo; &raquo;'' @@
<<<
{{{
config.tasks.makeTiddlers = {
text: "MakeTiddlers",
tooltip: "Make a variety of different tiddlers",
content: "makeTiddlers
new tiddler
new journal
new tiddler (with systemConfig)
new tiddler(with example)
new tiddler(with table)
new tiddler(with tabs)
new tiddler(with Tweak)
new tiddler(with iframe)
new tiddler(with object)
"
};
config.backstageTasks.push("makeTiddlers");
}}}
<<<
{{borderless{
|vertical-align:bottom;<<toolbar fullscreen>><<toggleSideBar>>|<<tiddler NavButtons>>|vertical-align:bottom;[[Open in a new window|http://www.floppymoose.com/]]&nbsp;&raquo;|
----
<html><div align="center"><iframe  src ="http://www.floppymoose.com/" width="100%" align="center" height="600" scrolling="auto" frameborder="0" allowtransparency style="border:none;"></iframe></div></html>}}}
!!!<<gradient horiz #fc3 #ffffff>>&nbsp;[[BidiXPlugins]]^^<<tiddler CloseThisOpen with: ThirdPartyPlugins  '« back'>>|<<toolbar editTiddler>>» ^^>>
Plugins at http://tiddlywiki.bidix.info/BidiXTW.html

|bgcolor(#8cf): @@color(#000080): ''Titles'' @@ |bgcolor(#8cf): @@color(#000080):  ''Size'' (bytes)@@ |bgcolor(#8cf): @@color(#000080): ''Tags''@@ |
|[[.BidiX.Ajax]]| 1419|systemConfig,systemLib,GroupAuthoring,systemConfigDisable|
|[[ConfigTweaks]]| 326|systemConfig|
|[[GenerateRssHijack]]| 5169|systemConfig,plugin,RSSExtensions|
|[[GroupAuthoringPlugin]]| 8767|systemConfig,GroupAuthoring,plugin|
|[[HideWhenMacro]]| 729|systemConfig,SimonBaird|
|[[HttpGetMacro]]| 2006|systemConfig,GroupAuthoring,plugin|
|[[InlineJavascriptPlugin]]| 10214|systemConfig,EricShulman|
|[[LegacyStrikeThroughPlugin]]| 827|systemConfig,systemConfigDisable|
|[[LoadRemoteFileHijack]]| 1098|ProxyService,systemConfig,toRSS,plugin|
|[[NestedSlidersPlugin]]| 16536|systemConfig,EricShulman|
|[[NewHereCommand]]| 1447|systemConfig,TagglyTagging,Plugins|
|[[NoSaveOnDiskOverHttpHijack]]| 1071|plugin,systemConfig,systemConfigDisable,toRSS|
|[[PositionAdsense]]| 704|systemConfig,plugin|
|[[QuickOpenTagPlugin]]| 3549|systemConfig,TagglyTagging,Plugins|
|[[RSSReaderPlugin]]| 11226|systemConfig,plugin,RSSExtensions|
|[[RenameTagsPlugin]]| 2467|systemConfig,Plugins,TagglyTagging|
|[[RunMacroIfTagged]]| 1073|systemConfig,SimonBaird|
|[[SplashScreenPlugin]]| 2382|SaqImtiaz,systemConfig|
|[[TagglyListPlugin]]| 17405|TagglyTagging,systemConfig,Plugins|
|[[TestMacro]]| 1218|systemConfig,Cross-SubDomain|
|[[UploadPlugin]]| 24149|systemConfig,Upload,plugin|
|[[UploadToFileMacro]]| 4027|systemConfig,plugin|
!!!<<gradient horiz #fc3 #fff>>&nbsp;THISTIDDLERTITLEHERE^^<<tiddler CloseThisOpen with: HOMETABSNAMEHERE  '« back'>>|<<toolbar editTiddler>>» ^^>>

!!!!!<<gradient horiz #abf #fff>>&nbsp;Example>>

!!!!!<<gradient horiz  #abf #fff>>&nbsp;Code>>

!!!!!<<gradient horiz #abf #fff>>&nbsp;@@color:#fff;End@@>>
{{borderless{
|vertical-align:bottom;<<toolbar fullscreen>><<toggleSideBar>>|<<tiddler NavButtons>>|vertical-align:bottom;[[Open in a new window|TYPE URL HERE]]&nbsp;&raquo;|
----
<html><div align="center"><iframe  src ="TYPE URL HERE" width="100%" align="center" height="600" scrolling="auto" frameborder="0" allowtransparency style="border:none;"></iframe></div></html>}}}
<html><div align="center"> <object width="425" height="350"><param name="movie" value="TYPE URL HERE"></param><param name="wmode" value="transparent"></param><embed src="TYPE URL HERE" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object></div></html>
<<slider "chkCookieName" "TiddlerName" "title text" "tooltip" >>
{{niceTable{
|!Title/link|[[TW Help|http://twhelp.tiddlyspot.com]]|
|!Creator|Morris Gray|
|!Subject matter|Tutorial|
|!Description/notes|A beginners to intermedate level help file|
|!Screenshot|[img[http://www.giffmex.org/twinactionimgs/twhelp.png]]|
}}}
<<tabs tabsCookie [[Intro ]] "tooltip 1" [[MakeTabsIntro]]  [[TabTwoName]] "" [[tiddler two]]  [[TabThreeName]] "" [[Tiddler three]] [[TabFourName]] "" [[Tiddler four]] >>
----
&darr;+++[Create a tiddler like this:]
----
@@color(#C06):&nbsp;''Title:''@@<html><input type="text" size="40" value="" /></html>
@@color(#00f):''Body:''@@<html><textarea rows="10" cols="30"></textarea>  </html>
@@color(#0a0):''Tags:''@@<html><input type="text" size="40" value="systemConfig " /></html>
===

----
!!!<<gradient horiz #fc3 #ffffff>>&nbsp;BlockQuotes^^<<tiddler CloseThisOpen with: FormattingTiddlers  '« back'>>|<<toolbar editTiddler>>» ^^>>
''To emphasize text that needs to stand out you can use ~BlockQuotes.''
!!!!!<<gradient horiz #aaaaaa #ffffff>>&nbsp;Example>>
>''Eheu, litteras istas reperire non possum''^^[1]^^
>>''Estne tibi forte magna feles fulva et planissima''^^[2]^^
>>''Etiam capillus unus habet umbram''^^[3]^^
>>>^^[1]^^Unfortunately, I can't find those particular documents
>>>^^[2]^^Do you by chance happen to own a large, yellowish, very flat cat?
>>>^^[3]^^Even one hair has a shadow.
>>>level 3
>>level 2
>level 1

!!!!!<<gradient horiz #aaaaaa #ffffff>>&nbsp;Code>>
{{{
>''Eheu, litteras istas reperire non possum''^^[1]^^
>>''Estne tibi forte magna feles fulva et planissima''^^[2]^^
>>''Etiam capillus unus habet umbram''^^[3]^^
>>>^^[1]^^Unfortunately, I can't find those particular documents
>>>^^[2]^^Do you by chance happen to own a large, yellowish, very flat cat?
>>>^^[3]^^Even one hair has a shadow.
>>>level 3
>>level 2
>level 1
}}}
*@@color(#00A000):''Tip:'' The angle brackets (>) must be the first character on the left margin.@@




<<relLink "_phone" "Go to Phone">>

<html><ul><li><img src="social/delicious.png" border="0"> <a class="previewlink" href="http://del.icio.us/post?url=http%3A%2F%2Ftwhelp.tiddlyspot.com&amp;title=TiddlyWiki%20help%20file%20for%20beginners" target="_blank">Add to del.icio.us</a></li><li><img src="social/digg.png" border="0"> <a class="previewlink" href="http://digg.com/programming/Ultimate_Website_Snapshot_Service">Add to Digg</a></li><li><img src="social/reddit.png" border="0"> <a class="previewlink" href="http://reddit.com/submit?url=http://websnapr.com&amp;title=Website%20Snapshot%20Service">Add to reddit</a></li><li><img src="social/mister-wong.gif" border="0"> <a class="previewlink" href="http://www.mister-wong.de/add_url/" onclick="location.href='http://www.mister-wong.de/index.php?action=addurl&bm_url='+encodeURIComponent(location.href)+'&bm_description='+encodeURIComponent(document.title);return false" title="Add to Mister Wong" target="_top">Add to Mister Wong</a></li><li><img src="social/furl.png" border="0"> <a class="previewlink" href="http://furl.net/storeIt.jsp?t=Website%20Snapshot%20Service&amp;u=http://websnapr.com">Add to Furl</a></li></ul></html>
{{tablecenter table{

<script>

if (!window.story) window.story=window;var url=store.getTiddlerText("SiteUrl");
var title=story.findContainingTiddler(place).id.substr(7);
var permalink=encodeURIComponent(String.encodeTiddlyLink(title));
return "|bookmark this» » [["+title+"|"+url+"#"+permalink+"]]|";

</script>

}}}
<html><a href="javascript:;" onclick="var tid=story.findContainingTiddler(this); if (tid) story.refreshTiddler(tid.getAttribute('tiddler'),null,true); return false;">refresh</a></html><html><table width="96%" style="border:none;margin:1px;background:transparent;clear:both;"><iframe id="ifsample1" src="http://www.symbex.net.au/Wiki/ifsample1.htm" width="100%" height="0" scrolling="no" frameborder="0" allowtransparency style="border:none;"></iframe></table></html>

/%http://www.symbex.net.au/Wiki/ifsample1.htm file:///I:\TiddlySpot\TiddlyWiki2.1\ifsample1.htm%/

!!!<<gradient horiz #fc3 #fff>>&nbsp;BorderlessTable^^<<tiddler CloseThisOpen with: Tables  '« back'>>|<<toolbar editTiddler>>» ^^>>
!!!!!1: Put this in your ~StyleSheet for a ''centered'' borderless table
(Change padding and alignment as required)
<<<
{{{.borderless, .borderless table, .borderless td, .borderless tr, .borderless th, .borderless tbody
	{ border:0 !important; margin:0 !important; padding:2px !important; td.vertical-align:top !important;margin-left: auto !important; margin-right: auto !important;}}}}
<<<
!!!!!1a: Put this in your ~StyleSheet for a ''left aligned'' borderless table.
(Notice the the only thing changed is the margin-left has been set to zero) 
<<<
{{{.borderlessL, .borderlessL table, .borderlessL td, .borderlessL tr, .borderlessL th, .borderlessL tbody
	{ border:0 !important; margin:0 !important; padding:2px !important; td.vertical-align:top !important;margin-left: 0 !important; margin-right: auto !important;}}}}
<<<

!!!!!Example
|bgcolor:#abf;width:30%; Normal Border |bgcolor:#abf;width:30%; Surround your table like this |bgcolor:#abf; Borderless table |
|vertical-align:middle; <<tiddler ./normalborder>> |<<tiddler ./noborder>> |vertical-align:middle; <<tiddler ./borderExp>>|


<part normalborder hidden>
|!Col1|!Col2|!Col3|
|r1c1| r1r2c2 |r1c3|
|r2c1|~|r2c3|
</part>
<part noborder hidden>
{{{
{{borderless{
}}}
{{{
|!Col1|!Col2|!Col3|
|r1c1| r1r2c2 |r1c3|
|r2c1|~|r2c3|
}}}
{{{
}}}
}}}
!!!a better way
Add the custom class to the bottom of the table like this:
{{{
|!Col1|!Col2|!Col3|
|r1c1| r1r2c2 |r1c3|
|r2c1|~|r2c3|
|borderless|k
}}}
0r
{{{
|borderlessL|k
}}}
</part>
<part borderExp hidden>

{{borderless{
|!Col1|!Col2|!Col3|
|r1c1| r1r2c2 |r1c3|
|r2c1|~|r2c3|
}}}
</part>
''Table heading links to w3schools references on this subject.''
| !The CSS Box [[Border|http://www.w3schools.com/css/css_border.asp]] [[Margin|http://www.w3schools.com/css/css_margin.asp]] [[Padding|http://www.w3schools.com/css/css_padding.asp]] |
<html>
<div style="color:black;background-color:#FFFFCC;padding:1em;border:thin solid black;text-align:center;width=30%">margin
<div style="color:white;background-color:black;padding:1em;border:thin solid black;text-align:center;width=100%">border
<div style="color:black;background-color:#FFCC99;padding:1em;border:thin solid black;text-align:center;width=100%">padding
<div style="color:black;background-color:white;border:thin solid black;text-align:center;width=100%">content<br/>
<div style="float:left">&lt;-</div><div style="float:right">-&gt;</div>CSS 'width'
</div>
</div>
</div>
</div>
</html>
''Table heading links to w3schools references on this subject.''
|!Box Properties| ![[Border|http://www.w3schools.com/css/css_border.asp]] | ![[Margin|http://www.w3schools.com/css/css_margin.asp]] | ![[Padding|http://www.w3schools.com/css/css_padding.asp]] |
| ''Property'' | ''Valid Values'' | ''Example'' | ''Inherited?'' |
| margin-top |//length//, //percentage//, auto | margin-top:5px | N |
| margin-right |//length//, //percentage//, auto | margin-right:5px | N |
| margin-bottom |//length//, //percentage//, auto | margin-bottom:1em | N |
| margin-left |//length//, //percentage//, auto | margin-left:5pt | N |
| margin |//length//, //percentage//, auto {1,4}| margin: 10px 5px 10px 5px | N |
| padding-top |//length//, //percentage// | padding-top:10%| N |
| padding-right |//length//, //percentage// | padding-right:15px | N |
| padding-bottom |//length//, //percentage// | padding-bottom:1.2em | N |
| padding-left |//length//, //percentage// | padding-left:10pt; } | N |
| padding |//length//, //percentage// {1,4}| padding: 10px 10px 10px 15px | N |
| border-top-width |thin, medium, thick, //length// | border-top-width:thin | N |
| border-right-width |thin, medium, thick, //length// | border-right-width:medium | N |
| border-bottom-width |thin, medium, thick, //length// | border-bottom-width:thick | N |
| border-left-width |thin, medium, thick, //length// | border-left-width:15px | N |
| border-width |thin, medium, thick, //length// {1,4}| border-width: 3px 5px 3px 5px | N |
| border-top-color |//color // | border-top-color:navajowhite | N |
| border-right-color |//color// | border-right-color:whitesmoke | N |
| border-bottom-color |//color// | border-bottom-color:black | N |
| border-left-color |//color// | border-left-color:#C0C0C0 | N |
| border-color |//color// {1,4} | border-color: green red white blue; } | N |
| border-top-style |none, solid, double, groove, ridge, inset, outset | border-top-style:solid | N |
| border-right-style |none, solid, double, groove, ridge, inset, outset | border-right-style:double | N |
| border-bottom-style |none, solid, double, groove, ridge, inset, outset | border-bottom-style:groove | N |
| border-left-style |none, solid, double, groove, ridge, inset, outset | border-left-style:none | N |
| border-style |none, solid, double, groove, ridge, inset, outset | border-style:ridge; }| N |
| border-top |//border-width//, //border-style//, //border-color// | border-top: medium outset red | N |
| border-right |//border-width//, //border-style//, //border-color// | border-right: thick inset maroon | N |
| border-bottom |//border-width//, //border-style//, //border-color// | border-bottom: 10px ridge gray | N |
| border-left |//border-width//, //border-style//, //border-color// | border-left: 1px groove red | N |
| border |//border-width//, //border-style//, //border-color// | border: thin solid blue | N |
| float |none, left, right | float:none | N |
| clear |none, left, right, both | clear:left | N |
{{borderless{
|vertical-align:bottom;<<toggleSideBar>>|<<tiddler NavButtons>>|vertical-align:bottom;[[Open in a new window|http://www.afb.org/braillebug/braille_print.asp]]&nbsp;&raquo;|
<html><div align="center"><iframe src ="http://www.afb.org/braillebug/braille_print.asp" width="100%" align="center" height="600"></iframe></div></html>}}}
{{borderless{
|vertical-align:bottom;<<toolbar fullscreen>><<toggleSideBar>>|<<tiddler NavButtons>>|vertical-align:bottom;[[Open in a new window|http://users.qldnet.com.au/~ajay/FileXch/B.pdf]]&nbsp;&raquo;|
----
<html><div align="center"><iframe  src ="http://users.qldnet.com.au/~ajay/FileXch/B.pdf" width="100%" align="center" height="600" scrolling="auto" frameborder="0" allowtransparency style="border:none;"></iframe></div></html>}}}
{{borderless{
<html><hide linebreaks><TABLE width=100px border="0" align=center><tr><TD><font size="-1"><font size="-1"><FORM action on="file:///a:/"><INPUT type=submit value="a:\ drive" name="button" class="btn"></FORM></TD><TD><font size="-1"><FORM action="file:///c:/"><INPUT type=submit value="c:\ drive" name="button" class="btn" name=submit2></FORM></TD><TD><font size="-1"><FORM action="file:///d:/"><INPUT type=submit value="d:\ drive" name="button" class="btn" name=submit2></FORM></TD><TD><font size="-1"><FORM action="file:///e:/"><INPUT type=submit value="e:\ drive" name="button" class="btn" name=submit2></FORM></TD><TD><font size="-1"><FORM action="file:///f:/"><INPUT type=submit value="f:\ drive" name="button" class="btn" name=submit2> </FORM></TD></font></tr><tr><TD><font size="-1"><FORM action="file:///g:/"><INPUT type=submit value="g:\ drive" name="button" class="btn" name=submit2></FORM></TD><TD><font size="-1"><FORM action="file:///h:/"><INPUT type=submit value="h:\ drive" name="button" class="btn" name=submit2></FORM><TD><font size="-1"><FORM action="file:///i:/"><INPUT type=submit value="i:\ drive" name="button" class="btn" name=submit2></FORM></TD><TD><font size="-1"><FORM action="file:///j:/"><INPUT type=submit value="j:\ drive" name="button" class="btn" name=submit2></FORM></TD><TD><font size="-1"><FORM action="file:///k:/"><INPUT type=submit value="k:\ drive" name="button" class="btn" name=submit2></FORM></TD></TR></TABLE></html>
}}}
{{borderless{
|vertical-align:bottom;<<toggleSideBar>>|<<tiddler NavButtons>>|vertical-align:bottom;[[Open in a new window|file:///I:/TiddlySpot/Tiddlywiki2.1/BrowseDrives.htm]]&nbsp;&raquo;|
<html><div align="center"><<tiddler BrowseFilesTry>><iframe src ="file:///I:/TiddlySpot/Tiddlywiki2.1/BrowseDrives.htm" width="100%" align="center" height="800"></iframe></div></html>}}}
<html><div align="center"><FORM name=form1><TABLE align="center" border="0"><TBODY><TR BGCOLOR="#CCC"><TD ALIGN=CENTER STYLE="padding-left: 5px; padding-top: 2px; padding-bottom: 2px;">Open File</TD></TR><TR BGCOLOR="#CCCCCC"><TD ALIGN=CENTER STYLE="padding-left: 5px; padding-top: 2px; padding-bottom: 5px;"><FONT face="Arial, Helvetica, sans-serif" color="#ffffff" size=-1></FONT><INPUT type=file name=cmuds> <INPUT onclick="whatFile()" target="_blank" type=button value=OpenFile name=button></TD></TR></TBODY></TABLE></FORM></div></html>
''NOTE: this only works offline.''
This requires an additional tiddler 'WhatFileScript' containing this script, tagged with 'systemConfig' and http://www.tiddlytools.com/#InlineJavascriptPlugin
{{{
function whatFile() {
window.open ('file:///' + document.form1.cmuds.value)
}
}}}
{{borderless{
|vertical-align:bottom;<<toolbar fullscreen>>|<<tiddler NavButtons>>|<<toggleSideBar>>|
----
@@position:relative;+++^45em^[See the code here]...
<<<
{{{
<html><hide linebreaks>
<!-- extra psuedo-tag from HTMLFormattingPlugin -->
	<form target="theFrameID">
	<input type=file name=whichfile>
	<input type=button value="open"
		onclick="var f=this.form;
			f.action='file:///'+f.whichfile.value;
			try { f.submit(); }
			catch(e) { alert(e.description?e.description:e.toString()); }">
	</form>
	<iframe src="" name="theFrameID" id="theFrameID"
		style="background:#fff;width:100%;height:600px">
	</iframe>
</html>
}}}
<<<
===@@

<html><hide linebreaks>
<!-- extra psuedo-tag from HTMLFormattingPlugin -->
	<form target="theFrameID">
	<input type=file name=whichfile>
	<input type=button value="open"
		onclick="var f=this.form;
			f.action='file:///'+f.whichfile.value;
			try { f.submit(); }
			catch(e) { alert(e.description?e.description:e.toString()); }">
	</form>
	<iframe src="" name="theFrameID" id="theFrameID"
		style="background:#fff;width:100%;height:600px">
	</iframe>
</html>
}}}
!!!!<<gradient horiz #fc3 #ffffff>>&nbsp;BrowseForFiles^^<<tiddler CloseThisOpen with: NavigationWithTW  '« back'>>|<<toolbar editTiddler>>» ^^>>
<html><div align="center"><FORM name=form1><INPUT type=file name=cmuds> <INPUT onclick="whatFile()" type=button value=OpenFile name=button></FORM></div></html>
''Note:'' You can see your files but can only open them after you save a ~TiddlyWiki to your disk drive.
!!!!<<gradient horiz #abf #ffffff>>&nbsp;Code for Form>>
{{{<html><div align="center"><FORM name=form1><INPUT type=file name=cmuds> <INPUT onclick="whatFile()" type=button value=OpenFile name=button></FORM></div><br></html>}}}
!!!!<<gradient horiz #abf #ffffff>>&nbsp;Code for Script>>
<<tiddler WhatFileScriptDemo>>
''Then save the ~TiddlyWiki and reload.''
!!!End

<html><hide linebreaks> <!-- extra psuedo-tag from HTMLFormattingPlugin -->
	<form target="theFrameID">
	<input type=file name=whichfile>
	<input type=button value="open"
		onclick="var f=this.form;
			f.action='file:///'+f.whichfile.value;
			try { f.submit(); }
			catch(e) { alert(e.description?e.description:e.toString()); }">
	</form>
	<iframe src="" name="theFrameID" id="theFrameID"
		style="background:#fff;width:100%;height:400px">
	</iframe>
</html>
!!!<<gradient horiz #fc3 #ffffff>>&nbsp;[[Browse Drives|BrowseYourHardDisk]]^^<<tiddler CloseThisOpen with: HowToUseLinks  '« back'>>|<<toolbar editTiddler>>» ^^>>
''These methods work after you save a ~TiddlyWiki to your disk drive''
{{borderless{
|<html><FORM action="file:///c:/" target="_blank"><INPUT type=submit value="c:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///d:/" target="_blank"><INPUT type=submit value="d:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///e:/" target="_blank"><INPUT type=submit value="e:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///f:/" target="_blank"><INPUT type=submit value="f:\ drive" name="button" class="btn" name=submit2></FORM></html>|
}}}
!!!<<gradient horiz #abf #ffffff>>&nbsp;Code>>
{{{|<html><FORM action="file:///c:/" target="_blank"><INPUT type=submit value="c:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///d:/" target="_blank"><INPUT type=submit value="d:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///e:/" target="_blank"><INPUT type=submit value="e:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///f:/" target="_blank"><INPUT type=submit value="f:\ drive" name="button" class="btn" name=submit2></FORM></html>|}}}


!!!<<gradient horiz #fc3 #ffffff>>&nbsp;[[Browse your computer drives in an iframe|BrowseYourHardDisk]]>>
@@color(#c06):Here is something for someone who hates to leave their ~TiddlyWiki.@@

This only works when ~TiddlyWiki is running on your local disk drive BrowseDrives

''Create a normal html web page like this.'' You can create a button for each of your drives. Save it where you wish e.g. C:/~BrowseDrives.htm

{{{<HTML><HEAD><TITLE>BrowseDrives.htm</TITLE></HEAD>
<BODY><FORM action="file:///c:/"><INPUT type=submit value="c:\ drive" name="button" class="btn" name=submit2></FORM></BODY></HTML>}}}

''Now create a tiddler with an iframe in it.''

{{{
<html><div align="center"><iframe src ="file:///C:/BrowseDrives.htm" width="100%" align="center" height="600"></iframe></div></html>
}}}

Clicking on the button will bring up your computer directory in the iframe and you can browse your whole hard drive.  If you are using ~FireFox set up right-click @@color(#C06):"view source with"^^&dagger;^^@@ with your favourite editors.  Now if you see a file that needs editing simply right click and ''view frame source with'' then edit the file with the appropriate editor. @@color(#C06):Note: Make sure you click ''view __frame__ source with'' or you will get the ~TiddlyWiki code.@@
|@@color(#C06):^^&dagger;^^@@ ''~ViewSourceWith'' is an add-on for ~FireFoxYou can get it here https://addons.mozilla.org/en-US/firefox/addons/versions/394 |
!!!<<gradient horiz #fc3 #ffffff>>&nbsp;Getting fancy with browsing>>
''You can get quite carried away with this'' and add some navigation buttons with NavButtons; add styling to the buttons with ButtonStyle; Expand the viewing window <<toggleSideBar>> or move the whole thing outside of the ~TiddlyWiki into a new window or tab..
!!!&nbsp;The full monty
{{{
{{borderless{
|vertical-align:bottom;<<toggleSideBar>>|<<tiddler NavButtons>>|vertical-align:bottom;[[Open in a new window|TYPE URL HERE]]&nbsp;&raquo;|
<html><div align="center"><iframe src ="TYPE URL HERE" width="100%" align="center" height="600"></iframe></div></html>}}}
}}}
For the full monty you will need:
Put your button html page in the two places marked "TYPE URL HERE"
http://tw.lewcid.org/#ToggleSideBarMacro
To tidy it up put this in ~StyleSheet.
{{{
.borderless, .borderless table, .borderless td, .borderless tr, .borderless th, .borderless tbody
	{ border:0 !important; margin:0 !important; padding:0 !important; td.vertical-align:top !important;margin-left: auto !important; margin-right: auto !important; padding:7px !important;}
}}}

!!!&nbsp;End of browse drives
<script>
document.write("Browser: ")
document.write(navigator.appName + "<br>")

document.write("Browserversion: ")
document.write(navigator.appVersion + "<br>")

document.write("Code: ")
document.write(navigator.appCodeName + "<br>")

document.write("Platform: ")
document.write(navigator.platform + "<br>")

document.write("Cookies enabled: ")
document.write(navigator.cookieEnabled + "<br>")

document.write("Browser's user agent header: ")
document.write(navigator.userAgent + "<br>")
</script>