<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]];}
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 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 class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
<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 id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></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
Background: #fff
Foreground: #000
PrimaryPale: #fff
PrimaryLight: #6699cc
PrimaryMid: #2C365C
PrimaryDark: #014
SecondaryPale: #fe8
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
|''Description:''|Support for cryptographic functions|
if(!version.extensions.CryptoFunctionsPlugin) {
version.extensions.CryptoFunctionsPlugin = {installed:true};
//-- Crypto functions and associated conversion routines
// Crypto "namespace"
function Crypto() {}
// Convert a string to an array of big-endian 32-bit words
Crypto.strToBe32s = function(str)
var be = Array();
var len = Math.floor(str.length/4);
var i, j;
for(i=0, j=0; i<len; i++, j+=4) {
be[i] = ((str.charCodeAt(j)&0xff) << 24)|((str.charCodeAt(j+1)&0xff) << 16)|((str.charCodeAt(j+2)&0xff) << 8)|(str.charCodeAt(j+3)&0xff);
while (j<str.length) {
be[j>>2] |= (str.charCodeAt(j)&0xff)<<(24-(j*8)%32);
return be;
// Convert an array of big-endian 32-bit words to a string
Crypto.be32sToStr = function(be)
var str = "";
for(var i=0;i<be.length*32;i+=8)
str += String.fromCharCode((be[i>>5]>>>(24-i%32)) & 0xff);
return str;
// Convert an array of big-endian 32-bit words to a hex string
Crypto.be32sToHex = function(be)
var hex = "0123456789ABCDEF";
var str = "";
for(var i=0;i<be.length*4;i++)
str += hex.charAt((be[i>>2]>>((3-i%4)*8+4))&0xF) + hex.charAt((be[i>>2]>>((3-i%4)*8))&0xF);
return str;
// Return, in hex, the SHA-1 hash of a string
Crypto.hexSha1Str = function(str)
return Crypto.be32sToHex(Crypto.sha1Str(str));
// Return the SHA-1 hash of a string
Crypto.sha1Str = function(str)
return Crypto.sha1(Crypto.strToBe32s(str),str.length);
// Calculate the SHA-1 hash of an array of blen bytes of big-endian 32-bit words
Crypto.sha1 = function(x,blen)
// Add 32-bit integers, wrapping at 32 bits
add32 = function(a,b)
var lsw = (a&0xFFFF)+(b&0xFFFF);
var msw = (a>>16)+(b>>16)+(lsw>>16);
return (msw<<16)|(lsw&0xFFFF);
// Add five 32-bit integers, wrapping at 32 bits
add32x5 = function(a,b,c,d,e)
var lsw = (a&0xFFFF)+(b&0xFFFF)+(c&0xFFFF)+(d&0xFFFF)+(e&0xFFFF);
var msw = (a>>16)+(b>>16)+(c>>16)+(d>>16)+(e>>16)+(lsw>>16);
return (msw<<16)|(lsw&0xFFFF);
// Bitwise rotate left a 32-bit integer by 1 bit
rol32 = function(n)
return (n>>>31)|(n<<1);
var len = blen*8;
// Append padding so length in bits is 448 mod 512
x[len>>5] |= 0x80 << (24-len%32);
// Append length
x[((len+64>>9)<<4)+15] = len;
var w = Array(80);
var k1 = 0x5A827999;
var k2 = 0x6ED9EBA1;
var k3 = 0x8F1BBCDC;
var k4 = 0xCA62C1D6;
var h0 = 0x67452301;
var h1 = 0xEFCDAB89;
var h2 = 0x98BADCFE;
var h3 = 0x10325476;
var h4 = 0xC3D2E1F0;
for(var i=0;i<x.length;i+=16) {
var j,t;
var a = h0;
var b = h1;
var c = h2;
var d = h3;
var e = h4;
for(j = 0;j<16;j++) {
w[j] = x[i+j];
t = add32x5(e,(a>>>27)|(a<<5),d^(b&(c^d)),w[j],k1);
e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
for(j=16;j<20;j++) {
w[j] = rol32(w[j-3]^w[j-8]^w[j-14]^w[j-16]);
t = add32x5(e,(a>>>27)|(a<<5),d^(b&(c^d)),w[j],k1);
e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
for(j=20;j<40;j++) {
w[j] = rol32(w[j-3]^w[j-8]^w[j-14]^w[j-16]);
t = add32x5(e,(a>>>27)|(a<<5),b^c^d,w[j],k2);
e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
for(j=40;j<60;j++) {
w[j] = rol32(w[j-3]^w[j-8]^w[j-14]^w[j-16]);
t = add32x5(e,(a>>>27)|(a<<5),(b&c)|(d&(b|c)),w[j],k3);
e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
for(j=60;j<80;j++) {
w[j] = rol32(w[j-3]^w[j-8]^w[j-14]^w[j-16]);
t = add32x5(e,(a>>>27)|(a<<5),b^c^d,w[j],k4);
e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
h0 = add32(h0,a);
h1 = add32(h1,b);
h2 = add32(h2,c);
h3 = add32(h3,d);
h4 = add32(h4,e);
return Array(h0,h1,h2,h3,h4);
|''Description:''|Support for deprecated functions removed from core|
if(!version.extensions.DeprecatedFunctionsPlugin) {
version.extensions.DeprecatedFunctionsPlugin = {installed:true};
//-- Deprecated code
// @Deprecated: Use createElementAndWikify and this.termRegExp instead
config.formatterHelpers.charFormatHelper = function(w)
// @Deprecated: Use enclosedTextHelper and this.lookaheadRegExp instead
config.formatterHelpers.monospacedByLineHelper = function(w)
var lookaheadRegExp = new RegExp(this.lookahead,"mg");
lookaheadRegExp.lastIndex = w.matchStart;
var lookaheadMatch = lookaheadRegExp.exec(w.source);
if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {
var text = lookaheadMatch[1];
text = text.replace(/\n/g,"\r");
w.nextMatch = lookaheadRegExp.lastIndex;
// @Deprecated: Use <br> or <br /> instead of <<br>>
config.macros.br = {};
config.macros.br.handler = function(place)
// Find an entry in an array. Returns the array index or null
// @Deprecated: Use indexOf instead
Array.prototype.find = function(item)
var i = this.indexOf(item);
return i == -1 ? null : i;
// Load a tiddler from an HTML DIV. The caller should make sure to later call Tiddler.changed()
// @Deprecated: Use store.getLoader().internalizeTiddler instead
Tiddler.prototype.loadFromDiv = function(divRef,title)
return store.getLoader().internalizeTiddler(store,this,title,divRef);
// Format the text for storage in an HTML DIV
// @Deprecated Use store.getSaver().externalizeTiddler instead.
Tiddler.prototype.saveToDiv = function()
return store.getSaver().externalizeTiddler(store,this);
// @Deprecated: Use store.allTiddlersAsHtml() instead
function allTiddlersAsHtml()
return store.allTiddlersAsHtml();
// @Deprecated: Use refreshPageTemplate instead
function applyPageTemplate(title)
// @Deprecated: Use story.displayTiddlers instead
function displayTiddlers(srcElement,titles,template,unused1,unused2,animate,unused3)
// @Deprecated: Use story.displayTiddler instead
function displayTiddler(srcElement,title,template,unused1,unused2,animate,unused3)
// @Deprecated: Use functions on right hand side directly instead
var createTiddlerPopup = Popup.create;
var scrollToTiddlerPopup = Popup.show;
var hideTiddlerPopup = Popup.remove;
// @Deprecated: Use right hand side directly instead
var regexpBackSlashEn = new RegExp("\\\\n","mg");
var regexpBackSlash = new RegExp("\\\\","mg");
var regexpBackSlashEss = new RegExp("\\\\s","mg");
var regexpNewLine = new RegExp("\n","mg");
var regexpCarriageReturn = new RegExp("\r","mg");
Wikis were designed to work better in Firefox. If you're using Internet Explorer and this page looks out of balance, try this:

Go to Tools/Internet Options and click on the General tab, then click on Accessibility and untick the box that says "Ignore font sizes specified on webpages" and see if that helps.

There are other known issues using Internet Explorer with ~TiddlyWiki. For help see [[this posting|http://www.tiddlywiki.com/#InternetExplorer]] at the original ~TiddlyWiki site.
Yet another reason to upgrade to a better browser. Click on the fox, it's free.

After you've defined your SiteTitle and SiteSubtitle, the next thing you might want to do is make a new entry.
Click on New Tiddler from the menu on the right, put in a title, write something in the box and click 'done'. If you click on 'new journal' instead, it will put today's date as the Title automatically and tag it 'Journal' so later you can call up all Journal entries. You cannot see New Tiddler and New Journal on this wiki because you're in reader-only mode. That's why you have to download your own. You cannot collaborate on this one directly, but you can keep yours and this open at the same time and toggle back and forth.

The other thing you might want to do is change the font. TiddlyWiki is programmed with a combination of html, css, and javascript so if you don't know how to do this yourself, you have to take some things on faith. In the right-side menu of //your// Tiddlywiki, click on More and then Shadowed. This brings up a list of TiddlyWiki parts. If you go down the list and click on the StyleSheet tiddler it will open. Click Edit and paste this code in the box.

body { font-family: sylfaen; font-size: 1.0em;}

What you can noodle with is the font type. Change 'sylfaen' to the font of your desire. And you can change the font size. Fiddle with the number before 'em'. Every time you click Done, you can see your changes.

This will set the font for the body of your wiki as well as the left-hand margin and some of the right-side.
Here's an article that explains the meaning of 'em': [[Em (typography)|http://en.wikipedia.org/wiki/Em_%28typography%29]]

You can use % instead of 'em' by putting font-size: 110%; in the code instead, or any other % you want.
Changing text size on specific areas can be done like this.

@@font-size:120%; your text here@@
@@font-size:120%; your text here@@
If it's not a link or WikiWord (colored automatically) you can also change the color of your text.
@@font-family:verdana;font-size:105%;color:red; your text here@@
@@font-family:verdana;font-size:105%;color:red; your text here@@

Make sure there are no spaces except after the last semi-colon in your code.

If you want to change the font color for your entire wiki, it's better to put the code in your StyleSheet tiddler.
|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/]]|
|Overrides|'image' formatter|
|Description|extends image syntax to add optional CSS width/height values|
Extends standard TiddlyWiki image syntax, ''{{{[img[...]]}}}'', so you can specify CSS width/height values.
The extended syntax is:
>where x and y are the desired width and height of the image, specified using CSS units of measurement (e.g., px, em, cm, in, or %). Use ''auto'' for either the width or height to scale image proportionally (i.e., maintain aspect ratio). You may also calculate a CSS value on-the-fly by using //evaluated javascript//, enclosed between """{{""" and """}}""", e.g, {{{({{widthFunction()}},{{heightFunction()}})}}}.
Note: this plugin also includes enhancements to support:
*[[AttachFilePluginFormatters]] (embed image files as text-encoded tiddlers)
* [[ImagePathPlugin]] (fallback locations for missing images)
Please refer to those plugins for details...
{{clear block{}}}
2008.01.19 [1.1.0] added support for evaluated width/height values!!
2008.01.18 [1.0.1] code cleanup plus improved regexp for matching "(width,height)" by eliminating hard-coded recognition of [px,em,cm,in,%] CSS units. Syntax now accepts ANY values for width/height, and leaves it to the browser's CSS processing to handle any invalid values.
2008.01.17 [1.0.0] initial release
version.extensions.imageSize = {major: 1, minor: 1, revision: 0, date: new Date(2008,1,19)};
// replace standard handler for image formatter
// note: includes modifications for [[AttachFilePluginFormatters]] AND [[ImagePathPlugin]]
var f=config.formatters.findByField("name","image");
config.formatters[f].handler=function(w) {
this.lookaheadRegExp.lastIndex = w.matchStart;
var lookaheadMatch = this.lookaheadRegExp.exec(w.source)
if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {
var floatLeft=lookaheadMatch[1];
var floatRight=lookaheadMatch[2];
var XY=lookaheadMatch[3];
var tooltip=lookaheadMatch[4];
var src=lookaheadMatch[5];
var link=lookaheadMatch[6];
// Simple bracketted link
var e = w.output;
if(link) { // LINKED IMAGE
if (config.formatterHelpers.isExternalLink(link)) {
if (config.macros.attach && config.macros.attach.isAttachment(link)) {
// see [[AttachFilePluginFormatters]]
e = createExternalLink(w.output,link);
e.title = config.macros.attach.linkTooltip + link;
} else
e = createExternalLink(w.output,link);
} else e = createTiddlyLink(w.output,link,false,null,w.isStatic);
var img = createTiddlyElement(e,"img");
if(floatLeft) img.align="left"; else if(floatRight) img.align="right"; // FLOAT LEFT/RIGHT
if(XY) { // CUSTOM SIZE with optional EVAL'ED width/height ({{...}},{{...}})
var parts=XY.replace(/[\(\)]/g,'').split(","); var x=parts[0]; var y=parts[1];
if (x.substr(0,2)=="{{") {
} else img.style.width=x;
if (y.substr(0,2)=="{{") {
} else img.style.height=y;
if(tooltip) img.title = tooltip; // TOOLTIP
// GET IMAGE SOURCE (get attachment or resolve fallback path as needed)
if (config.macros.attach && config.macros.attach.isAttachment(src))
src=config.macros.attach.getAttachment(src); // see [[AttachFilePluginFormatters]]
else if (config.formatterHelpers.resolvePath) { // see [[ImagePathPlugin]]
// Note: IE and Safari use onError to call resolvePath() only if initial lookup fails
// (avoids security messages for initial filesystem access)... otherwise, attempt to
// resolve the original path/file before initial rendering
if (config.browser.isIE || config.browser.isSafari) {
return false;
} else
img.src=src; // RENDER IMAGE
w.nextMatch = this.lookaheadRegExp.lastIndex;
If you've made a collection of TiddlyWiki's, for whatever reason, you may find yourself wanting to move tiddlers from one to another. Without further ado, you can simply copy and paste the contents from one to a new tiddler in the other. This works fine for one but would be tedious for many.

The 'official' and more efficient way to do it is this: In the upper right corner of your wiki header it says BackStage. If you click on that a menu will appear across the top. Click on the 'Import' option and browse to the wiki you want to import from. Click Open and a list of the tiddlers at that location will appear. Tick off the ones you want and click Import. Click Done.

This same method is used for importing plugins from other websites. See [[Other Resources]] for a list. Just add their URL to the import box and wait for a list of contents to appear.
I could tell you what I know or I could just jump into a wiki and show you. My first impulse was to make this interactive, but, alas, this is not well-built for collaboration online. MediaWiki, which is used for WikiPedia and WeRelate and such, could get us there, but it's beyond my technical capacity at the moment. Both in computer expertise and required software.

This, what you're looking at right now, is a TiddlyWiki, the single-user version of a wiki. It's an html page and readable and write-able by any browser although, they say, best in Firefox. You'll need javascript enabled. Most people already do. (If not, go [[here|http://www.tranexp.com/win/JavaScript-enabling.htm]] for instructions.) TiddlyWiki makes an excellent organizer. Some people use it for journals, some people make websites with it. I'm finding it perfectly suited to genealogy in a way that linear reports are not. If you're doing anything beyond plain text you need to use some simple wiki formatting and link codes so either you already know how or you have to learn. This is very simple and you can do a lot with a little. Sometimes plugins can make it even simpler. (See [[JLiki Plugins|http://www.jgen.ws/jlikiplugins.html]].) But for starters, there's straight text and you hardly need to know anything.

As you can see, some of the words here have two capital letters in them and they're blue instead of black. These are called WikiWords. If I click on one it will start a new "tiddler" (meaning entry) with that word as the title.
I can make any word into a WikiWord and use it as a starting point to go off on a tangent. So basically wikis are about tangential thinking. How our minds actually work. And, of course, how history works which makes this an ideal vehicle for our ancestors.

I can but I don't have to write in a straight line, what a relief, and you don't have to read in a straight line. Not all WikiWords go anywhere, if I haven't written anything there. It will simply present the Title and the opportunity to write. (Not here, but in your own wiki.)

Clicking on the WikiWords is how you navigate if you don't want to read straight through. Like surfing the web. Of course, right now there's nowhere to go. This is Day One. But try clicking on any of the WikiWords here and see what happens.

If you're the writer of a TiddlyWiki you have two choices. Over to the right of the title in faint grey lettering it says 'edit'. You can't see 'edit' here because this is strictly reader-mode. Either you double-click on the title or click on 'edit' and a box will appear for you to write in. When you're finished click 'done' and the text box closes leaving an entry that looks similar to this.

If you click 'SaveBackups' you also need to define a folder name for the backups in Advanced Options from the menu on the right. They go to My Documents by default so the folder name is whatever comes after that, not the whole file path. 'AutoSave' will overwrite your present version automatically.

Your genealogy wiki can be carried with you on a flash-drive, burned to disk or zipped and mailed online.
|''Description:''|Support for legacy (pre 2.1) strike through formatting|
|''Date:''|Jul 21, 2006|
|''Author:''|MartinBudden (mjbudden (at) gmail (dot) com)|
|''License:''|[[BSD open source license]]|
// Ensure that the LegacyStrikeThrough Plugin is only installed once.
if(!version.extensions.LegacyStrikeThroughPlugin) {
version.extensions.LegacyStrikeThroughPlugin = {installed:true};
name: "legacyStrikeByChar",
match: "==",
termRegExp: /(==)/mg,
element: "strike",
handler: config.formatterHelpers.createElementAndWikify
} //# end of "install only once"
Linking to an image or other file assumes the file exists somewhere your readers can access it. In other words, linking to files on your own computer will only work for you. If you send it to some-one else it will also work for them. As long as you use relative links instead of specific ones, this will work fine. Linking to a file called 'example.txt' on my own computer would look like this:


and be done like this:


If you intend to put your wiki online, linked files have to exist at some external address. If you have your own website, you can upload files there and link to their URL's. Your ISP probably provides you with some free webspace. You could use that to store the photos and other files you want to use in your wiki project. If you don't want to go that route, or don't have your own server, you need to find a file-hosting service. The only site I've ever used to upload files to is <html><a href="https://www.box.com/">Box.</a>

<img src="http://www.ftjcfx.com/te105wquiom7AADACBB798CGHGGA" width="1" height="1" border="0"/></html>I think you can still get 1 GB of space there for free, and 1GB can take you a long way. Look up "free file hosting" (not to be confused with web-hosting service) and try something. I don't have enough experience with this to advise you which would be best. There are many. [[Flickr|http://www.flickr.com/]] for instance for pictures, or [[ImageShack|http://www.imageshack.us/]].

Once you have uploaded a file, it will have its own URL. Copy it into the following code to make a link from your wiki. This is an example of how I would link to an external image. 


and this is the result.


(A note on images: they will appear in your wiki at their actual size, so it's best practice to determine that before you upload them.)

Do likewise for other types of files. Upload them to your file-sharing service and create links to them. Clicking on a link will take the reader directly to the document.


Having uploaded the file to my own website, the code is this:


Linking to external files can have adverse effects in the long run if/when you want to move the files to another location or //have// to move them because your file-hosting service goes under. There are other ways to set yourself up from the start so you don't run into these problems. 

* create a [[Passage Express|https://www.legacyfamilytreestore.com/ProductDetails.asp?ProductCode=PDS]] project using a wiki
* allow others to view your wiki through an FTP server
* build your wiki on a flash-drive or your own hard-drive

I've written about these options in more detail at [[Sharing Your Genealogy Wiki|http://bit.ly/1WLzB8a]].
[[Step 1]]
[[Your Main Menu]]
[[Wiki Colors]]
[[Linking to Files]]
[[Tagging & Searching]]
[[Importing Tiddlers]]
[[Text Options]]
[[Photo Options]]
[[Passage Express]]
[[Other Resources]]
<html><a href="mailto:[beeken.jl@gmail.com]">©JL Beeken</a>
[[TiddlyWiki for the Rest of Us|http://www.giffmex.org/twfortherestofus.html]]
[[Google Groups - TiddlyWiki|http://groups.google.com/group/TiddlyWiki]]
[[CSS Color Chart|http://www.somacon.com/p142.php]]
[[TW Help|http://tiddlyspot.com/twhelp/]]
If you read [[Sharing Your Genealogy Wiki|http://bit.ly/1WLzB8a]] first, I explain how to start your wiki project in [[Passage Express|https://www.legacyfamilytreestore.com/ProductDetails.asp?ProductCode=PDS]] and how to find the file-path to the back-end.

The path to the linked-files folder in my Passage Express project looks like this:

C:\Program Files\Passage Express\Projects\~FHP00013\Files\~FILES00000177

To make a link from a wiki to a file would look like this:
[[Name|file:\\\C:\Program Files\Passage Express\Projects\FHP00013\Files\FILES00000177\file-name]]

This will be similar for you but the numbers will be different. Except for "Name" and "file-name" the file-path will be the same for every single linked file.

Importing and linking web albums is a little different. Use the Import feature inside PE to import a Folder and browse to the location of your web album. After import, look for the "index.html" file and link it appropriately to your wiki. This is the file that fires up the album.

You can also move or copy the album to your linked-files folder in the back-end of PE. It depends if it matters to you whether your readers can see these folders in PE or not. In my case, it would be folder 00000177. When I go back to the top-side of Passage Express there's no sign of this web album but it's still linked into my wiki if I've used the right file-path to it.


The 3 folders listed under 00000177 are all web albums.


All I have to do is link the wiki to their index.html files.

[[Name of Album|file:\\\C:\Program Files\Passage Express\Projects\FHP00013\Files\FILES00000177\Name of folder\index.html
or it might be
[[Name of Album|file:\\\C:\Program Files\Passage Express\Projects\FHP00013\Files\FILES00000177\Name of folder\album\index.html

depending on the location of the index.html in each album.

If you put a button on your Presentation menu that only opens your wiki, everything else is hidden. So your readers don't get into the main presentation area of [[Passage Express|https://www.legacyfamilytreestore.com/ProductDetails.asp?ProductCode=PDS]] looking at your linked-files folder. They're going to be taken directly to the wiki and that's all. Of course, they can open the contents of the disk and root around but it makes it a tiny bit more obscured than it would be on a flash-drive. And of course, you can name the button anything you want.


If you leave your files fully accessible in Passage Express, your readers will have the option of viewing all the photos as a slideshow, including the ones in the web albums. This is not something that would work in a regular folder-tree arrangement on your hard-drive as only one folder will present itself at a time. Since I'd already started my project on a flash-drive, and I wanted to find out how easy it would be to switch it over to [[Passage Express|https://www.legacyfamilytreestore.com/ProductDetails.asp?ProductCode=PDS]], all I did was copy the wiki to folder 00000176 and the entire contents of the linked-files folder on the flash-drive into folder 00000177. Everything's the same except the local file-paths are wrong. These can be changed in seconds by opening the wiki in a text editor and doing a global search and replace.

Your Passage Express project can be burned to a disk or saved to a folder, zipped and sent by <html><a href="https://www.hightail.com/">Hightail</a>.</html>
The options for including photos and other graphics in your wiki are //endless//. *Link pictures directly into your tiddlers. See [[Linking to Files]].

*Link an html page that contains images. This gives you more freedom in your layout, accompanying text and other content. It's easy to do and you can edit your pages at any time.
*Make a web album and link its index page to a tiddler or your Main Menu.

Web albums can be made with most any photo-editing software:

[[Adobe Elements|http://www.adobe.com/products/photoshop-elements.html]]
[[Picasa|http://picasa.google.com/]] [[jAlbum|http://jalbum.net/en/]]

Just because it's called a web album, that doesn't mean you have to put it on the web. It just means it's created in HTML format. Perfect for linking into your wiki.

''Picasa'': The template options are limited. Except for picture size other options are non-existent. It will include any captions you've added to your pictures. If there are no captions it will include the file-names. The poorest of all the choices.

If you want the Mercedes of web album creators, that would probably be [[jAlbum|http://jalbum.net/en/]]. It's compatible with all operating systems. It will import any embedded-captions if you want it to but you can alter them as you like. There are dozens of templates to choose from or you can customize your own. Almost every aspect of your photo album can be tweaked to your specifications. If you're a beginner at this you can create an album in 2 steps or you can go to the max with other options.

Of the others, [[XnView|http://www.xnview.com/]] is best although not everything I would want it to be. Depending on which version you have of [[Adobe Elements|http://www.adobe.com/products/photoshop-elements.html]] you might have good choices for web albums.

If you have your photos organized and tagged you only have to do a quick search to gather up the pictures you want for each album. You'll thank yourself for the time you've spent doing that.

You can also:
*Make a slideshow.
*Print a pdf of a photo collection. [[FastStoneViewer|http://www.faststone.org/FSViewerDetail.htm]] has good options for this. So does [[PhotoMeister|http://www.photomeister.com/]]. If you have your ducks lined up in [[Legacy|http://www.legacyfamilytree.com/]] you can print Scrapbook pages and link them in. Or Family Picture Trees. 

Oh, and remember [[photo collage|http://bit.ly/25j19Xq]]. Your creativity need know no bounds.
@@font-family:verdana;font-size:100%; //creating your own genealogy wiki//@@
@@font-family:georgia;font-size:100%; JLiki@@
|''Description:''|Sparklines macro|
if(!version.extensions.SparklinePlugin) {
version.extensions.SparklinePlugin = {installed:true};
//-- Sparklines
config.macros.sparkline = {};
config.macros.sparkline.handler = function(place,macroName,params)
var data = [];
var min = 0;
var max = 0;
var v;
for(var t=0; t<params.length; t++) {
v = parseInt(params[t]);
if(v < min)
min = v;
if(v > max)
max = v;
if(data.length < 1)
var box = createTiddlyElement(place,"span",null,"sparkline",String.fromCharCode(160));
box.title = data.join(",");
var w = box.offsetWidth;
var h = box.offsetHeight;
box.style.paddingRight = (data.length * 2 - w) + "px";
box.style.position = "relative";
for(var d=0; d<data.length; d++) {
var tick = document.createElement("img");
tick.border = 0;
tick.className = "sparktick";
tick.style.position = "absolute";
tick.src = "data:image/gif,GIF89a%01%00%01%00%91%FF%00%FF%FF%FF%00%00%00%C0%C0%C0%00%00%00!%F9%04%01%00%00%02%00%2C%00%00%00%00%01%00%01%00%40%02%02T%01%00%3B";
tick.style.left = d*2 + "px";
tick.style.width = "2px";
v = Math.floor(((data[d] - min)/(max-min)) * h);
tick.style.top = (h-v) + "px";
tick.style.height = v + "px";
The first thing is to [[download a TiddlyWiki|http://www.tiddlywiki.com/]]. You're just saving the basic template as you see it here. Then double-click it as you would any other file and it will open in your browser window.

In the upper left you will see GettingStarted. Click on that and it will bring up the default tiddlers. 


Click on SiteTitle. That tiddler will open so then click the 'edit' option over to the right of it, type the title you want for your wiki into the box and click 'done'. Don't alter the header, just the contents. Do the same with SiteSubtitle.
MainMenu is where you put tiddler headings as you go along. Whatever you want to have in your left-hand menu. You can leave that for now.

DefaultTiddlers is where you can put the names of tiddlers that you want always showing when you open your TiddlyWiki. All tiddlers can also be searched through the Timeline on the right. And you can search for individual words by using the Search box in the upper right.

Also put in initials or a full name for yourself, in WikiWord style. Two capital letters. Or not. Either way works. All your tiddlers will automatically start with this name.

That's about it to get started. Now you've got your own non-linear journal to be used for any subject you want. You just need to write into it. Nobody else can see what you're doing unless you post your page online or send it to some-one by email, CD, flash-drive or what have you. [[TiddlySpot|http://tiddlyspot.com/]] will host your wiki for free if you do want yourself online. You can also go over there, click on Gallery and see what other people are doing.
body { font-family: verdana; font-size: 0.8em;}
#mainMenu {
background-color: #F7F7F7
By now, you may be envisioning how to make your family history wiki. There's no set way to do this. If you haven't already, you can jump right in and begin. I'll give you a for-instance. My first entry might be telling what I know about my grandmother. I click New Tiddler, give it a name and start writing. I can write off the top of my head for awhile, then bring in a photo, link up a chart produced by [[Legacy|http://www.legacyfamilytree.com/?Click=135660]] or add a map. If I have a slideshow already made I can link that in. If I've already written stories elsewhere I can copy and paste them direct. The possibilities are endless, as much or as little as I like, and it doesn't matter if it's all done at once. Anytime I want I can come back and edit this piece. I could also write bits and pieces as separate tiddlers. They don't have to be connected. Your preference. If you do write them sporadically you always have the choice later to paste them together into one. If I only have one for my grandmother I would likely add her as an item in my MainMenu.

Later, I will probably write another piece about her parents and likely mention her there as well. Chances are she'll come up again and again in other peoples' tiddlers. How will I know where to find everything I have on this one person? One way is to use the Search box in the upper right. Searching her name there will bring up all related tiddlers with her name highlighted. If I'm looking for a specific one this narrows my search. If I just want to read everything I have written about her, this is how to bring it altogether on one screen. This is also where tagging comes in handy. Along the bottom edge of each tiddler editing box, there's a smaller area for adding tags.


Tags are added with spaces in between, not commas. If the keyword has spaces, such as 'Florence L. Wilke' it's written between double-square brackets. If the tag has been used before it's in a drop-down list under "tags" to save you having to re-type it. Tags can be added for anything you like although the most obvious would be people, places and events. Once tags are added they will show up in the tags box next to the tiddler. Any tag can be clicked on and this will immediately bring up all tiddlers using that tag. 


As you can see, this would make the complex non-linear nature of a family history much easier to navigate and understand. I already have a convoluted map of my ancestors in my mind from repeated exposure over years. A family member who's hearing it for the first time, or even the 10th, hardly retains a thing (I've found.) Just imagine one of them reading through and thinking Charles Cooke, Charles Cooke, Charles Cooke, I know I've heard that name before... All they have to do is click on the 'Charles Cooke' tag and all the tiddlers containing his name as a tag will appear in order on the screen. In this way, they can easily see the myriad connections with many others in the story.

A 'Tags' list can also be accessed from the index on the right. The tags are in alphabetical order showing the number of and a list of the tiddlers they've been attached to. Tags are not written in stone so add and subtract as you please.
What I'm finding as I go along with my own Family History wiki is that tiddlers are better suited to short entries. This not in any way a requirement but I find it's easier to link files and edit on the fly if each piece is short.

When I was rambling on about my grandmother, I'd written an encyclopedia before I knew it. So, there's a couple of things that can be done here. One is to break up a person's life by decade, or by major life-cycles; pre-marriage years, marriage years, etc or by specific life events that you want to tell stories about.

To make it even quicker to navigate, keep your writing in the wiki to a minimum and link in other files. Write a short piece in a tiddler, then put the rest of the story, photographs, etc on a linked page or several pages.

If you're linking stories from [[Legacy|http://www.legacyfamilytree.com/]] or some other database, .rtf documents do not display well in a browser. So, this leaves plain text, html pages, pdf's and the major word-processor formats.

An html page works beautifully as a linked page, being in its own element here. Cruising around in your wiki is essentially the same as surfing the web. The wiki is an html page and if you connect it to others, you've made a website of sorts. The difference is that you're //not on the web// and you can choose your audience. If you've never made an html page before, all you need is [[Kompozer|http://www.kompozer.net/]] and it's free. It's a WYSIWYG editor so somewhat like a word-processor. You can just type text in on a white background or you can go to the max with CSS if you know how. It's up to you. Here's a simple 


If that seems beyond you, you don't even need it. You can construct a page in a word processor and then save or export it as html. Then link it to your wiki and you're ready to move on to your next segment.

The plan I like best is to build my Family History wiki on my own hard-drive, so when I want to edit a page I just go to the folder where I keep all the linked files and edit it there. The file-path to the wiki stays the same.
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler > fields syncing permalink references jump'></div>
<div class='title' macro='view title'></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>
Wikis make it easy for anyone to assemble and present their family history. ''JLiki'' is a lightweight application of [[TiddlyWiki Classic|http://classic.tiddlywiki.com/]] used to compile family history. Learn some basic formatting, build a core and then link stories, photos and documents.

This type of wiki is not intended for online collaboration as some genealogy wikis are. It's simply another way to share family history with the people we choose to. They can just enjoy our efforts or add to the wiki and send it back. All of our usual charts & reports can be included as well as photographs of any size, slideshows, etc. This requires no special software, only the free download of a blank [[TiddlyWiki|http://classic.tiddlywiki.com/]]. (282 KB)

<html><center><img style="border: 1px solid;" src="http://bit.ly/1Q8cCfk"></center></html>

The magic of wikis is in their non-linear design. People and stories are looped together through the use of tagging and WikiWords. By linking documents, the size of the wiki stays nearly unchanged and will continue loading quickly in your browser.

[[TiddlyWiki|http://classic.tiddlywiki.com/]] can be used for any type of collection or journal, so the basic techniques shown here will serve for any use you want to make of it.

!!Step-by-step instructions are available at [[JLog-Sharing Files|https://jlbeeken.blogspot.ca/p/jlog-sharing-files.html]]
*&nbsp;~JLiki 1 - downloading ~TiddlyWiki &amp; enabling Javascript
*&nbsp;~JLiki 2 - ~TiddlyWiki settings &amp; backups
*&nbsp;~JLiki 3 - ~SiteTitle, ~SiteSubtitle &amp; ~ColorPalette
*&nbsp;~JLiki 4 - ~MainMenu, ~TiddlyWiki formatting
*&nbsp;~JLiki 5 - ~WikiWords, tiddlers &amp; tags
*&nbsp;~JLiki 6 - tiddler composition &amp; tags
*&nbsp;~JLiki 7 - tiddlers, ~WikiWords &amp; tags (again)
*&nbsp;~JLiki 8 - linking images
*&nbsp;~JLiki 9 - linking multimedia files
*~JLiki 10 - ~TiddlyWiki plugins

If you're using a recent version of Firefox, you'll need the [[TiddlyFox|https://addons.mozilla.org/en-US/firefox/addon/tiddlyfox/?src=ss" target="_blank"]] add-on (or some other solution) to be able to save changes to any wiki on your local drive.

<html><center><img style="width: 50px; height: 50px;" src="http://bit.ly/1Km6yDv"</center></html>
If you don't want your wiki looking like every other TiddlyWiki on the block, and who would, you can go all out with your ColorPalette tiddler (under More/Shadowed) changing the color of everything on the page. If things go horribly wrong, don't panic. Your color settings will revert to default as long as you don't click "save changes." If you blow that, you can delete the ColorPalette tiddler. You're really only deleting a copy of it, and as soon as you click the Refresh button in your browser the original will reappear. Don't be put off by the code that looks like this:

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

The 3 digit codes stand for colors and are CSS shorthand for the usual 6. Either one works. //What// they stand for you'll find out as soon as you start changing them.

You can find the codes for hundreds of colors at <html><a href="http://www.somacon.com/p142.php">CSS Color Chart</a></html>.
Assuming you've made some tiddlers and want to create a menu for them, here's how to do that. Click on your MainMenu tiddler which you'll find either under GettingStarted or More/Shadowed in the right-side column.
A WikiWord doesn't need any special code as it's automatically linked to the tiddler with that name. Put double-square brackets around any title that is not a WikiWord.

[[Like This]]
As you add more tiddlers, you simply add their titles to your MainMenu.
[[Item One]]
[[Item Two]]
[[Item Three]]
and they would look like this:
[[Item One]]
[[Item Two]]
[[Item Three]]
This set are all WikiWords so they just are what they are and look like this:

You don't have to add all your tiddlers to the MainMenu as both a timeline and an alphabetical listing are automatically created in the right-side index.