TiddlyWikiTutorial - Learn the Basics of TiddlyWiki

In addition to the built-in macros, you can also create your own macros. Although teaching ~JavaScript is outside of the scope of this wiki, I can show you how to import scripts written by others. As an example, here's a smiley macro from [[AlanH|http://www.personal.psu.edu/staff/a/c/ach12/tiddlywiki/smiley.htm]]:\n\n<<smiley :-D>>\n\nHere's the code in this tiddler that creates that happy guy up there:\n\n{{{\n<<smiley :-D>>\n}}}\n\nHere's how I added the [[smiley]] macro to this wiki:\n#First, I created a new tiddler entitled [[smiley]].\n#Then, I copied the smiley macro from ~AlanH's site and pasted it into my new tiddler. \n#After that, I [[tagged|Tags]] the tiddler with the systemConfig tag\n#Finally, I saved changes and reloaded the wiki.

[[Welcome]]\nNewFeatures\nWhereToFindHelp

One of the best features of TiddlyWiki is that it's very portable. To save this entire wiki to your hard drive, right click [[here|#]] and click 'Save link as...' or 'Save target as...'. \n\nYou have now downloaded the entire tutorial in just one file. Every [[Tiddler]], all of the style information, and all of the javascript program that makes the site work is contained in a single HTML file. No databases. No complicated file structures. Just one file.\n\nThe only exception to the one-file rule is images, which you can learn more about in HowToEmbedImages.\n\nYou can carry this around with you as a [[WikiOnAStick|http://www.tiddlywiki.com/#WikiOnAStick]]. After you modify it, you can upload this one file as your own personal webpage without having to go through complicated installation procedures. \n\nNow that you've downloaded your own copy of TiddlyWiki, you can now find out HowToSaveYourChanges. \n\nIf you want to start with just a blank copy of the latest version of TiddlyWiki, right-click [[here|http://www.tiddlywiki.com/empty.html]] and click 'Save link as...' or 'Save target as...'.

Double click on this entry. This will bring you into Editing Mode. Type whatever you want to in the large text box, then move your mouse next to the title of this tiddler and click "done".\n\nIsn't that cool?\n\nNow, if you want to know HowToSaveYourChanges, you'll have to save the TiddlyWiki to your hard drive. Find out how in EasyToCarry.\n\nYou can also learn \n*HowToMakeATiddler\n*HowToFormatText\n*HowToEmbedImages\n*HowToMakeLists\n*HowToMakeTables\n*HowToCreateSubheadings.\n*HowToUseBlockquotes\n*HowToAddAHorizontalLine\n*HowToDewikifyAWikiWord\n*[[HowToAddMonospacedText|MonospacedText]]\n*HowToMakeExternalLinks\n*[[HowToTagATiddler|Tags]]\n*[[HowToAddAMacro|Macros]]\n*[[HowToChangeAMenuOrTheSiteTitle|SpecialTiddlers]]\n*HowToFormatThePage

The gradient macro allows you to use gradients in your TiddlyWikis without resorting to the use of images. You can pick any number of colors and also select whether the gradient will move vertically or horizontally.\n\n!Code\nThe generic usage looks like:\n{{{\n<<gradient vert/horiz colors>>text>>\n}}}\n\nTwo examples:\n{{{\n<<gradient vert #ffff00 #0000ff #000000 #00ffff>>color:white;text-align:center;four colors vertically>>\n<<gradient horiz #0000ff #000000 #00ffff>>color:white;text-align:center;three colors horizontally>>\n}}}\n\n!Execution\n<<gradient vert #ffff00 #0000ff #000000 #00ffff>>color:white;text-align:center;four colors vertically>>\n<<gradient horiz #0000ff #000000 #00ffff>>color:white;text-align:center;three colors horizontally>>

Need a dividing line? Type four hyphens in a row on a line by themselves.\n----\nThat'll keep your sheep and goats separated.\n\nHere's the ridiculously simple code to create that line:\n{{{\n----\n}}}

Let's say that, for some reason, you need to have a single Tiddler with multiple headings. Put the headings on lines by themselves and add an exclamation point (!) at the beginning of the line. If you want a subheading, use two exclamation points, like so:\n\n!Heading1\n!!Subheading1\n!!!Subsubheading1\n\nHere's the code for the above stack of subheadings:\n{{{\n!Heading1\n!!Subheading1\n!!!Subsubheading1\n}}}

"But!" you interrupt, "what if I want to use mixed case and //not// create a tiddler, like if I'm talking about ~JavaScript?" Easy: Just precede the word with a single tilde (~). \n\n{{{\n~JavaScript\n}}}

An embedded image looks like this:\n\n[img[Dog shakes hand with soldier|http://www.blogjones.com/Images/dogsoldier.jpg][http://www.blogjones.com/Images/dogsoldier.jpg]]\n\nHere's how the code works:\n{{{\n[img[alternate text|filename or URL][link]]\n}}}\n\nThe Alternate Text and Link parameters are optional. You can use just {{{img[filename]}}} if you want, although it is better to include alternate text in case the image does not load for some reason.\n\n[>img[Same dog, floating right|http://www.blogjones.com/Images/dogsoldier.jpg][http://www.blogjones.com/Images/dogsoldier.jpg]You can also set images to float to the left or the right of the text in your tiddler by using {{{[<img[...]}}} to float left or {{{[>img[...]}}} to float right. \n\nTwo notes about using images:\n#First, if you add images to the wiki, the wiki becomes less portable--you have to make sure that the wiki can get to the images you link to. \n#Second, it's considered rude to "hotlink" images on other people's servers. Don't just directly link to someone else's image; download it onto your computer and upload it back to your own server or to a free image host like [[Image Shack|http://www.imageshack.us/]].

TiddlyWiki supports all kinds of formatting options:\n*You can create ''Bold'' text by enclosing it in pairs of single quotes:\n{{{\n''bold text''\n}}}\n\n*You can create ==Strikethrough== text by enclosing it in pairs of equal signs:\n{{{\n==strikethrough text==\n}}}\n\n*You can __Underline__ text by enclosing it in pairs of underscores:\n{{{\n__underlined text__\n}}}\n\n*You can create //Italic// text by enclosing it in pairs of forward slashes:\n{{{\n//italic text//\n}}}\n\n*You can create ^^superscript^^ text by enclosing it in pairs of carets:\n{{{\n^^superscript text^^\n}}}\n\n*You can create ~~subscript~~ text by enclosing it in pairs of tildes:\n{{{\n~~subscript text~~\n}}}\n\n*You can @@highlight text@@ by enclosing it in pairs of at-signs.\n{{{\n@@highlighted text@@\n}}}\n\n*You can also change many other CSS attributes by adding arguments to the highlight command. For example, you can change the text color to @@color:red;red@@ or give it a background-color of @@background-color:#0000FF;color:white;blue@@.\n{{{\n@@CSS attributes separated by semicolons;text@@\n}}}\n\nYou can find out more about CSS from the excellent [[w3schools tutorial|http://w3schools.com/css/default.asp]].\n\n*Finally, you can add new CSS classes to the Tiddlywiki so that you can style a number of items with the same CSS formatting. Simply add the new class to the StyleSheet [[ShadowTiddler|ShadowTiddlers]], such as:\n{{{\n.moveover{\nmargin-left:120px;\n}\n}}}\nThen, when you want to use that CSS class, use the following formatting:\n{{{\n{{classname{text to be formatted}}}\n}}}\n{{moveover{So, for example, this paragraph has been formatted using the moveover CSS class.}}}

You are by no means confined to this standard blue and white TiddlyWiki style. It's fairly easy to restructure and reformat this page to meet your needs if you know a little CSS and HTML. (If you don't know CSS and HTML, now's a great time to learn. Check out http://www.w3schools.com for more information on those topics.)\n\nAll you have to do to alter the style and structure of this page is to change a few ShadowTiddlers. The primary ones you're going to be interested in are the following:\n*PageTemplate -- Contains the overall structure of the page, including the gradient macro for the masthead.\n*EditTemplate -- Contains the structure and order of the tiddler editor screen\n*ViewTemplate -- Contains the structure and order of the tiddler view screen\n*StyleSheetColors -- Contains the CSS for the colors used by the TiddlyWiki\n*StyleSheetLayout -- Contains the CSS for the layout of the TiddlyWiki\n*StyleSheetPrint -- Contains the CSS used when printing from the TiddlyWiki\n\n!Example\nSo, let's say for example that you want the tag list to appear below your tiddlers instead of floating to the right of them. This is the process that you'd follow:\n\n1. Open the "StyleSheetLayout" tiddler\n2. Edit this tiddler and scroll down to the line marked "{{{.tagged {}}}"\n3. Delete the "{{{float:right;}}}" from this CSS class.\n4. Add the following code to the tiddler:\n{{{\n.tagged li, .tagged ul {\ndisplay:inline;\n}\n}}}\n5. Click "Done" and close the StyleSheetLayout tiddler.\n6. Open and edit the "ViewTemplate" tiddler\n7. Move the line marked "{{{<div class='tagged' macro='tags'></div>}}}" to the end of the list.\n8. Click "Done" and close the ViewTemplate tiddler\n9. [[Save you changes|HowToSaveYourChanges]] and refresh the page. Your tags should now be after each post and on a single line.

I'm sure you've noticed by now that there are a lot of places where words are stuck together, like HowToMakeATiddler or EasyToEdit. Here's the reason for that: Whenever you type in a word that's mixed case (also known as a WikiWord), TiddlyWiki will automatically create a link to a [[Tiddler]] with that title. \n\nTry it! Doubleclick on this [[Tiddler]] to go into editing mode and put a few words together in the space below. When you've got a WikiWord made up, click "done."\n\n----\n\n----\n\nSee how TiddlyWiki automatically converted your WikiWord into an italicized link? Click on it. \n\nYou should see a new [[Tiddler]] with your WikiWord as the title and the words "This tiddler doesn't yet exist. Double-click to create it" underneath it. If you double click, write something in the text box, and click "done", a new [[Tiddler]] will be created with the title you've given it. Now if you write that same WikiWord in any other [[Tiddler]], TiddlyWiki will automatically create a link to that same entry.\n\n"But," you say, "what if I want to make a tiddler that's just one word? Or one that doesn't use mixed case?" Open up editing mode, and enclose the word you want to turn into a tiddler in double brackets, like these:\n{{{\n[[Non-Wiki Word or Phrase]]\n}}}\n<<tiddler HowToDewikifyAWikiWord>>\nThat's all there is to it.

You aren't restricted to only linking to your own tiddlers: Here's how you link to something offsite, like the [[TiddlyWiki Home Page|http://www.tiddlywiki.com]].\n\n{{{\n[[text|url]]\n}}}

Lists are one of the easiest things to do in TiddlyWiki, and that's saying a lot. Put an asterisk (*) at the beginning of any line you want added to a bulleted list. If you use two or three asterisks, you'll create second and third level bullets. Like this:\n\n*Entry One\n**Sub-entry A\n***Sub-sub-entry i\n***Sub-sub-entry ii\n**Sub-entry B\n*Entry Two\n*Entry Three\n\nHere's the code for the above list:\n\n{{{\n*Entry One\n**Sub-entry A\n***Sub-sub-entry i\n***Sub-sub-entry ii\n**Sub-entry B\n*Entry Two\n*Entry Three\n}}}\n\nNumbered lists are pretty easy too: Just use number signs (#'s) instead of asterisks:\n\n#Entry One\n##Sub-entry A\n###Sub-sub-entry i\n###Sub-sub-entry ii\n##Sub-entry B\n#Entry Two\n#Entry Three\n\nAnd, once again, here's the code:\n\n{{{\n#Entry One\n##Sub-entry A\n###Sub-sub-entry i\n###Sub-sub-entry ii\n##Sub-entry B\n#Entry Two\n#Entry Three\n}}}

You can create a table by enclosing text in sets of vertical bars (||, or shift-backslash on your keyboard). \n|!Headings: add an exclamation point (!) right after the vertical bar.|!Heading2|!Heading3|\n|Row 1, Column 1|Row 1, Column 2|Row 1, Column 3|\n|>|>|Have one row span multiple columns by using a >|\n|Have one column span multiple rows by using a ~|>| Use a space to right-align text in a cell|\n|~|>| Enclose text in a cell with spaces to center it |\n|>|>|bgcolor(lightgreen):Add color to a cell using bgcolor(yourcolorhere):|\n|Add a caption by ending the table with a vertical bar followed by a c|c\n\nHere's the code for the above table:\n{{{\n|!Headings: add an exclamation point (!) right after the vertical bar.|!Heading2|!Heading3|\n|Row 1, Column 1|Row 1, Column 2|Row 1, Column 3|\n|>|>|Have one row span multiple columns by using a >|\n|Have one column span multiple rows by using a ~|>| Use a space to right-align text in a cell|\n|~|>| Enclose text in a cell with spaces to center it |\n|>|>|bgcolor(lightgreen):Add color to a cell using bgcolor(yourcolorhere):|\n|Add a caption by ending the table with a vertical bar followed by a c|c\n}}}

You can most easily save changes if you're using Firefox or Internet Explorer: Safari and Opera can be used, with some [[caveats|http://www.tiddlywiki.com/#Safari%20Opera]]. Also, if you're using Internet Explorer on Windows XP you might run into [[ServicePack2Problems|http://www.tiddlywiki.com/#ServicePack2Problems]]. Your best option is to use Firefox.\n\nIn order to save your changes, you ''have to have a copy of TiddlyWiki saved on your hard drive''. Find out how to get your copy in EasyToCarry. \n# Once you have a copy of TiddlyWiki, open it in your browser.\n# Click the 'options' button on the right and set your username.\n# [[Edit|EasyToEdit]], [[create|HowToMakeATiddler]] and delete as many tiddlers as you want.\n# Click the 'save changes' button on the right to save your changes \n** Note that Firefox will give you as many as three security warnings. It's OK, just click Allow or check the "don't warn me again" box.\n# TiddlyWiki will make a backup copy of the existing file, and then replace it with the new version.\n

If you want to quote a long passage of someone else's work, you'll need blockquotes. At the line before the passage begins, add three less-than signs (<<<). On the line after the passage ends, add three more less-than signs. Like so:\n\n[[Bill Whittle|http://www.ejectejecteject.com/archives/000091.html]] said:\n\n<<<\nWe need a map. Several are for sale. How do we choose?\n\nWell, it seems like a good idea to choose the map that best conforms to the coastline we see unveiling before us. We choose the map that best fits the territory. We choose the map that best matches ''reality'' – the objective, external, indisputable reality of bays and promontories, capes and gulfs and rivers and shoals.\n\nWe can, indeed, lay out competing philosophies on the table, and see where each conforms to reality and where it does not. No maps are without distortions; none of these are likely to be, either. And one map may conform perfectly to the coastline in one area, and be dreadfully amiss in another. We can cut and paste them as we wish. This is too important for us to be arguing about who is right – all our energies must go to //getting it// right.\n\nAnd before we start, we must agree to one thing, and one thing only: we will never be so full of arrogance and blinded by pride that we dare confront a place where the map does not match the coastline, and proclaim that ''the coastline must be wrong.''\n\nNavigation by means of reason and logic, taking sightings from historical landmarks and always keeping the firm hand of common sense on the wheel, can steer us clear of these dangerous and confusing times. This sort of thinking, what is essentially scientific thinking, is a new tool, relatively speaking. It is a powerful tool, one that makes powerful demands of us, asking us to forgo pride and ego and preconception. It asks us, as blind men and women in the darkness of the present, to walk into the future not by closing our eyes and glibly imagining a map that is to our liking, but rather to learn to navigate like bats and dolphins, pinging our surroundings, interrogating nature and history at every turn, finding fixed points of reference that we can use to triangulate where we are and where we are headed. \n<<<\n\nHere's the code for a blockquote:\n\n{{{\n<<<\nQuoted text.\n<<<\n}}}

Macros are one of the most powerful features Jeremy Ruston has added to TiddlyWiki. With it, you can add new features to TiddlyWiki without hacking into the source code. Several macros are preinstalled with TiddlyWiki by default, and many others are available on del.icio.us, tagged as [[TiddlyWikiPlugin|http://del.icio.us/tag/tiddlywikiplugin]]. Several TiddlyWiki macro repositories can be found [[here|http://del.icio.us/tag/tiddlywikiplugin]].\n\nThe following is a list of the macros that come preinstalled with TiddlyWiki.\n{{moveover{\n*[[today]]\n*[[tag]]\n*[[newJournal]]\n*[[newTiddler]]\n*[[tiddler]]\n*[[slider]]\n*[[version]]\n*[[list]]\n*[[tabs]]\n*[[Sparklines]]\n*[[GradientMacro]]\n*[[TaggingMacro]]\n*[[ToolbarMacro]]\n}}}\nIt's also easy to add [[CustomMacros]].

[[Welcome]] TiddlyWikiTutorial EasyToCarry EasyToEdit\n\n[[RSSFeed|http://www.blogjones.com/TiddlyWikiTutorial.xml]]\n\n<<newTiddler>>\n\nTiddlyWiki\n© [[osmosoft|http://www.osmosoft.com]] 2005\n\nTutorial\n© ~JeremyH\n@ [[Blog Jones|http://www.blogjones.com/WordPress/]]

<<<\nMicroContent being a fashionable word for self-contained fragments of content that are typically smaller than entire pages. Often MicroContent is presented via some kind of aggregation that reduces the perceptual shock and resource cost of context switching (eg Blogs aggregating several entries onto a page or Flickr presenting photos in an album). This TiddlyWiki aggregates MicroContent items that I call 'tiddlers' into pages that are loaded in one gulp and progressively displayed as the user clicks hypertext links to read them.\n<<<\n\n''--[[Jeremy Ruston|http://www.tiddlywiki.com/#JeremyRuston]]'', creator of TiddlyWiki.

Missing tiddlers are ones that have been linked to, but don't have anything in them yet. Use this feature to see what tiddlers you need to work on. It can be found under the More tab in the sidebar.

In monospaced text, also known as non-proportional text, all the characters are of an equal width. So while in a normal font, i is thinner than W is, in {{{monospaced text, i and W are the same width}}}. It is primarily used in programming manuals and sites to identify blocks of code. \n\nAlso, <<tag Formatting>> and [[macros|Macros]] that are in a monospaced block are not executed. For example:\n\n{{{\n<<today>>\n}}}\n\nTo add a monotype text block, enclose the text in triple squiggly-brackets: \n{{{\n{{{This is monotype}}}\n}}}

In the several months since I last updated this tutorial, several new features have been added to TiddlyWiki. Among these are:\n*Some new [[Macros]]\n*ShadowTiddlers\n*A [[Powerful New Page Formatting System|HowToFormatThePage]]

A lot has happened since the last revision of this wiki; many new features have been added to an already great product that make it even more flexible than before. \n\n*[[Tags]]\n*[[MissingTiddlers]]\n*[[Orphans]]\n*[[SpecialTags]]\n*MonospacedText\n*[[Macros]]

<<<\nTo make a tiddler that doesn't have a WikiWord as it's name, you can enclose the name in [[double square brackets]] - edit this tiddler to see an example. After saving the tiddler you can then click on the link to create the new tiddler. NonWikiWordLinks permits tiddlers to be created with names that are made from character sets that don't have upper and lower case.\n<<<\n\n''--[[Jeremy Ruston|http://www.tiddlywiki.com/#JeremyRuston]]'', creator of TiddlyWiki.

Orphans are tiddlers that have been created, but that aren't linked to in any other tiddlers. You can find a list of these under the "More" tab in the sidebar.

<<<\nShadowTiddlers are special tiddlers that have default values that take over if they are undefined or deleted. For example, PageTemplate and StyleSheetColors are both shadow tiddlers.\n\nShadowTiddlers make it harder to render a TiddlyWiki inoperative by accidentally deleting something important. You can see a list of shadow tiddlers in the Shadowed tab under the More tab in the right hand column. When you create a tiddler with the same title you override the underlying shadow tiddler. \n<<<\n''--[[Jeremy Ruston|http://www.tiddlywiki.com/#JeremyRuston]]'', creator of TiddlyWiki.\n\nThe following is a list of all the ShadowTiddlers in this TiddlyWiki: \n<<list shadowed>>\nBasically, if there is a tiddler with any of the above titles, it will override the [[ShadowTiddler|ShadowTiddlers]]'s default behavior.

Learn the Basics of TiddlyWiki

TiddlyWikiTutorial

http://www.blogjones.com/TiddlyWikiTutorial.html

Sparklines are used to create nifty little in-line bar graphs.\n\n!Code\n{{{\n<<sparkline 163 218 231 236 232 266 176 249 289 1041 1835 2285 3098 2101 1755 3283 3353 3335 2898 2224 1404 1354 1825 1839 2142 1942 1784 1145 979 1328 1611>>\n}}}\n\n!Execution\n<<sparkline 163 218 231 236 232 266 176 249 289 1041 1835 2285 3098 2101 1755 3283 3353 3335 2898 2224 1404 1354 1825 1839 2142 1942 1784 1145 979 1328 1611>>

Not only can tags be used to organize tiddlers, but some <<tag SpecialTags>> also have various interesting effects on how tiddlers behave, such as by excluding the tiddler from the sidebar or the search results. \n\nSimply add the desired special tag to the tiddler's [[tags|Tags]] list.

MainMenu contains all the links in the MainMenu bar on the left side of this page.\nSiteTitle and SiteSubtitle are pretty self explanatory.\nDefaultTiddlers is used to store the titles of the tiddlers that are shown at startup. \n\nAny of these can be edited with the changes taking effect immediately.

/***\nPlace your custom CSS here\n***/\n/*{{{*/\n.moveover{\nmargin-left:120px;\n}\n/*}}}*/\n

/***\n!Sections in this Tiddler:\n*Generic rules\n**Links styles\n**Link Exceptions\n*Header\n*Main menu\n*Sidebar\n**Sidebar options\n**Sidebar tabs\n*Message area\n*Popup\n*Tabs\n*Tiddler display\n**Viewer\n**Editor\n*Misc. rules\n!Generic Rules /%==============================================%/\n***/\n/*{{{*/\nbody {\n font-size: .75em;\n font-family: arial,helvetica;\n position: relative;\n margin: 0;\n padding: 0;\n}\n\nh1,h2,h3,h4,h5 {\n font-weight: bold;\n text-decoration: none;\n padding-left: 0.4em;\n}\n\nh1 {font-size: 1.35em;}\nh2 {font-size: 1.25em;}\nh3 {font-size: 1.1em;}\nh4 {font-size: 1em;}\nh5 {font-size: .9em;}\n\nhr {\n height: 1px;\n}\n\na{\n text-decoration: none;\n}\n\nol { list-style-type: decimal }\nol ol { list-style-type: lower-alpha }\nol ol ol { list-style-type: lower-roman }\nol ol ol ol { list-style-type: decimal }\nol ol ol ol ol { list-style-type: lower-alpha }\nol ol ol ol ol ol { list-style-type: lower-roman }\nol ol ol ol ol ol ol { list-style-type: decimal }\n/*}}}*/\n/***\n''General Link Styles'' /%-----------------------------------------------------------------------------%/\n***/\n/*{{{*/\n.externalLink {\n text-decoration: underline;\n}\n\n.tiddlyLinkExisting {\n font-weight: bold;\n}\n\n.tiddlyLinkNonExisting {\n font-style: italic;\n}\n\n/* the 'a' is required for IE, otherwise it renders the whole tiddler a bold */\na.tiddlyLinkNonExisting.shadow {\n font-weight: bold;\n}\n/*}}}*/\n/***\n''Exceptions to common link styles'' /%------------------------------------------------------------------%/\n***/\n/*{{{*/\n\n#mainMenu .tiddlyLinkExisting, \n#mainMenu .tiddlyLinkNonExisting,\n#sidebarTabs .tiddlyLinkExisting,\n#sidebarTabs .tiddlyLinkNonExisting{\n font-weight: normal;\n font-style: normal;\n}\n\n/*}}}*/\n/***\n!Header /%==================================================%/\n***/\n/*{{{*/\n\n.header {\n position: relative;\n}\n\n.header a:hover {\n background: transparent;\n}\n\n.headerShadow {\n position: relative;\n padding: 4.5em 0em 1em 1em;\n left: -1px;\n top: -1px;\n}\n\n.headerForeground {\n position: absolute;\n padding: 4.5em 0em 1em 1em;\n left: 0px;\n top: 0px;\n}\n\n.siteTitle {\n font-size: 3em;\n}\n\n.siteSubtitle {\n font-size: 1.2em;\n}\n\n/*}}}*/\n/***\n!Main menu /%==================================================%/\n***/\n/*{{{*/\n#mainMenu {\n position: absolute;\n left: 0;\n width: 10em;\n text-align: right;\n line-height: 1.6em;\n padding: 1.5em 0.5em 0.5em 0.5em;\n font-size: 1.1em;\n}\n\n/*}}}*/\n/***\n!Sidebar rules /%==================================================%/\n***/\n/*{{{*/\n#sidebar {\n position: absolute;\n right: 3px;\n width: 16em;\n font-size: .9em;\n}\n/*}}}*/\n/***\n''Sidebar options'' /%----------------------------------------------------------------------------------%/\n***/\n/*{{{*/\n#sidebarOptions {\n padding-top: 0.3em;\n}\n\n#sidebarOptions a {\n margin: 0em 0.2em;\n padding: 0.2em 0.3em;\n display: block;\n}\n\n#sidebarOptions input {\n margin: 0.4em 0.5em;\n}\n\n#sidebarOptions .sliderPanel {\n margin-left: 1em;\n padding: 0.5em;\n font-size: .85em;\n}\n\n#sidebarOptions .sliderPanel a {\n font-weight: bold;\n display: inline;\n padding: 0;\n}\n\n#sidebarOptions .sliderPanel input {\n margin: 0 0 .3em 0;\n}\n/*}}}*/\n/***\n''Sidebar tabs'' /%-------------------------------------------------------------------------------------%/\n***/\n/*{{{*/\n\n#sidebarTabs .tabContents {\n width: 15em;\n overflow: hidden;\n}\n\n/*}}}*/\n/***\n!Message area /%==================================================%/\n***/\n/*{{{*/\n#messageArea {\nposition:absolute; top:0; right:0; margin: 0.5em; padding: 0.5em;\n}\n\n*[id='messageArea'] {\nposition:fixed !important; z-index:99;}\n\n.messageToolbar {\ndisplay: block;\ntext-align: right;\n}\n\n#messageArea a{\n text-decoration: underline;\n}\n/*}}}*/\n/***\n!Popup /%==================================================%/\n***/\n/*{{{*/\n.popup {\n font-size: .9em;\n padding: 0.2em;\n list-style: none;\n margin: 0;\n}\n\n.popup hr {\n display: block;\n height: 1px;\n width: auto;\n padding: 0;\n margin: 0.2em 0em;\n}\n\n.popup li.disabled {\n padding: 0.2em;\n}\n\n.popup li a{\n display: block;\n padding: 0.2em;\n}\n/*}}}*/\n/***\n!Tabs /%==================================================%/\n***/\n/*{{{*/\n.tabset {\n padding: 1em 0em 0em 0.5em;\n}\n\n.tab {\n margin: 0em 0em 0em 0.25em;\n padding: 2px;\n}\n\n.tabContents {\n padding: 0.5em;\n}\n\n.tabContents ul, .tabContents ol {\n margin: 0;\n padding: 0;\n}\n\n.txtMainTab .tabContents li {\n list-style: none;\n}\n\n.tabContents li.listLink {\n margin-left: .75em;\n}\n/*}}}*/\n/***\n!Tiddler display rules /%==================================================%/\n***/\n/*{{{*/\n#displayArea {\n margin: 1em 17em 0em 14em;\n}\n\n\n.toolbar {\n text-align: right;\n font-size: .9em;\n visibility: hidden;\n}\n\n.selected .toolbar {\n visibility: visible;\n}\n\n.tiddler {\n padding: 1em 1em 0em 1em;\n}\n\n.missing .viewer,.missing .title {\n font-style: italic;\n}\n\n.title {\n font-size: 1.6em;\n font-weight: bold;\n}\n\n.missing .subtitle {\n display: none;\n}\n\n.subtitle {\n font-size: 1.1em;\n}\n\n/* I'm not a fan of how button looks in tiddlers... */\n.tiddler .button {\n padding: 0.2em 0.4em;\n}\n\n.tagging {\nmargin: 0.5em 0.5em 0.5em 0;\nfloat: left;\ndisplay: none;\n}\n\n.isTag .tagging {\ndisplay: block;\n}\n\n.tagged {\nmargin: 0.5em;\nfloat:right;\n}\n\n.tagging, .tagged {\nfont-size: 0.9em;\npadding: 0.25em;\n}\n\n.tagging ul, .tagged ul {\nlist-style: none;margin: 0.25em;\npadding: 0;\n}\n\n.tagClear {\nclear: both;\n}\n\n.footer {\n font-size: .9em;\n}\n\n.footer li {\ndisplay: inline;\n}\n/***\n''The viewer is where the tiddler content is displayed'' /%------------------------------------------------%/\n***/\n/*{{{*/\n* html .viewer pre {\n width: 99%;\n padding: 0 0 1em 0;\n}\n\n.viewer {\n line-height: 1.4em;\n padding-top: 0.5em;\n}\n\n.viewer .button {\n margin: 0em 0.25em;\n padding: 0em 0.25em;\n}\n\n.viewer blockquote {\n line-height: 1.5em;\n padding-left: 0.8em;\n margin-left: 2.5em;\n}\n\n.viewer ul, .viewer ol{\n margin-left: 0.5em;\n padding-left: 1.5em;\n}\n\n.viewer table {\n border-collapse: collapse;\n margin: 0.8em 1.0em;\n}\n\n.viewer th, .viewer td, .viewer tr,.viewer caption{\n padding: 3px;\n}\n\n.viewer pre {\n padding: 0.5em;\n margin-left: 0.5em;\n font-size: 1.2em;\n line-height: 1.4em;\n overflow: auto;\n}\n\n.viewer code {\n font-size: 1.2em;\n line-height: 1.4em;\n}\n/*}}}*/\n/***\n''The editor replaces the viewer in the tiddler'' /%------------------------------------------------%/\n***/\n/*{{{*/\n.editor {\nfont-size: 1.1em;\n}\n\n.editor input, .editor textarea {\n display: block;\n width: 100%;\n font: inherit;\n}\n\n.editorFooter {\n padding: 0.25em 0em;\n font-size: .9em;\n}\n\n.editorFooter .button {\npadding-top: 0px; padding-bottom: 0px;}\n\n.fieldsetFix {border: 0;\npadding: 0;\nmargin: 1px 0px 1px 0px;\n}\n/*}}}*/\n/***\n!Misc rules /%==================================================%/\n***/\n/*{{{*/\n.sparkline {\n line-height: 1em;\n}\n\n.sparktick {\n outline: 0;\n}\n\n.zoomer {\n font-size: 1.1em;\n position: absolute;\n padding: 1em;\n}\n\n.cascade {\n font-size: 1.1em;\n position: absolute;\n overflow: hidden;\n}\n/*}}}*/

The TaggingMacro returns a list of tiddlers based on a tag; if no tag is specified, it looks for tiddlers tagged with the title of the current tiddler. \n!Code\nGeneric use:\n{{{\n<<tagging tagname>>\n}}}\n\nSpecific use: This code will list all tiddlers tagged as Features\n{{{\n<<tagging Features>>\n}}}\n\n!Execution\n<<tagging Features>>\n

Tags offer a way of categorizing tiddlers. To the right of this tiddler, you can see that it is tagged with the "Features" tag. If you click on this tag, a list will pop up with links to the other tiddlers with the same tag. You have option of opening all of the tiddlers with this tag, or just the one you want.\n\nTo add a tag to a tiddler, just switch the tiddler to editing mode and add words to the bottom field, below the main body field text box. \n\nSee Also: SpecialTags

A Tiddler is a little chunk of information about a particular topic. It can contain text, images, tables, lists, or even external links, which you can find out all about in EasyToEdit.\n\nWhen you're done looking at any particular Tiddler, you can make it go away by moving the mouse over it and clicking the "close" link that appears. Try it on this tiddler!

TiddlyWiki is the truly awesome software created by Jeremy Ruston to which this tutorial introduces you. You can find the TiddlyWiki home site at http://www.tiddlywiki.com \n\nThis is one of the most efficient ways of communicating that I've ever seen, and it's a lot of fun to use and write for too!

Wasn't that cool?\n\nYou've just opened your first [[Tiddler]]. A [[Tiddler]] is a chunk of information, or MicroContent, about a particular topic. This chunking of information is part of what makes TiddlyWiki so powerful. Human minds are not built to take in long passages of information very well; we're a lot better at taking information in small chunks. \n\nThere are two other things that make TiddlyWiki so powerful: It's EasyToEdit and EasyToCarry.

The ToolbarMacro is primarily used in [[formatting TiddlyWiki|HowToFormatThePage]]. It defines the toolbar that appears when the mouse hovers over a tiddler.\n\n!Code\n{{{\n<<toolbar closeTiddler -editTiddler +jump>>\n}}}\n!Execution\n<<toolbar closeTiddler -editTiddler +jump>>\n!Arguments\nThe commands available to use in the Toolbar are listed [[here|http://www.tiddlywiki.com/#tag:commands]]. \n\nCommands that are preceded by a + are executed when the user pushes the ~Ctrl-Enter keyboard shortcut or when the user doubleclicks the tiddler. Commands preceded by a - are executed when the user presses Esc on the keyboard.

<div class='toolbar' macro='toolbar -closeTiddler closeOthers +editTiddler permalink references jump'></div>\n<div class='title' macro='view title'></div>\n<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (created <span macro='view created date [[DD MMM YYYY]]'></span>)</div>\n<div class='tagging' macro='tagging'></div>\n<div class='tagged' macro='tags'></div>\n<div class='viewer' macro='view text wikified'></div>\n<div class='tagClear'></div>\n

Welcome to TiddlyWikiTutorial, an introduction to one of the most efficient ways of communicating information ever devised. If you'd rather skip the tutorial and explore it for yourself, just click on this link to [[TiddlyWiki.com|http://www.tiddlywiki.com/]]. \n\n(Please note that this site works best in [[Firefox|http://www.mozilla.org/products/firefox/]]. It will also work almost as well in Internet Explorer and Safari. It may not work properly in Opera. [[Firefox|http://www.mozilla.org/products/firefox/]] is free, and well worth downloading if you haven't already.)\n\nGo ahead and click on TiddlyWikiTutorial.\n\n//Please note: This TiddlyWikiTutorial is running TiddlyWiki version <<version>>. Newer versions of the software may have rendered some of this information obsolete.//

Quite a community of loyal developers and users has grown up around TiddlyWiki. You can leave comments and ask questions about TiddlyWiki in the Google group at http://groups-beta.google.com/group/TiddlyWiki\n\nThis is your best bet for a timely and helpful response.

<<<\nA Wiki is a popular way of building collaborative websites. It's based on the ideas of easy editing of pages and the use of special WikiWord notation to automagically create links between pages. See Wikipedia for [[more details|http://en.wikipedia.org/wiki/Wiki]]. TiddlyWiki is different from a conventional Wiki because it is not based on entire pages of content, but rather items of MicroContent that are referred to as 'tiddlers'.\n<<<\n\n''--[[Jeremy Ruston|http://www.tiddlywiki.com/#JeremyRuston]]'', creator of TiddlyWiki.

<<<\nA WikiWord is a word composed of a bunch of other words slammed together with each of their first letters capitalised. WikiWord notation in a conventional WikiWikiWeb is used to name individual pages while TiddlyWiki uses WikiWord titles for smaller chunks of MicroContent. Referring to a page with a WikiWord automatically creates a link to it. Clicking on a link jumps to that page or, if it doesn't exist, to an editor to create it. This third version of TiddlyWiki also adds NonWikiWordLinks.\n<<<\n''--[[Jeremy Ruston|http://www.tiddlywiki.com/#JeremyRuston]]'', creator of TiddlyWiki.

An example of how to make NonWikiWordLinks.

Add this tag to the tags field to remove it from the sidebar.

Add this tag to a tiddler to remove it from the search results.

!Code\n{{{\nThe following lists all tiddlers in alphabetical order:\n<<list>>\n}}}\n\n!Execution\nThe following lists all tiddlers in alphabetical order:\n<<list>>

!Code\n{{{\nWrite a <<newJournal "DD MMM YYYY">> entry.\n}}}\n\n!Execution\nWrite a <<newJournal "DD MMM YYYY">> entry.

!Code\n{{{\nCreate a <<newTiddler>>.\n}}}\n\n!Execution\nCreate a <<newTiddler>>.

!Code\n{{{\n<<slider chkSlider Welcome slider "Click here to slide out the Welcome message">>\n}}}\n\n!Execution\n<<slider chkSlider Welcome slider "Click here to slide out the Welcome message">>\n\n!Arguments\n(This is copied from the original TiddlyWiki documentation)\n* cookie name to be used to save the state of the slider\n* name of the tiddler to include in the slider\n* title text of the slider\n* tooltip text of the slider

version.extensions.smileyMacro = {major: 0, minor: 1, revision: 0, date: new Date(2005,7,20)};\n//Author: Alan Hecht\nconfig.macros.smiley = {}\nconfig.macros.smiley.handler = function(place,macroName,params)\n{\n var palette = ["transparent","#000000","#1a1507","#352e18","#464646","#666666","#a3141e","#b06b63","#cc9900","#dd9030","#dddddd","#e89d00","#edc32a","#f3cb3c","#fdf201","#fdf526","#ff3149","#ffac00","#ffbf06","#ffc846","#ffcc66","#ffd758","#ffdd01","#ffea7b","#ffed55","#ffffff"];\n var data = params;\n var imageMap = null;\n if(data[0] == ":-)" || data[0] == ":)")\n\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyffyffuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwboooowwwbllbbwwwboooowbrllbacwwwbbbbbrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-(" || data[0] == ":(")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyyyyyyuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwoooooowwrllbbwwwwbbbbbsrllbacwwbwwwwsbllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ";-)" || data[0] == ";)")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyxxxxxuujbaadyyyxxxeetttdabppphddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwboooowwwbllbbwwwboooowbrllbacwwwbbbbbrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-|" || data[0] == ":|")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyffyffuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwoooooowwrllbbwwwwbbbbbsrllbacwwwwwwwsrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-D" || data[0] == ":D")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyeeyeeuujbaadyyyeeyeetttdabppppyyyyypmmlbbwbbbbbbbbbbblbbwbkzzzzzzzkbwbbwbfzzzzzzzfbwbbwbkzzzzzzzkbwbacwbkzzzzzkblcaablsbkzzzkblibaaablsbbbbblibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else\n createTiddlyElement(place,"span",null,"errorNoSuchMacro","unknown smiley");\n if(imageMap)\n {\n var box = createTiddlyElement(place,"span",null,"smiley",String.fromCharCode(160));\n box.style.position = "relative";\n box.style.width = "15px";\n box.style.height = "15px";\n box.style.marginLeft = "1px";\n box.style.marginRight = "1px";\n box.style.paddingRight = "12px";\n box.style.verticalAlign = "top";\n\n //now divide into 15x15 grid and create each pixel\n // rows\n for(r=0; r<15; r++)\n {\n // columns\n for(c=0; c<15; c++)\n {\n //create each pixel with the correct background\n var pix = document.createElement("img");\n pix.className = "smileyPixel";\n pix.style.position = "absolute";\n pix.border = 0;\n pix.style.top = r + "px";\n pix.style.left = c + "px";\n pix.style.width = "1px";\n pix.style.height = "1px";\n pix.style.backgroundColor = palette[imageMap.charCodeAt((r*15)+c)-97];\n pix.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";\n box.appendChild(pix);\n }\n }\n }\n}\n

Tiddlers tagged with the systemConfig tag contain Javascripts for CustomMacros.

Quoting from the original TiddlyWiki:\n\nThis "marks tiddlers whose content is used to create paraphernalia like the main menu, title and sidebar. These tiddlers are included if you use the 'save empty template' option."

!Code\n{{{\n<<tabs tabsClass\nMacros "A description of macros in TiddlyWiki" Macros\nTags "A description of how tags work in TiddlyWiki" Tags\n>>\n}}}\n\n!Execution\n<<tabs tabsClass\nMacros "A description of macros in TiddlyWiki" Macros\nTags "A description of how tags work in TiddlyWiki" Tags\n>>\n\n!Parameters\n*First Line\n**tabsClass: The CSS class that the tabs box takes; useful for formating your StyleSheet.\n*Other Lines\n**The title of the tab\n**The text that appears when your mouseover the tab\n**The tiddler that appears when you click the tab.

!Code\n{{{\nClick here to see all the tags marked <<tag Features>>.\n}}}\n\n!Execution\nClick here to see all the tags marked <<tag Features>>.

!Code\n{{{\n<<tiddler Welcome>>\n}}}\n\n!Execution\n<<tiddler Welcome>>\n\n!Warning:\nThere is no protection against setting up an infinite loop using this function.

!Code\n{{{\nToday is <<today>>.\n}}}\n\n!Execution\nToday is <<today>>.

!Code\n{{{\nWhat version of TiddlyWiki is this? <<version>>\n}}}\n!Execution\nWhat version of TiddlyWiki is this? <<version>>\n