Ouch.

This is a bit of a hack. In an ideal world, clicking the save button should just give you a file save dialogue box and let you choose where to save your spanking new personal TiddlyWiki. Unfortunately doing stuff in web browsers is never that easy, and there's a couple of hoops to be jumped through. See below for a quick guide.



The steps to save your changes as a new, standalone TiddlyWiki are simple, but can be error prone.

1. Make sure that all the text is selected in the edit box above. Copy it to the clipboard.
2. Go back to the browser window showing your editted TiddlyWiki and save the HTML as a new file.
3. Open the HTML file in a text editor like Notepad. Scroll to the bottom and locate the marker lines picked out with a row of asterisks.
4. Select the text from just above that marker back up to the previous marker.
5. Paste the new text in.
6. Save the HTML file.
Suggestions or improvements welcome.

Tim Cuthbertson re-styled the original TiddlyWiki somewhat, and this is the result. He has a portfolio-homepage-blog at http://www.gfxmonk.com
A TiddlyWiki is "A reuseable non-linear personal Web Notebook". Essentially it's a very simple way of making a self contained document much like this one, but on any topic of your choosing. Check out http://www.tiddlywiki.com for more information.
The CSS code used for this TiddlyWiki is shown below. Just insert it between the <style> and </style> tags of any TiddlyWiki to make it look like this one, and of course feel free to change anything: ------------------------------- body { margin: 0px; background-color: rgb(228, 228, 228); font-size: 9pt; font-family: tahoma,arial,helvetica; } img { border: medium none ; } #header { border: 1px solid rgb(68, 85, 136); margin: 16px 16px 20px; padding: 3px 20px 6px; background: rgb(187, 204, 221) none repeat scroll 0%; width: 762px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; } #headerTitle { font-size: 40pt; font-weight: bold; } #headerSubtitle { font-size: 12pt; font-family: georgia,times; font-style: italic; color: rgb(68, 85, 119); display: block; position: relative; bottom: 5px; left: 50px; } #header a:link, #header a:visited { text-decoration: none; color: rgb(153, 170, 187); } #leftMenu { border: 1px solid rgb(170, 170, 170); margin: 0px 6px 16px 16px; background: rgb(243, 243, 243) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; float: left; width: 127px; color: black; text-align: right; } #leftMenu div { padding: 6px; font-size: 10pt; overflow: hidden; line-height: 140%; } #leftMenu a:link, #leftMenu a:visited { text-decoration: none; color: rgb(68, 68, 68); } #leftMenu a:hover { color: rgb(153, 34, 34); } #sidebar { border: 1px solid rgb(170, 170, 170); margin: 0px 0px 0px 6px; padding: 8px; float: left; width: 145px; color: rgb(102, 102, 102); font-size: 8pt; background-color: rgb(243, 243, 243); } #sidebar a:link, #sidebar a:visited { color: rgb(102, 102, 102); text-decoration: none; } #sidebar a:hover { color: rgb(153, 34, 34); text-decoration: underline; } #displayArea { float: left; width: 500px; } .tiddler { border: 1px solid rgb(170, 170, 170); margin: 0pt 10px 20px; padding: 8px; font-family: georgia,times; background-color: rgb(243, 243, 243); } .tiddlerSelected { border: 1px solid rgb(170, 170, 170); margin: 0pt 10px 20px; padding: 8px; font-family: georgia,times; background-color: rgb(255, 255, 255); } .title { border-bottom: 1px solid rgb(204, 204, 204); font-family: tahoma,arial,helvetica; font-size: 12pt; color: rgb(68, 102, 153); font-weight: bold; display: block; padding-bottom: 5px; margin-bottom: 4px; } .body { padding-top: 2px; font-size: 10pt; } .body a:link, .body a:visited { color: rgb(153, 34, 34); text-decoration: underline; } .body a:hover { color: rgb(255, 255, 255); background-color: rgb(153, 34, 34); text-decoration: none; } .editor { border-bottom: 0px solid rgb(153, 153, 153); font-size: 8pt; color: rgb(64, 44, 116); font-weight: normal; padding-bottom: 0px; margin-bottom: 0px; } .toolbar { padding: 0px; text-shadow: none; font-weight: normal; font-size: 8pt; margin-left: 6px; color: rgb(170, 170, 170); display: inline; visibility: hidden; } .toolbar a { color: rgb(136, 136, 136); text-decoration: none; } .toolbar a:hover { color: rgb(0, 0, 0); } .toolbar a:active { color: rgb(102, 102, 102); } #saveMessage, #storeArea, #copyright { display: none; } #storeArea { display: none; } #floater { border: 1px solid rgb(102, 102, 102); margin: 0pt 10px 20px; padding: 8px; font-size: 10pt; visibility: hidden; color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); position: absolute; opacity: 0.5; }
This is just a sample TiddlyWiki to show off the CssStyle I wrote, for use on any TiddlyWiki. If you have no idea what a TiddlyWiki is, just click it ;)
* Copy the CssStyle to your clipboard. * Open your TiddlyWiki .html file in a text editor. * Search for '<style type="text/css">' * Replace all text between this and '</style>' with the contents of your clipboard. * Reload and enjoy ;D
StartHere CssStyle HowToUse Created by: TimCuthbertson
TiddlyWiki CSS
A simple alternate look for any TiddlyWiki.