TiddlyWiki for the rest of us - An easy-to-use entry-level TiddlyWiki tutorial from giffmex

Source: http://www.ficml.org/jemimap/style/color/wheel.html 
<html><iframe name="content" src="http://www.ficml.org/jemimap/style/color/wheel.html" width=100% height=600></iframe></html>

*[[How to install a plugin]]
*[[TiddlyVault: your source for macros, plugins and themes]]

Here are the basic elements in a typical ~TiddlyWiki layout (this tutorial uses a modification that places the ~MainMenu at the top in a horizontal fashion). Below the graphic are links to other screen captures with more information.

[img[http://www.giffmex.org/images/mainscreen.GIF]]

[[The header]]
[[The main menu]]
[[The right hand menu]]
[[Anatomy of a Tiddler]]

With these tools you can practically make your ~TiddlyWiki file your command central for your computer!

*[[Use IFrames to embed other webpages in your TiddlyWiki]]
*[[Open the indexes of your hard drive, CD or USB files from inside your TiddlyWiki]]
*[[Browse your files and folders from within TiddlyWiki]]
*[[Launch applications from within TiddlyWiki]]

Jeremy Hodge suggested I add a section to the tutorial on adapting TiddlyWiki for website use. Great idea, Jeremy! What follows are my own suggestions, followed by Jeremy's suggestions.
!Giffmex's tweaks for TiddlyWikis used as websites
#Make sure to add a download link and instructions accessible from the tiddler that opens when the webpage is accessed.
#Add the ~ToggleRightSideBarPlugin, then add a macro to access that plugin {{{<<tiddler ToggleRightSidebar with: "(Sidebar)">>}}} from your MainMenu or top menu.
##If you do this, you should also make the search window accessible from your MainMenu or top menu. Just add {{{<<search>>}}} to your menu.
#Add the ~SinglePageModePlugin and tag it systemConfig so that only one tiddler will be viewable at a time.
##If you use the ~SinglePageModePlugin you should probably also add the ~HistoryPlugin and make a history macro available from your MainMenu or top menu. That lets your users navigate back and forth. Here is an example of what the history macro would look in edit mode as you add it to your TW: {{{|!<<back>>|>|!<<history>>|>|!<<forward>>|}}}
#Create a custom configOptions tiddler to solidify the following options:
##Name the tiddler whatever you like, z_configOptions, for example.
##Tag the tiddler systemConfig
##Add the following text:
//{{{
config.options.chkHttpReadOnly = false;
config.options.chkAutoSave = true;
config.options.chkSaveBackups = false;
config.options.chkAnimate = false;
config.options.chkSinglePageMode= true;
config.options.chkSinglePagePermalink= false;
if (window.location.protocol!="file:") showBackstage=false; 
//}}}

!Jeremy Hodge's suggestions

!!!Remove backstage link
Add the following to StyleSheet: {{{#backstageButton { display: none !important; } }}}

!!!Remove Editor, Date Edited, & Creation Date
Remove the following from ViewTemplate: {{{<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>}}}

!!!Remove ~SideBar
Remove the following from PageTemplate: {{{<div id='sidebar'>

<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>

<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>

</div>}}}

!!!Remove Editing Toolbar
Remove the following from ViewTemplate: {{{<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>}}}

!!!Remove Edit and More toolbar commands:
Replace in ToolbarCommands: {{{|~ViewToolbar|closeTiddler closeOthers +editTiddler > fields syncing permalink references jump|

|~EditToolbar|+saveTiddler -cancelTiddler deleteTiddler|}}}

With: {{{|~ViewToolbar|closeTiddler closeOthers|}}}

If you would like to add this to your site :), please note that these are very dangerous edits and backups should always be made prior to editing…

Tags are great for grouping tiddlers into categories. For example, you can tag all your recipes with a 'recipe' tag, and then whenever you want to see a list of your recipes, you go to the tabbed list 'Tags' and click on 'recipe' to see a list of your recipes. You can use this idea to sort books by topic, sort music by genre, sort contacts by contact type, etc. ''There are a couple tags with special functions:''
*The excludeSearch tag is a handy one for excluding a tiddler from appearing in searches.
*The excludeLists tag is handy for excluding a tiddler from the tabbed lists to the right.

!Index a tag
You can ''create indexes for specific tags'' and put these indexes in your ~MainMenu. Here's how:
#''Import the ~ForEachTiddler plugin: ''
##Open ImportTiddlers
##Paste the following URL (http://tiddlywiki.abego-software.de/)
##Select the ~ForEachTiddler plugin from the list that appears by checking the checkbox next to it. 
##Go to the bottom and in the dropdown box select "Import these tiddlers."
##Reload your file by clicking your browser's refresh or reload button.
#''Create a new tiddler'' and give it a title that reflects the function of the index you are creating
#Paste the text below into the tiddler and substitute the name of your tag where I have the letters XXXX.
/*{{{*/
<<forEachTiddler 
where 
'tiddler.tags.contains("XXXX")'
sortBy
'tiddler.title'>>
/*}}}*/
Click done. You should now have an index of tiddlers containing your tag. This index is automatically updated every tiime you add a new tiddler with this tag.

!Index all your tags
You can get a list of all your tags with the tiddlers associated with each tag. Here's how:
#Import the InlineJavascriptPlugin (this step is not necessary if you are using a TW based on this tutorial). 
##Open ImportTiddlers
##Paste the following URL (http://tiddlywiki.abego-software.de/)
##Select the ~InlineJavascript plugin from the list that appears by checking the checkbox next to it. 
##You will also need to select the ~ForEachTiddler macro from the list that appears by checking the checkbox next to it.
##Go to the bottom and in the dropdown box select "Import these tiddlers."
##Reload your file by clicking your browser's refresh or reload button.
#Create a new tiddler. I suggest the title ~ShowAllByTags.
#Add the text below to your tiddler, add the tag 'script' to your tiddler (without quotes), then click done. You should now have an index of all your tags.
/*{{{*/
<script>
	var tags = store.getTags();
	if(tags.length == 0) return "no tags in document";
	var out="";
	for(var t=0; t<tags.length; t++) {
		out+="*[["+tags[t][0]+"]] ("+tags[t][1]+")"+"\n";
		var tids=store.getTaggedTiddlers(tags[t][0]);
		for (i=0; i<tids.length; i++) out+="##[["+tids[i].title+"]]\n";
	}
	return out;
</script>
/*}}}*/

To align a cell so that its text displays at the top rather than the center, add 

{{{vertical-align:top;}}} 

at the beginning of the cell.

To alternate the colors of the rows of the tables in a ~TiddlyWiki, add the following code to your StyleSheet:
{{{
.viewer tr.oddRow { background-color: #bbbbbb; }
.viewer tr.evenRow { background-color: #fff; } 
}}}

Your table rows will alternate between gray and white. Of course, you can substitute any colors you wish, using tools such as [[4096 Color wheel]] and [[Coloria color names]] to find the correct code.

You can also create a special CSS class for a particular table or series of tables, to format them differently than your default table style. In your stylesheet you add the following code, substituting "FOO" with any title you prefer:

{{{
.viewer .FOO table tr.oddRow { background-color: #bbbbbb; }
.viewer .FOO table tr.evenRow { background-color: #fff; } 
}}}

Then wrap your table with
{{{
{{FOO{ and }}}
}}}

Here is the result:

{{FOO{
|tablke|table|
|gakgjne|vbskjngeo|
}}}

! The main elements of a Tiddler
[img[http://www.giffmex.org/images/tiddler.GIF]]

! The Tiddler's hidden buttons
[img[http://www.giffmex.org/images/buttonseng.GIF]]

! A tiddler in 'edit' mode
When you double-click on a Tiddler or click the edit button, the Tiddler opens up into edit mode. Here is what it looks like:

[img[http://www.giffmex.org/images/editmode.GIF]]

When you are done editing the Tiddler, here are the options.
[img[http://www.giffmex.org/images/donecanceldelete.GIF]]

Background: #ddff88
Foreground: #000
PrimaryPale: #bbee66
PrimaryLight: #aa0033
PrimaryMid: #440000
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #99cc00
SecondaryMid: #db4
SecondaryDark: #440000
TertiaryPale: #bbee66
TertiaryLight: #EEC591
TertiaryMid: #440044
TertiaryDark: #000

Background: #bbbbff
Foreground: #000
PrimaryPale: #99aacc
PrimaryLight: #006699
PrimaryMid: #002244
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #002244
TertiaryPale: #99aacc
TertiaryLight: #aaaaff
TertiaryMid: #000
TertiaryDark: #8B7355

Background: #FFFFFF
Foreground: #000
PrimaryPale: #FF8C69
PrimaryLight: #FF8C69
PrimaryMid: #8B4C39
PrimaryDark: #410
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #FFD39B
TertiaryLight: #EEC591
TertiaryMid: #CDAA7D
TertiaryDark: #8B7355

The following code added to your tiddler:

{{{
<html><div align="left"><FORM name=form1><INPUT type=file name=cmuds> <INPUT onclick="whatFile()" type=button value=OpenFile name=button></FORM></div><br></html>
}}}

Produces this:

<html><div align="left"><FORM name=form1><INPUT type=file name=cmuds> <INPUT onclick="whatFile()" type=button value=OpenFile name=button></FORM></div><br></html>
You will need to refresh or reload your ~TiddlyWiki for the code to work.

[[Special note for users of Internet Explorer]]
[[Tips for making Mozilla Firefox run faster]]

Why, golly gee whillickers, you both can and may. Depending on which MainMenu you already have, follow the instructions already given to add the missing menu, either a [[topmenu|How do I remove the left-hand menu of a typical TiddlyWiki and create a top menu for it?]] or a [[left-hand menu|How do I remove the top menu and have a normal left-hand menu?]].

Now what you need to do is decide which menu will draw its information from the MainMenu tiddler, and which menu will draw its information from a tiddler menu that you create, let's call it ~SecondMenu. Create the Tiddler SecondMenu and add a few random menu items to it, like {{{[[TabTags]]}}} and {{{SiteUrl]]}}}. Save the tiddler.

Now in PageTemplate, if you have made the adjustments above, you should see the following lines:

<!--{{{-->
<!-- horizontal MainMenu -->
<div id='topMenu' refresh='content' tiddler='MainMenu'></div>
<!--original MainMenu menu-->
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<!--}}}-->

In either the second or the fourth line above you are going to replace {{{tiddler='MainMenu'}}} with {{{tiddler='SecondMenu' }}}. If you want the menu items you placed in ~SecondMenu to be in the top menu, then modify the second line above. If you want the ~SecondMenu menu items to appear in the left-hand menu, then modify the fourth line above.

When you save and close PageTemplate you should see both menus, one containing the ~MainMenu contents and one containing ~SecondMenu contents. Now change the contents of ~SecondMenu to suit your needs.

Background: #ddcc99
Foreground: #000
PrimaryPale: #998855
PrimaryLight: #664411
PrimaryMid: #221111
PrimaryDark: #410
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #998855
TertiaryLight: #EEC591
TertiaryMid: #841
TertiaryDark: #8B7355

Background: #ffdd77
Foreground: #000
PrimaryPale: #aa8855
PrimaryLight: #dd9922
PrimaryMid: #554422
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #aa8855
TertiaryLight: #EEC591
TertiaryMid: #000
TertiaryDark: #8B7355

You can change the colors by clicking on the ColorPalette tiddler and using html color codes to adjust the colors of different sections of the file. Click on [[ColorPalette color designations]] to see which parts of the ColorPalette affect which parts of the screen.

(To let you test it out I made [[a few sample color schemes|ColorSchemes]] for you. Copy and paste each one in the ColorPalette tiddler to see if you like it. If you want the current color scheme back, copy and paste the 'lilac' color scheme into the ColorPalette.)

For my two favorite tools for picking colors, see these tiddlers:

[[4096 Color wheel]]
[[Coloria color names]]

The EditTemplate controls the look of tiddlers when they are in editing mode. Below is the code for the EditTemplate for a standard ~TiddlyWiki. Each div class is an element of the tiddler that can be removed. Do you prefer the tag window above the text window in edit mode like I have in this tutorial? Just slide the line that says: 

<!--{{{-->
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<!--}}}-->

Above the line that says:
<!--{{{-->
<div class='editor' macro='edit text'></div>
<!--}}}-->

''Here is the full EditTemplate code:''
!The toolbar
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
!The tiddler title
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
!The text
<div class='editor' macro='edit text'></div>
!The tags
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>

The ViewTemplate controls the look of tiddlers when they are in viewing mode. Below is the code for the ViewTemplate. Each div class is an element of the tiddler that can be removed. Don't like seeing those pesky 'tagging' and 'tagged' boxes on your tiddlers? Neither do I. All my ~TWs have those boxes eliminated from the ViewTemplate. 

<!--{{{-->
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler > fields syncing permalink references jump'></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>
<!--}}}-->

The PageTemplate controls the basic page layout of a ~TiddlyWiki. Below is the code for the PageTemplate and my annotations.

!The header
Here is where you can change the colors of the gradient in the header, or change what is included in the header, if you wish. 
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<!--}}}-->
!The main menu of a typical ~TiddlyWiki
This is the part you can replace with a topmenu code if you prefer a topmenu like this tutorial has. See [[Top menus versus left hand main menus]] for details.
<!--{{{-->
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<!--}}}-->
!The right hand sidebar
If you wish, you can remove the topmost sidebar options, the advanced options, or the tabs from the right sidebar by deleting their div id's below.
<!--{{{-->
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<!--}}}-->
!The middle display area where the tiddlers appear
<!--{{{-->
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

*[[Changing the look of the basic page layout - understanding the PageTemplate]]
*[[Changing the look of a tiddler in viewing mode - understanding the ViewTemplate]]
*[[Changing the look of a tiddler in editing mode - understanding the EditTemplate]]
*[[Top menus versus left hand main menus]]
*[[Toggle the right hand menu]]
*TiddlyThemes

Background: #eeeeff
Foreground: #000
PrimaryPale: #ddccff
PrimaryLight: #eeeeff
PrimaryMid: #330066
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #330066
TertiaryPale: #ddccff
TertiaryLight: #EEC591
TertiaryMid: #000
TertiaryDark: #8B7355

Here is a list of the color codes in the ColorPalette, and the sections of this ~TiddlyWiki that they affect. Please note that authors of other ~TiddlyWikis may have configured theirs differently in the StyleSheet. But experimenting with these will give you practice so that you can more easily reconfigure the colors of any ~TiddlyWiki.

''Background:'' This controls the color of the background or 'paper', and the text in the title and subtitle.

''Foreground:'' This controls the color of the text.

''~PrimaryPale:'' This controls the color of the Interface Options box.

''~PrimaryLight:'' This controls the color of the top of the Header gradient.

''~PrimaryMid:'' This controls the color of the text in the ~MainMenu, the color of the text for links, the color of the text in the lists of tiddlers and tags, and the color of the bottom of the Header gradient.

''~PrimaryDark:'' This controls the color of the text of the items in the top of the right hand menu and the text of the buttons on the tiddlers.

''~SecondaryPale:'' This controls the color of the background of the boxes in those tiddlers that show snippets of the ~TiddlyWiki code.

''~SecondaryLight:'' This controls the color that appears when the tiddler buttons or items in the right hand menu are highlighted.

''~SecondaryMid:'' This controls the color of the title cells in tables, that is, cells which begin with an exclamation mark (!). It also controls the color of the box that appears when changes have been saved, and the color of the tiddler buttons when they are selected.

''~SecondaryDark:'' This controls the color of the titles of the tiddlers.

''~TertiaryPale:'' This controls the color of the right hand menu that shows lists of tags and tiddlers, as well as the color of the tag button on the tiddlers.

''~TertiaryLight:'' This controls the color of the borders around the right hand menus.

''~TertiaryMid:'' This controls the color of the unselected tabs behind the list of tags and tiddlers in the bottom right hand menu.

''~TertiaryDark:'' This controls the color of the subtitle of each tiddler, that is, the author of the tiddler, the most recent date it was modified and date it was created.

Open up any of the following Tiddlers and copy its contents. Then paste those contents into the ColorPalette Tiddler and click 'done.' The color scheme of ~TiddlyWiki will change to the color scheme you selected. To return to the original color scheme, replace the ~ColorPalette contents with the contents of the Lilac color scheme below.

[[Apples]] - @@new and improved Jan. 27@@
[[Blueberry]] - @@new and improved Jan. 27@@
[[Brown color scheme]] - (the original color scheme of this file)
[[Capuccino color scheme]]
[[Capuccino2 color scheme]]
[[Giffmex's dining room color scheme]]
[[greenishgray]] @@new march 2@@
[[Lilac]]
[[Mauve]] - @@new Jan. 27@@
[[Mocha]] - @@new Jan. 27@@
[[Purple and gold color scheme]]
[[Romanos color scheme]]
[[Slate 'Batman' color scheme]]
[[Strawberry color scheme]]

Source: http://www.coloria.net/bonus/colornames.htm.
<html><iframe src="http://www.coloria.net/bonus/colornames.htm" width=100% height=600></iframe></html>

*[[Changing the colors of a TiddlyWiki]]
*[[The SelectPaletteMacro]]
*[[Messing with StyleSheets]]
*[[How to create gradients]]
*[[How to add background images]]
*[[TiddlyThemes]]

I'm not going to show you how to do this. You will need to download the ~FormTiddlerPlugin and the ~DataTiddlerPlugin from Abego Extensions and consult the documentation for specific instructions. But if you would like to see a form in action, check out my ~NewBookTemplate in ~BibblyWiki, a ~TiddlyWiki I created to manage bibliographies, take book notes and organize personal libraries.

The template is [[here|http://www.giffmex.org/bibblywiki.html#NewBookTemplate]]:
A tiddler based on the template is [[here|http://www.giffmex.org/bibblywiki.html#%5B%5BWright%2C%20N.T.%2C%20Jesus%20and%20the%20Victory%20of%20God%5D%5D]]. 

I recommend you doubleclick them both to see what they look like in edit mode.

''To create a button'' which creates a new tiddler based on the template, here is the macro syntax:

{{{<<newTiddler label:"XXXX" text:{{"<<formTiddler ZZZZ\>\>"}} tag:"OOOO">>}}}

Replace XXXX with the name for your macro label. (ex: "Add a new book")
Replace ZZZZ with the name of the template tiddler. (ex: ~NewBookTemplate)
Replace OOOO with any tag you would like to have appended to every tiddler created by this macro (ex: "booknote")

You can place your new macro in SideBarOptions or in a tiddler accessible from the ~MainMenu.

''~TiddlyWiki'' is © 2006 [[osmosoft|http://www.osmosoft.com]]. ~TiddlyWiki is a free program created under an Open Source License by Jeremy Ruston. (see at http://tiddlywiki.com). 

''~TiddlyWiki for the rest of us'' is an instruction manual written by DaveGifford (his website is http://www.giffmex.org) and he can be contacted at //giff (at) giffmex (dot) org//

I am a missionary with the Christian Reformed Church in Mexico City. I created this tutorial in English and Spanish because I think ~TiddlyWiki is a great tool, but knew my friends wouldn't buy into it unless there was a simpler way to learn it. But it has suddenly become a fairly popular site for others as well.

If you have questions about ~TiddlyWiki, you will be better served by the ~TiddlyWiki group at Google [[link here|http://groups-beta.google.com/group/TiddlyWiki]] than by contacting me. If you want to know more about me, visit my website [[link here|http://www.giffmex.org/bloghome.html]], which has personal info, articles, links to our photos on Flickr, links to my other ~TiddlyWiki resources, links to my Spanish resources, etc.

If you absolutely ''must'' contact me, my e-mail is contacto (at) giffmex (dot) org. Please, no spam. My thoughts on spam can be found [[here|http://www.giffmex.org/gniknow.html]].

In the right-hand Interface options panel, there are several options with check boxes beside them, and two of them are {{{SaveBackups}}} and {{{AutoSave}}}. When {{{SaveBackups}}} is checked, ~TiddlyWiki automatically makes an entire backup copy of itself in the folder where it is located or in a folder designated by you in AdvancedOptions whenever changes are saved.  When {{{AutoSave}}} is checked, ~TiddlyWiki saves changes immediately after they are made.

Below is a chart on the pros and cons of checking and unchecking these items.

|! ''SaveBackups'' |! ''AutoSave'' |! Description |!  ''Use these options together...'' |
|vertical-align:top;[X]<<br>>(checked)|vertical-align:top;[X]<<br>>(checked)|vertical-align:top;~TiddlyWiki saves every change immediately to the current file, and also creates an entire backup copy of itself with every change.<<br>><<br>>If you make a mistake, just go to the backup of the previously saved version and rename it to the original file's name. |vertical-align:top;...if you really need a backup copy for every change you make, as a safety net so that you don't lose valuable information because of mistakes.<<br>><<br>>...if you don't want to hit "save changes" yourself but you need to save your data at every step.<<br>><<br>>...if you don't mind the delay in automatic saves and backups as your file gets larger.<<br>><<br>>...if you are willing to manually delete all those backup files (they add up fast!)<<br>><<br>>|
|bgcolor(#eeeeee):vertical-align:top;[_]<<br>>(unchecked)|bgcolor(#eeeeee):vertical-align:top;[_]<<br>>(unchecked)|bgcolor(#eeeeee):vertical-align:top;~TiddlyWiki saves nothing until you click "save changes" in the right-hand sidebar. Changes are saved to the current file. |bgcolor(#eeeeee):vertical-align:top;...if you don't need the safety net of backup copies in case of mistakes, and would prefer changes to be saved to the current file.<<br>><<br>>...if you prefer to save changes manually at regular intervals rather than wait while ~TiddlyWiki saves your changes for you.<<br>><<br>>...if you don't have the hard drive space for multiple backup copes or don't like deleting them.<<br>><<br>>...if you are confident that your computer won't crash between your manual saves.<<br>><<br>>|
|vertical-align:top;[X]<<br>>(checked)|vertical-align:top;[_]<<br>>(unchecked)|vertical-align:top;~TiddlyWiki saves an entire backup copy of itself, but only when you save changes manually.|vertical-align:top;...if you want the safety net of backup copies in case of mistakes, but you don't want one for every single change you make. <<br>><<br>>...if you prefer to save changes manually at regular intervals rather than have ~TiddlyWiki save changes at every step.<<br>><<br>>...if you are willing to manually delete backup files later.<<br>><<br>>...if you are confident that your computer won't crash between your manual saves.<<br>><<br>>|
|vertical-align:top;bgcolor(#eeeeee):[_]<<br>>(unchecked)|bgcolor(#eeeeee):vertical-align:top;[X]<<br>>(checked)|bgcolor(#eeeeee):vertical-align:top;~TiddlyWiki saves every change immediately to the current file, but does not create a backup copy of itself.|bgcolor(#eeeeee):vertical-align:top;...if you prefer changes to be saved to the current file rather than have the safety net of backup copies.<<br>><<br>>...if you prefer ~TiddlyWiki to save your changes automatically rather than have to hit 'save changes' every now and then.<<br>><<br>>...if you don't have the hard drive space for multiple backup copes or don't like deleting them.<<br>><<br>>...if you don't mind waiting for ~TiddlyWiki to save every change, because you want to make sure your changes are saved at every step.<<br>><<br>>...if you are confident that you won't irretrievably lose valuable information by making a mistake.<<br>><<br>>|

[[How do you use a TiddlyWiki?]]

/***
|!''Name:''|!''E''asily ''A''daptable ''S''ource ''E''ditor|
|''Description:''|this framework allows you to easily create commands that work on the current tiddler text selection in edit mode|
|''Version:''|0.1.0|
|''Date:''|13/01/2007|
|''Source:''|http://yann.perrin.googlepages.com/twkd.html#E.A.S.E|
|''Author:''|[[Yann Perrin|YannPerrin]]|
|''License:''|[[BSD open source license]]|
|''~CoreVersion:''|2.x|
|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|
***/
////Messages Definition
//{{{
config.messages.Ease = {
noselection:"nothing selected",
asktitle:"enter the new tiddler title",
exists:" already exists, please enter another title",
askForTagsLabel:"enter the new tiddler tags",
tiddlercreated:" tiddler created"
}
//}}}
////
//{{{
if (!window.TWkd) window.TWkd={context:{}};
if (!TWkd.Ease)
 TWkd.Ease = function (text,tooltip){
 this.text = text;
 this.tooltip = tooltip;
 this.modes = [];
 this.addMode = function(modeDefinition) {this.modes.push(modeDefinition);};
 this.handler = function(event,src,title) {
 TWkd.context.command = this;
 TWkd.context.selection=this.getSelection(title);
 if (this.modes.length==1) {
 this.modes[0].operation();
 }
 else {
 var popup = Popup.create(src);
 if(popup) {
 for (var i=0; i<this.modes.length; i++) {
 createTiddlyButton(createTiddlyElement(popup,"li"), this.modes[i].name, this.modes[i].tooltip, this.OperateFromButton, null, 'id'+i, null);
 }
 Popup.show(popup,false);
 event.cancelBubble = true;
 if (event.stopPropagation) event.stopPropagation();
 return false;
 }
 }
 };
 };

TWkd.Ease.prototype.OperateFromButton = function(e){
 var commandMode=this.getAttribute('Id').replace('id','');
 TWkd.context.command.modes[commandMode].operation();
};

TWkd.Ease.prototype.getTiddlerEditField = function(title,field){
 var tiddler = document.getElementById(story.idPrefix + title);
 if(tiddler != null){
 var children = tiddler.getElementsByTagName("*")
 var e = null;
 for (var t=0; t<children.length; t++){
 var c = children[t];
 if(c.tagName.toLowerCase() == "input" || c.tagName.toLowerCase() == "textarea"){
 if(!e) {e = c;}
 if(c.getAttribute("edit") == field){e = c;}
 }
 }
 if(e){return e;}
 }
} // closes getTiddlerEditField function definition
 
TWkd.Ease.prototype.getSelection = function(title,quiet) {
 var tiddlerTextArea = this.getTiddlerEditField(title,"text");
 var result = {};
 if (document.selection != null && tiddlerTextArea.selectionStart == null) {
 tiddlerTextArea.focus();
 var range = document.selection.createRange();
 var bookmark = range.getBookmark();
 var contents = tiddlerTextArea.value;
 var originalContents = contents;
 var marker = "##SELECTION_MARKER_" + Math.random() + "##";
 while(contents.indexOf(marker) != -1) {
 marker = "##SELECTION_MARKER_" + Math.random() + "##";
 }
 var selection = range.text;
 range.text = marker + range.text + marker;
 contents = tiddlerTextArea.value;
 result.start = contents.indexOf(marker);
 contents = contents.replace(marker, "");
 result.end = contents.indexOf(marker);
 tiddlerTextArea.value = originalContents;
 range.moveToBookmark(bookmark);
 range.select();
 }
 else {
 result.start=tiddlerTextArea.selectionStart;
 result.end=tiddlerTextArea.selectionEnd;
 }
 result.content=tiddlerTextArea.value.substring(result.start,result.end);
 result.source=title;
 if (!result.content&&!quiet) displayMessage(config.messages.Ease.noselection);
 return(result);
}//closes getSelection function definition

// replace selection or insert new content
TWkd.Ease.prototype.putInPlace=function(content,workplace) {
 var tiddlerText = this.getTiddlerEditField(workplace.source,"text");
 tiddlerText.value = tiddlerText.value.substring(0,workplace.start)+content+tiddlerText.value.substring(workplace.end);
}

// asking for title
TWkd.Ease.prototype.askForTitle = function(suggestion) {
 if (!suggestion)
 suggestion = "";
 var newtitle;
 while (!newtitle||store.tiddlerExists(newtitle))
 {
 if (store.tiddlerExists(newtitle))
 displayMessage(newtitle+config.messages.Ease.exists);
 newtitle = prompt(config.messages.Ease.asktitle,suggestion);
 if (newtitle==null)
 {
 displayMessage(config.messages.Ease.titlecancel);
 return(false);
 }
 }
 return(newtitle);
}//closes askForTitle function definition

// creation of a new tiddler
TWkd.Ease.prototype.newTWkdLibTiddler = function(title,content,from,askForTags){
 var tiddler = new Tiddler();
 tiddler.title = title;
 tiddler.modifier = config.options.txtUserName;
 tiddler.text = content;
 (from) ? tiddler.tags = [from] : tiddler.tags=[];
 if (askForTags)
 tiddler.tags = prompt(config.messages.Ease.askForTagsLabel,'[['+from+']]').readBracketedList();
 store.addTiddler(tiddler);
 //store.notifyAll();
 displayMessage(title+config.messages.Ease.tiddlercreated);
}

if (!TWkd.Mode)
 TWkd.Mode = function (name,tooltip,ask,operation) {
 this.name = name;
 this.tooltip = tooltip;
 this.ask = ask;
 this.operation = operation;
 };
//}}}

<div class="toolbar" macro="toolbar +saveTiddler closeOthers -cancelTiddler deleteTiddler"></div>
<div class="title" macro="view title"></div>
<div class="editLabel">Title</div><div class="editor" macro="edit title"></div>
<div class="editLabel">Tags</div><div class="editor" macro="edit tags"></div>
<div class="editorFooter"><span macro="message views.editor.tagPrompt"></span><span macro="tagChooser"></span></div>
<div macro='hideWhen ((tiddler.tags.contains("Contacts"))||(tiddler.title=="New Contact"))'>[[EditToolbar]]<div class='editor' macro='edit text'></div></div>
<div macro='showWhen ((tiddler.tags.contains("Contacts"))||(tiddler.title=="New Contact"))'><div class='editor'>
<table width='100%'>
<tr><th>Name</th><td><span macro='edit ContactFirstName'></span><span macro='edit ContactLastName'></span></td><td rowspan='4' width='50%' macro='edit text'></td></tr>
<tr><th>Adress</th><td><span macro='edit ContactStreetNumber'></span><span macro='edit ContactStreetName'></span><span macro='edit ContactZipCode'></span><span macro='edit ContactCity'></span></td></tr>
<tr><th>Phone</th><td><span macro='edit ContactPhone'></span></td></tr>
<tr><th>Email</th><td><span macro='edit ContactMail'><span></td></tr>
</table>
</div></div>

<div macro='toolbar format slice tongue'></div>

{{invisibletable{
|width:25em; Okay, so you know how to use ~TiddlyWiki, but now you want more. You want to change the color or layout. You want to add features to it. As the subtitle says, this is an entry-level introduction, so I am not going to show you how to do every possible thing you can do with ~TiddlyWiki. I probably don't know half of what can be done. Advanced documentation such as that found at http://www.tiddlywiki.org/wiki and http://tiddlyspot.com/twhelp/ can hopefully expand your horizons. What I will tell you is that there is a LOT more you can do with ~TiddlyWiki if you are interested and determined enough.|Here are a few ideas to get you started.<br><br>[[Advanced ideas for tags]]<br><br>[[More information on tables]]<br><br>[[Colors, images, gradients, stylesheets and other visuals]]<br><br>[[Changing the page layout]]<br><br>[[More with macros]]<br><br>[[A plug for Plugins]]<br><br>[[TiddlyVault collection of plugins and macros|TiddlyVault: your source for macros, plugins and themes]]<br><br>[[How to create new tiddlers based on a template tiddler]]<br><br>[[Create forms with editable fields]]<br><br>[[Access files, folders, etc from within TiddlyWiki]]<br><br>[[TiddlySnip Firefox addon]]|
}}}

I want to thank all the fine people at the Google group for ~TiddlyWiki. If it weren't for them, I wouldn't ever have been able to do these things, let alone explain them to you. It's rare to find such a helpful group of people available every day with same day answers. They are another reason ~TiddlyWiki is so great.

Reading ~TiddlyWikis is easy, but takes some getting used to. Rather than scrolling up and down a long web page or word processing document, you open small chunks of information ("microcontent") written in boxes called "tiddlers." You read what you need from a tiddler, then close it with the ''close'' button at the top right hand corner of the tiddler.

Tiddlers are linked to each other in different ways: 
*[[through a MainMenu]]
*[[through hyperlinks]]
*[[through tags]]
When a tiddler is opened up, it appears at the top of the screen or below the tiddler used to link to it. After opening a few tiddlers in succession, you might feel overwhelmed by all the open tiddlers. Not to worry. 
*You can close every tiddler but the one you are using by clicking on the ''close others'' button.
*If you have multiple tiddlers open, you can use the ''jump'' button to quickly go to the open tiddler you desire without having to scroll up and down.
*See [[here|Anatomy of a Tiddler]] for information on the other buttons at the top right of the tiddler.
To ''search for a tiddler'', you can use the search window at the top right of the screen. All the tiddlers that contain the word that you search for will appear. Or, you can look for the relevant tiddler in the tabbed menu at the bottom of the right hand menu. See [[here|The right hand menu]] for more information on the right hand menu.

If your ~TiddlyWiki file is saved correctly to your computer, you can add your own notes, create your own tiddlers, add tags to tiddlers and even save the file with a new name to create your own ~TiddlyWiki file.

|bgcolor(#dddddd):''Edit existing tiddlers''|You can ''edit an existing tiddler'' either by double-clicking on it or by clicking the hidden 'edit' button at the top right of the tiddler. The tiddler will then go into 'edit' mode, and you type whatever you want to type into it. Click the hidden 'done' button in the upper right corner ''to finish your changes'' and go back to 'reading' mode.|
|bgcolor(#dddddd):''Create new tiddlers''|You can ''create a new tiddler'' in various ways.<br>*Click on the 'New tiddler' or 'New journal' options in the right hand menu.<br>*Create a WikiWord within an existing tiddler and click on it when you go back to reading mode.<br>*Write a word or phrase enclosed by double brackets {{{[[this is an example]]}}} and click on it when you go back to reading mode.<br><br>I recommend that you be as specific as possible in naming tiddlers. There cannot be two tiddlers with the same name.|
|bgcolor(#dddddd):''Format text''|To see how to format a special way (for example, how to do boldfaced type), just go into edit mode and view the code for the formatting. A list of most of the [[Special formatting]].<br><br>I added Yann Perrin's [[easyFormat]] plugin to make some formatting easier. Go into edit mode, select some text, and click on "Format" to see a dropdown list of formats that will automatically be applied when you select them.|
|bgcolor(#dddddd):''Add tags''|When a tiddler is in edit mode you can add ''tags'' to the narrow window at the bottom of the tiddler. [[Advanced ideas for tags]]|
|bgcolor(#dddddd):''Edit the main menu''|I use the main menu as the table of contents for my files. To edit the main menu, click on the word MainMenu, and double-click on its tiddler. Add and remove items as you wish.|

Tables with one narrow column and one long column often force line breaks in the narrow column where words are separated by a space, as in this example:

|narrow column|narrow column|very wide column very wide column very wide column very wide column very wide column very wide column very wide column very wide column very wide column very wide column very wide column |

To force those narrow cells onto one line, add the following code at the beginning of the cells:

{{{
@@white-space: nowrap;YOUR-TEXT-HERE@@
}}}

Here is the result:

|@@white-space: nowrap;narrow column@@|@@white-space: nowrap;narrow column@@|very wide column very wide column very wide column very wide column very wide column very wide column very wide column very wide column very wide column very wide column very wide column |

Morris Gray has very nice lists of how to do ASCII symbols, Greek and Latin symbols, HTML entities and Math symbols at his wonderful TW Help site. To see these lists at his site, [[click here|http://twhelp.tiddlyspot.com/#Entities-Codes]].

''Line-by-line blockquotes:''
{{{>level 1}}}
{{{>level 1}}}
{{{>>level 2}}}
{{{>>level 2}}}
{{{>>>level 3}}}
{{{>>>level 3}}}
{{{>>level 2}}}
{{{>level 1}}}

produces:
>level 1
>level 1
>>level 2
>>level 2
>>>level 3
>>>level 3
>>level 2
>level 1

''Extended blockquotes:''
{{{<<<}}}
{{{Extended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotes}}}
{{{<<<}}} 

produces:
<<<
Extended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotesExtended blockquotes
<<<

|bgcolor(#dddddd):Links with wikiwords|EnchiLada (inactive link - no tiddler yet)<br>WikiWord (active link to tiddler)|{{{EnchiLada}}}<br>{{{WikiWord}}}|
|bgcolor(#dddddd):~De-Wikify a ~WikiWord|~WikiWord, ~EnchiLada|{{{~WikiWord, ~EnchiLada}}}|
|bgcolor(#dddddd):Links with brackets|[[How to add background images]]|{{{[[How to add background images]]}}}|
|bgcolor(#dddddd):Pretty links|[[display text|ColorSchemes]] - links to the tiddler of color schemes|{{{[[display text|ColorSchemes]]}}}|
|bgcolor(#dddddd):External links work the same way:|http://groups.google.com/group/TiddlyWiki <br><br>[[TiddlyWiki Google group|http://groups.google.com/group/TiddlyWiki]]|{{{http://groups.google.com/group/TiddlyWiki}}} <br><br> {{{[[TiddlyWiki Google group|http://groups.google.com/group/TiddlyWiki]]}}}|
|bgcolor(#dddddd):Links to local files|To a file on a CD in your D drive: <br><br>To a file on your USB stick on your e drive: <br><br>To a file in your hard drive:|{{{file:///D:/filename.doc/}}}<br><br>{{{file:///E:/filename.doc/}}}<br><br>{{{file:///C:/filepath/filename.doc/}}}| 

''Images:''
{{{[img[http://farm1.static.flickr.com/39/122259544_6913ca58f3_m.jpg]]}}} is the formatting for:

[img[http://farm1.static.flickr.com/39/122259544_6913ca58f3_m.jpg]]

''A tip from Jeremy Hodge:''
"...[You] may add an image as a local file with the following: {{{[img[.\filepath\filename.jpg]]}}} which adds a picture from the directory that is contained within the same directory as TW. This is very useful for me or anyone who carries their own TW on a USB drive such as myself."

''Numbered lists:''
{{{#item one }}}
{{{##Item 1a}}}
{{{###Item 1ai}}} 

produces:
#item one   
##Item 1a 
###Item 1ai 
''Bulleted lists:''
{{{*Bullet one}}}
{{{**Bullet two}}}
{{{***Bullet three}}}
 
produces:
*Bullet one    
**Bullet two    
***Bullet level three

!This is the formatting:

{{{|!Table header|!Column Two|}}}
{{{|>| colspan |}}}
{{{| rowspan |left aligned|}}}
{{{|~| right aligned|}}}
{{{|bgcolor(#DC1A1A):colored| centered |}}}
{{{||*lists<br>*within<br>*tables<br><br>and double-spaced too|}}}
{{{|caption|c}}}

!This is the result:

|!Table header|!Column Two|
|>| colspan |
| rowspan |left aligned|
|~| right aligned|
|bgcolor(#DC1A1A):colored| centered |
||*lists<br>*within<br>*tables<br><br>and double-spaced too|
|caption|c

[[More information on tables]]

!Format text
|!Format|!It will look like this...|!...if you format it like this...|
|Bold-faced type|''text''|{{{''text''}}}|
|Italic text|//text//|{{{//text//}}}|
|Underlined text|__text__|{{{__text__}}}|
|Strike-through text|--text--|{{{--text--}}}|
|Colored text|@@color(green):green colored@@|{{{@@color(green):green colored@@}}}|
|Text with colored background|@@bgcolor(#ff0000):color(#ffffff):red colored@@|{{{@@bgcolor(#ff0000):color(#ffffff):red colored@@}}}|
|Highlighting|@@text@@|{{{@@text@@}}}|
|Superscript|2^^3^^=8|{{{2^^3^^=8}}}|
|Subscript|a~~ij~~ = -a~~ji~~|{{{a~~ij~~ = -a~~ji~~}}}|

!Make the first letter of a paragraph extra large
(from Morris Gray's TW Help)

''Sample'':

{{firstletter{
 @@color:#bbbbbb;O@@}}}kay, so you know how to use ~TiddlyWiki, but now you want more. You want to change the color or layout. You want to add features to it. As the subtitle says, this is an entry-level introduction, so I am not going to show you how to do every possible thing you can do with ~TiddlyWiki. I probably don't know half of what can be done. Advanced documentation such as that found at http://www.tiddlywiki.org/wiki and http://tiddlyspot.com/twhelp/ can hopefully expand your horizons. 

''How to do it:''

1. Add the following code to your StyleSheet:

 {{{
.firstletter{ float:left; width:0.75em; font-size:400%; font-family:times,arial; line-height:60%; }
}}}

2. Add the following code to your tiddler at the place where your enlarged letter would go (replacing "O" with the appropriate letter):
{{{
{{firstletter{
 @@color:#c06;O@@
 }}}
}}}

<html><a href="http://www.flickr.com/photos/giffmex/104273681/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/38/104273681_fa9947a962_m.jpg" width="240" height="160" alt="100_1474b" /></a></html>

Background: #ffee55
Foreground: #000
PrimaryPale: #ffbb33
PrimaryLight: #88bbff
PrimaryMid: #0066cc
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #ff9933
SecondaryMid: #db4
SecondaryDark: #cc3300
TertiaryPale: #ffbb33
TertiaryLight: #EEC591
TertiaryMid: #440044
TertiaryDark: #000

/***
| Name:|HideWhenPlugin|
| Description:|Allows conditional inclusion/exclusion in templates|
| Version:|6.9.3|
| Date:|30-Sep-2006|
| Source:|http://mptw.tiddlyspot.com/#HideWhenPlugin|
| Author:|Simon Baird <simon.baird@gmail.com>|
For use in ViewTemplate and EditTemplate. Eg
{{{<div macro="showWhen tiddler.tags.contains('Task')">[[TaskToolbar]]</div>}}}
{{{<div macro="showWhen tiddler.modifier == 'BartSimpson'"><img src="bart.gif"/></div>}}}
***/
//{{{
merge(config.macros,{

 hideWhen: { handler: function (place,macroName,params,wikifier,paramString,tiddler) {
 if (eval(paramString)) {
 removeChildren(place);
 place.parentNode.removeChild(place);
 }
 }},

 showWhen: { handler: function (place,macroName,params,wikifier,paramString,tiddler) {
 config.macros.hideWhen.handler(place,macroName,params,wikifier,'!('+paramString+')',tiddler);
 }}

});

//}}}

TiddlyWiki was designed to be a "client-side" wiki - a wiki that you can use while offline, as opposed to an online "server-side" wiki such as Wikipedia. Nevertheless, you may wish to have your TW online, as a blog, or maybe to have it handy to edit from other locations. If so, there are several ways to host your ~TiddlyWiki online.

''If you need free hosting'', check out the following sites:
*''Tiddlyspot'' at http://tiddlyspot.com. They even have several flavors of ~TWs to choose from.
*''~ServerSideWiki'' at http://serversidewiki.com.

''If you have your own website,'' here is the best option I know of:
*~BidiXTW's ''~UploadPlugin'' at http://tiddlywiki.bidix.info/ - [[Simple instructions for BidiX's UploadPlugin]]

You'll have to know what you're doing for the options below. The documentation isn't straightforward for beginners.
*''ccTiddly'' at http://cctiddly.sourceforge.net
*''~MiniTiddlerServer'' at http://www.minitiddlyserver.com
*''~PrinceTiddlyWiki'' at http://ptw.sourceforge.net
*''~PHPTiddlyWiki'' at http://www.patrickcurry.com/tiddly

Here are a few tips for [[Adapting TiddlyWiki for use as a website]]

Let's say you're using a more typical ~TiddlyWiki file, one that has a left-hand ~MainMenu, and you want to have a top menu just like this tutorial does. (You make me blush with pride). Here's how:

!Step one: Add the horizontal menu code to your StyleSheet
There are many style tweaks you could give to your top menu. The following code is from the Monkey Pirate ~TiddlyWiki theme by Simon Baird. Add this code to your StyleSheet tiddler:
/*{{{*/

/* horizontal main menu */

#displayArea { margin: 1em 15.5em 0em 1em; } /* use the full horizontal width */

#topMenu { background: [[ColorPalette::PrimaryMid]]; color: [[ColorPalette::PrimaryPale]]; padding: 0.2em 0.2em 0.2em 0.5em; border-bottom: 2px solid #000000; }

#topMenu br { display: none; }

#topMenu .button, #topMenu .tiddlyLink, #topMenu a { margin-left: 0.25em; margin-right: 0.25em; padding-left: 0.5em; padding-right: 0.5em; color: [[ColorPalette::PrimaryPale]]; font-size: 1.15em; }

#topMenu .button:hover, #topMenu .tiddlyLink:hover { background: [[ColorPalette::PrimaryDark]]; }

/*}}}*/

!Step two: add the horizontal menu rule to the PageTemplate
In PageTemplate, right above this code for your regular MainMenu:

<!--{{{-->
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<!--}}}-->

Add the following three lines:

<!--{{{-->
<!-- horizontal MainMenu -->
<div id='topMenu' refresh='content' tiddler='MainMenu'></div>
<!--original MainMenu menu-->
<!--}}}-->

(The first of the three lines above is the name for the topmenu code. The second is the actual topmenu code. The third is the name for the original mainmenu code, and it should now be right above the original code.

Let's say you're working with a file based on this tutorial or some other ~TiddlyWiki that has a top menu. You will need to do three things to get rid of that top menu and make the left-hand menu visible.

!Step one: remove the top menu lines from the PageTemplate.
Open PageTemplate and delete the following two lines:

<!--{{{-->
<!-- horizontal MainMenu -->
<div id='topMenu' refresh='content' tiddler='MainMenu'></div>
<!--}}}-->

!Step two: remove the 'safety guards' from the original MainMenu code
In PageTemplate still, change this line:
<!--{{{-->
<!--<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>-->
<!--}}}-->
So that it looks like this:
<!--{{{-->
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<!--}}}-->

!Step three: Adjust the MainMenu and display area in the StyleSheet:
In StyleSheet, add this code, which widens the left-hand MainMenu area and narrows the Tiddler display area:

<!--{{{-->
/* Widens the mainmenu and adds padding between right-aligned menu text and the right edge of the menu. */

#mainMenu {
 width: 13em;
 padding: 4em 2em 2em 0.5 em;
}

/* Moves tiddler display area to the right to account for widened mainmenu */

#displayArea {
 margin: 0em 1em 0em 15em;
}
<!--}}}-->

That should be it! If you still have problems, let me know at giff (at) giffmex (dot) org.

{{invisibletable{
|width:25em; When I became acquainted with ~TiddlyWiki in September 2006 I //instantly// realized how useful it would be for me. But at the time there was not much documentation, and what little existed was written by and for computer geniuses. Their documentation assumed that the reader already knew quite a bit about various computer codes and the inner workings of ~TiddlyWiki.<br><br>So I had to learn ~TiddlyWiki the hard, slow way. The people at the ~TiddlyWiki Google group were very helpful in guiding me along. But I knew not every newcomer like me would want to go through such a tedious learning process. So I decided to create this simple tutorial. If you've heard about ~TiddlyWiki but don't know "Tiddly squat" about it, then this tutorial is for you. Enjoy!|''Basic instructions:''<br>[[What in the world is a TiddlyWiki?]]<br>[[For beginners: reading TiddlyWikis on the Internet]]<br>[[Save a TiddlyWiki file to your computer]]<br>[[Browser-specific issues]]<br>[[Printing from a TiddlyWiki file]]<br>[[For medium users: adding your own material to a TiddlyWiki file]]<br>[[For advanced users: Customize your TW experience]]<br>[[Host your TiddlyWiki online]]<br><br>''Also helpful:''<br>[[A visual guide to the TiddlyWiki layout]]<br>[[Version 2.2]]<br>[[Special formatting]]<br>[[Where to go for more information]]<br><br>If you found this tutorial helpful, would you consider helping me buy books via an Amazon gift certificate?<br><br><html><a href="https://www.amazon.com/gp/registry/wishlist/1OTJM9IE7SPVS/ref=wl_web/"><img src="https://images-na.ssl-images-amazon.com/images/G/01/gifts/registries/wishlist/v2/web/wl-btn-74-b._V46774601_.gif" width="74" alt="My Amazon.com Wish List" height="42" border="0" /></a></html>|
}}}

Add the following code to the StyleSheet tiddler, being sure to place your image url inside the paretheses:

<!--{{{-->
body {background-image: url();
background-repeat: repeat; background-position: left; backgound-color: transparent; font-family: Helvetica;} 
<!--}}}-->

Obviously if it is an image on the Internet, you will only have access to the image while online.

I honestly don't remember when or where I found the information below. But I've cut-and-pasted it here (with a few minor adjustments) because it is a nice visual explanation of gradients.

<<gradient horiz #bbbbbb #eeeeee #ffffff>>The new GradientMacro allows simple horizontal and vertical coloured gradients. They are constructed from coloured HTML elements, and don't require any images to work.>>

The syntax for the gradient macro looks like this:
{{{
<<gradient vert #ffffff #ffdddd #ff8888>>gradient fill>>
}}}

Inside double angle brackets there are ''four elements:'' 
#"gradient" tells ~TiddlyWiki what kind of macro this is.
#"vert" is for vertical gradients and "horiz" is for horizontal gradients.
#What follows is a sequence of the code for the two or more colors that you want in your gradient. You may use CSS or RGB ways of indicating colors. For more on colors, see [[here|Changing the colors of a TiddlyWiki]].
#">>gradient fill>>" finishes off your macro.

''Here is another gradient example:''
| <<gradient vert #ffffff #ffdddd #ff8888>>No images were harmed in the making of this gradient fill>> | <<gradient vert #ffffff #ddffdd #88ff88>>No images were harmed in the making of this gradient fill>> | <<gradient vert #ffffff #ddddff #8888ff>>No images were harmed in the making of this gradient fill>> |

Here's the code for the image above.
{{{
| <<gradient vert #ffffff #ffdddd #ff8888>>No images were harmed in the making of this gradient fill>> | <<gradient vert #ffffff #ddffdd #88ff88>>No images were harmed in the making of this gradient fill>> | <<gradient vert #ffffff #ddddff #8888ff>>No images were harmed in the making of this gradient fill>> |
}}}

Inline CSS definitions can be added to gradient fills like this:

<<gradient vert #000000 #660000 #aa2222>>color:#ffffff;font-size:12pt;Darkness>>

Here's the code for the image above.
{{{
<<gradient vert #000000 #660000 #aa2222>>color:#ffffff;font-size:12pt;Darkness>>
}}}

If you create tiddlers with the same information over and over (contacts, quotations, recipes, etc), you are probably going to want a template tiddler to save time. Then you are going to want a macro that creates a new tiddler that includes the information from the template. Here's how:

#''Create the template tiddler.'' Put text and tables and formatting exactly the way you want your new tiddlers based on this template to appear.
#''Create a macro that will open a new tiddler based on your template.''<br>Where I have listed YYYY, insert the words you want to appear in the label for your macro. Where I have listed ZZZZ, insert the exact title of the template tiddler that each new tiddler will be based on. Where I have XXXX insert any tags that you want to be appended to each tiddler that the macro creates.
/*{{{*/
<<newTiddler label:"YYYY" tag:"XXXX" text:{{store.getTiddlerText('ZZZZ')}}>>
/*}}}*/

3. ''Decide where you are going to store your macro.'' You can add it to the SideBarOptions menu under 'new tiddler' and 'new journal.' Or you can add it to a tiddler that you can access from your MainMenu.

Plugins are tiddlers embedded with codes that add special functions to ~TiddlyWiki files. Plugins are easier to install than I thought they would be. Here's how:
*Find the plugin you want and grab the url of the page it's on. (Copy the url from your browser's search window).
*In your own ~TiddlyWiki file, click on ImportTiddlers, found in the backstage area for versions 2.2 and beyond, and on the InterfaceOptions panel in the righthand sidebar of earlier versions.
*Paste the url you've copied into the top window of the import tiddlers tiddler that appears. Then click Fetch.
*A list of all the tiddlers found in the other file will appear. Find the tiddler of the plugin you want, then check the box next to it.
*Below the list is a menu that says "More actions..." Choose "Import these tiddlers."
*Your screen will blink and change several times while your file is being updated. If you have your ~TiddlyWiki configured to automatically save every change (which is default), the box will appear in the top right corner saying it has saved the change. If you have it configured another way, then click on "save changes".
*Hit the 'refresh' or 'reload' button on your browser.
*The plugin should now be installed and usable on your file. That's it!

/***
|Name|InlineJavascriptPlugin|
|Source|http://www.TiddlyTools.com/#InlineJavascriptPlugin|
|Version|1.6.0|
|Author|Eric Shulman - ELS Design Studios|
|License|http://www.TiddlyTools.com/#LegalStatements <<br>>and [[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|~CoreVersion|2.1|
|Type|plugin|
|Requires||
|Overrides||
|Description|Insert Javascript executable code directly into your tiddler content.|

''Call directly into TW core utility routines, define new functions, calculate values, add dynamically-generated TiddlyWiki-formatted output'' into tiddler content, or perform any other programmatic actions each time the tiddler is rendered.
!!!!!Usage
<<<
When installed, this plugin adds new wiki syntax for surrounding tiddler content with {{{<script>}}} and {{{</script>}}} markers, so that it can be treated as embedded javascript and executed each time the tiddler is rendered.

''Deferred execution from an 'onClick' link''
By including a {{{label="..."}}} parameter in the initial {{{<script>}}} marker, the plugin will create a link to an 'onclick' script that will only be executed when that specific link is clicked, rather than running the script each time the tiddler is rendered.  You may also include a {{{title="..."}}} parameter to specify the 'tooltip' text that will appear whenever the mouse is moved over the onClick link text

''External script source files:''
You can also load javascript from an external source URL, by including a src="..." parameter in the initial {{{<script>}}} marker (e.g., {{{<script src="demo.js"></script>}}}).  This is particularly useful when incorporating third-party javascript libraries for use in custom extensions and plugins.  The 'foreign' javascript code remains isolated in a separate file that can be easily replaced whenever an updated library file becomes available.

''Display script source in tiddler output''
By including the keyword parameter "show", in the initial {{{<script>}}} marker, the plugin will include the script source code in the output that it displays in the tiddler.

''Defining javascript functions and libraries:''
Although the external javascript file is loaded while the tiddler content is being rendered, any functions it defines will not be available for use until //after// the rendering has been completed.  Thus, you cannot load a library and //immediately// use it's functions within the same tiddler.  However, once that tiddler has been loaded, the library functions can be freely used in any tiddler (even the one in which it was initially loaded).

To ensure that your javascript functions are always available when needed, you should load the libraries from a tiddler that will be rendered as soon as your TiddlyWiki document is opened.  For example, you could put your {{{<script src="..."></script>}}} syntax into a tiddler called LoadScripts, and then add {{{<<tiddler LoadScripts>>}}} in your MainMenu tiddler.

Since the MainMenu is always rendered immediately upon opening your document, the library will always be loaded before any other tiddlers that rely upon the functions it defines.  Loading an external javascript library does not produce any direct output in the tiddler, so these definitions should have no impact on the appearance of your MainMenu.

''Creating dynamic tiddler content''
An important difference between this implementation of embedded scripting and conventional embedded javascript techniques for web pages is the method used to produce output that is dynamically inserted into the document:
* In a typical web document, you use the document.write() function to output text sequences (often containing HTML tags) that are then rendered when the entire document is first loaded into the browser window.
* However, in a ~TiddlyWiki document, tiddlers (and other DOM elements) are created, deleted, and rendered "on-the-fly", so writing directly to the global 'document' object does not produce the results you want (i.e., replacing the embedded script within the tiddler content), and completely replaces the entire ~TiddlyWiki document in your browser window.
* To allow these scripts to work unmodified, the plugin automatically converts all occurences of document.write() so that the output is inserted into the tiddler content instead of replacing the entire ~TiddlyWiki document.

If your script does not use document.write() to create dynamically embedded content within a tiddler, your javascript can, as an alternative, explicitly return a text value that the plugin can then pass through the wikify() rendering engine to insert into the tiddler display.  For example, using {{{return "thistext"}}} will produce the same output as {{{document.write("thistext")}}}.

//Note: your script code is automatically 'wrapped' inside a function, {{{_out()}}}, so that any return value you provide can be correctly handled by the plugin and inserted into the tiddler.  To avoid unpredictable results (and possibly fatal execution errors), this function should never be redefined or called from ''within'' your script code.//

''Accessing the ~TiddlyWiki DOM''
The plugin provides one pre-defined variable, 'place', that is passed in to your javascript code so that it can have direct access to the containing DOM element into which the tiddler output is currently being rendered.

Access to this DOM element allows you to create scripts that can:
* vary their actions based upon the specific location in which they are embedded
* access 'tiddler-relative' information (use findContainingTiddler(place))
* perform direct DOM manipulations (when returning wikified text is not enough)
<<<
!!!!!Examples
<<<
an "alert" message box:
><script show>
	alert('InlineJavascriptPlugin: this is a demonstration message');
</script>
dynamic output:
><script show>
	return (new Date()).toString();
</script>
wikified dynamic output:
><script show>
	return "link to current user: [["+config.options.txtUserName+"]]";
</script>
dynamic output using 'place' to get size information for current tiddler:
><script show>
   if (!window.story) window.story=window;
   var title=story.findContainingTiddler(place).id.substr(7);
   return title+" is using "+store.getTiddlerText(title).length+" bytes";
</script>
creating an 'onclick' button/link that runs a script:
><script label="click here" title="clicking this link will show an 'alert' box" show>
   if (!window.story) window.story=window;
   alert("Hello World!\nlinktext='"+place.firstChild.data+"'\ntiddler='"+story.findContainingTiddler(place).id.substr(7)+"'");
</script>
loading a script from a source url:
>http://www.TiddlyTools.com/demo.js contains:
>>{{{function demo() { alert('this output is from demo(), defined in demo.js') } }}}
>>{{{alert('InlineJavascriptPlugin: demo.js has been loaded'); }}}
><script src="demo.js" show>
	return "loading demo.js..."
</script>
><script label="click to execute demo() function" show>
	demo()
</script>
<<<
!!!!!Installation
<<<
import (or copy/paste) the following tiddlers into your document:
''InlineJavascriptPlugin'' (tagged with <<tag systemConfig>>)
<<<
!!!!!Revision History
<<<
''2007.02.19 [1.6.0]'' added support for title="..." to specify mouseover tooltip when using an onclick (label="...") script
''2006.10.16 [1.5.2]'' add newline before closing '}' in 'function out_' wrapper.  Fixes error caused when last line of script is a comment.
''2006.06.01 [1.5.1]'' when calling wikify() on script return value, pass hightlightRegExp and tiddler params so macros that rely on these values can render properly
''2006.04.19 [1.5.0]'' added 'show' parameter to force display of javascript source code in tiddler output
''2006.01.05 [1.4.0]'' added support 'onclick' scripts.  When label="..." param is present, a button/link is created using the indicated label text, and the script is only executed when the button/link is clicked.  'place' value is set to match the clicked button/link element.
''2005.12.13 [1.3.1]'' when catching eval error in IE, e.description contains the error text, instead of e.toString().  Fixed error reporting so IE shows the correct response text.  Based on a suggestion by UdoBorkowski
''2005.11.09 [1.3.0]'' for 'inline' scripts (i.e., not scripts loaded with src="..."), automatically replace calls to 'document.write()' with 'place.innerHTML+=' so script output is directed into tiddler content.  Based on a suggestion by BradleyMeck
''2005.11.08 [1.2.0]'' handle loading of javascript from an external URL via src="..." syntax
''2005.11.08 [1.1.0]'' pass 'place' param into scripts to provide direct DOM access 
''2005.11.08 [1.0.0]'' initial release
<<<
!!!!!Credits
<<<
This feature was developed by EricShulman from [[ELS Design Studios|http:/www.elsdesign.com]]
<<<
!!!!!Code
***/
//{{{
version.extensions.inlineJavascript= {major: 1, minor: 6, revision: 0, date: new Date(2007,2,19)};

config.formatters.push( {
	name: "inlineJavascript",
	match: "\\<script",
	lookahead: "\\<script(?: src=\\\"((?:.|\\n)*?)\\\")?(?: label=\\\"((?:.|\\n)*?)\\\")?(?: title=\\\"((?:.|\\n)*?)\\\")?( show)?\\>((?:.|\\n)*?)\\</script\\>",

	handler: 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) {
			if (lookaheadMatch[1]) { // load a script library
				// make script tag, set src, add to body to execute, then remove for cleanup
				var script = document.createElement("script"); script.src = lookaheadMatch[1];
				document.body.appendChild(script); document.body.removeChild(script);
			}
			if (lookaheadMatch[5]) { // there is script code
				if (lookaheadMatch[4]) // show inline script code in tiddler output
					wikify("{{{\n"+lookaheadMatch[0]+"\n}}}\n",w.output);
				if (lookaheadMatch[2]) { // create a link to an 'onclick' script
					// add a link, define click handler, save code in link (pass 'place'), set link attributes
					var link=createTiddlyElement(w.output,"a",null,"tiddlyLinkExisting",lookaheadMatch[2]);
					link.onclick=function(){try{return(eval(this.code))}catch(e){alert(e.description?e.description:e.toString())}}
					link.code="function _out(place){"+lookaheadMatch[5]+"\n};_out(this);"
					link.setAttribute("title",lookaheadMatch[3]?lookaheadMatch[3]:"");
					link.setAttribute("href","javascript:;");
					link.style.cursor="pointer";
				}
				else { // run inline script code
					var code="function _out(place){"+lookaheadMatch[5]+"\n};_out(w.output);"
					code=code.replace(/document.write\(/gi,'place.innerHTML+=(');
					try { var out = eval(code); } catch(e) { out = e.description?e.description:e.toString(); }
					if (out && out.length) wikify(out,w.output,w.highlightRegExp,w.tiddler);
				}
			}
			w.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
		}
	}
} )
//}}}

The ''~LaunchApplicationsPlugin'' allows you to launch other programs (Outlook, Word, etc) from within ~TiddlyWiki. 

You can access it either [[here|http://www.Remotely-Helpful.com/TiddlyWiki/LaunchApplication.html]] or [[here|http://www.Remotely-Helpful.com/TiddlyWiki/LaunchApplication.html|]]. Be aware that there are security risks involved with some uses of this plugin. See Morris Gray's help file [[here|http://twhelp.tiddlyspot.com/#%5B%5BLaunch%20Applications%20Plugin%5D%5D]] for more information.

This information taken from Julian Knight's ~TiddlyWiki, which can be [[found here|http://knighjm.googlepages.com/knightnet-default-tw.html]].

Macros let you write tiddlers containing more exotic objects than just text. Here are the built-in macros:

|!Macro|!Description|!Syntax|
|allTags|List all the tags used in the current ~TiddlyWiki file<<br>>Each entry is a button that pops up the list of tiddlers for that tag<<br>><<slider sliderID [[Internal Macros/tags]] 'Click to show example output'>>|{{{<<allTags>>}}}|
|br|Force a line break|{{{<<br>>}}}|
|closeAll|Displays a button to close all displayed Tiddlers<<br>><<closeAll>>|{{{<<closeAll>>}}}|
|gradient|<<gradient [horiz|vert] #bbbbbb #eeeeee #ffffff>>Produces a horizontal or vertical background gradient fill>><<br>>There can be 2 or more colours in the format: #rrggbb (hex), or RGB(r,g,b) (CSS)<<br>>Other CSS formatting can also be added, e.g. {{{<<gradient vert #000000 #660000 #aa2222>>color:#ffffff;font-size:12pt;Darkness>>}}}|{{{<<gradient [horiz|vert] #bbbbbb #eeeeee #ffffff>>Some text here>>}}}|
|list all|List all Tiddlers in a Tiddler|{{{<<list all>>}}}|
|list missing|List all missing tiddlers|{{{<<list missing>>}}}|
|list orphans|List all orphaned tiddlers|{{{<<list orphans>>}}}|
|newJournal|Displays a button to create new date & Time stamped Tiddler (Date/time format optional)<<br>><<newJournal "DD MMM YYYY, hh:mm">> <<br>>You can also add optional tag names after the date format: <<newJournal "DD MMM YYYY, hh:mm" tag1 TagTwo>> |{{{<<newJournal [DateFormatString]>>}}} <<br>> {{{<<newJournal "DD MMM YYYY, hh:mm" tag1 TagTwo>>}}} |
|newTiddler|Displays a button to create new Tiddler<<br>><<newTiddler>>|{{{<<newTiddler>>}}}|
|permaview|Displays a button to change the URL link for all open Tiddlers - or the containing tiddler if used in the command bar (See the ViewTemplate)<<br>><<permaview>>|{{{<<permaview>>}}}|
|saveChanges |Button to save all ~TiddlyWiki changes (or the current tiddler if used in the command bar (see EditTemplate)<<br>><<saveChanges>>|{{{<<saveChanges>>}}}|
|search|Display a Search box<<br>><<search>>|{{{<<search>>}}}|
|slider|Display a Slider (a collapsable display of another tiddler)<<br>>See the allTags entry for an example. Note: Put quotes around the label if needing spaces<<br>>where: ''ID''=cookie name to be used to save the state of the slider, ''Tiddler''=name of the tiddler to include in the slider, ''Label''=label text of the slider button, ''tooltip''=text of the buttons tooltip|{{{<<slider ID Tiddler [Label] [toolTip]>>}}}|
|sparkline|Produces a sparkline graphic<<br>>e.g. <<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>>|{{{<<sparkline num1 num2 ... numN>>}}}|
|tabs|Display Tabbed content (contents of tab provided by another tiddler)|{{{<<tabs identifier tabLabel tabName Tiddlername>>}}}|
|tag|Display a Tag ~PopUp<<br>><<tag _Config>>|{{{<<tag tagName>>}}}|
|tagChooser|Used in EditTemplate to add tags to the tags field. Doesn't actually add anything unless in edit mode (though it does show the list)<<br>><<tagChooser>>|{{{<<tagChooser>>}}}|
|tagging|<<tiddler [[Internal Macros/tagging]]>>|{{{<<tagging [TiddlerTitle]>>}}}|
|tiddler|Display contents of another tiddler inline|{{{<<tiddler Tiddler>>}}}|
|timeline|Display a timeline list of tiddlers<<br>>where the sortfield is the sort order ("modified" or "created") and maxentries is the maximum number of entries|{{{<<timeline [sortfield] [maxentries]>>}}}|
|today|Display Today's Date<<br>>e.g. <<today>>|{{{<<today [DateFormatString]>>}}}|
|version|Display ~TiddlyWiki's version<<br>>e.g. <<version>>|{{{<<version>>}}}|

!DateFormatString
Several Macros including the today macro take a DateFormatString as an optional argument. This string can be a combination of ordinary text, with some special characters that get substituted by parts of the date:
* DDD - day of week in full (eg, "Monday")
* DD - day of month, 0DD - adds a leading zero
* MMM - month in full (eg, "July")
* MM - month number, 0MM - adds leading zero
* YYYY - full year, YY - two digit year
* hh - hours
* mm - minutes
* ss - seconds
!Notes
If you need to supply a parameter that should be evaluated (e.g. a JavaScript variable), enclose the parameter in {{{{{}}} and {{{}}}}} rather than quotes. Note however, that the scope used in the evaluation is {{{global}}} rather than {{{local}}}. In other words, the evaluation is done ''before'' the parameter is passed to the macro/plugin so it cannot access any of the variables or functions defined within the macro/plugin.
!Commands supported by the toolbar macro
{{{
config.commands = {
 closeTiddler: {text: "close", tooltip: "Close this tiddler"},
 closeOthers: {text: "close others", tooltip: "Close all other tiddlers"},
 editTiddler: {text: "edit", tooltip: "Edit this tiddler", readOnlyText: "view", readOnlyTooltip: "View the source of this tiddler"},
 saveTiddler: {text: "done", tooltip: "Save changes to this tiddler", readOnlyText: "done", readOnlyTooltip: "View this tiddler normally"},
 cancelTiddler: {text: "cancel", tooltip: "Undo changes to this tiddler", hideReadOnly: true},
 deleteTiddler: {text: "delete", tooltip: "Delete this tiddler", warning: "Are you sure you want to delete '%0'?", hideReadOnly: true},
 permalink: {text: "permalink", tooltip: "Permalink for this tiddler"},
 references: {text: "references", tooltip: "Show tiddlers that link to this one", popupNone: "No references"},
 jump: {text: "jump", tooltip: "Jump to another open tiddler"}
 };
}}}
(Julian Knight, 2006-04-06)
<part tagging hidden>
Produces a list (NB: <ul> ''not'' a popup) of links to tiddlers that carry the specified tag. If no tag is specified, it looks for tiddlers tagged with the name of the current tiddler.
In HTML, the list is formatted like so:
{{{
<ul>
<li class="listTitle">List title label</li>
<li><a class="tiddlyLink ..." href="javascript:;" onclick="..."
    refresh="link" tiddlyLink="ExampleOne">ExampleOne</a></li>
</ul>
}}}
</part>
<part tags hidden>
<<allTags>>
</part>

Macros are basically shortcuts. If you open up the ImportTiddlers tiddler, you will see an elaborate layout with text boxes and various colors and instructions. But if you double-click on it to go into edit mode, you will see only the following: {{{ <<importTiddlers>> }}}. This is a macro that creates the elaborate Import Tiddlers layout. 

Here is Julian Knight's fairly complete list of the macros built into ~TiddlyWiki, and what each macro does.  [[List of built-in macros]]

You can add your favorite macros to any tiddler, including the MainMenu and SideBarOptions.

[[How to use|How do you use a TiddlyWiki?]]
[[Glossary|TW glossary]]
[[Save this file|twfortherestofus.html]]
[[Español|http://www.giffmex.org/twtutorialespanol.html]]
[[Credits]]
[[Recent changes|Most recent changes]]
<<tiddler ToggleRightSidebar>>

The style sheets are the parts of ~TiddlyWiki that control and display the default code for the colors (StyleSheetColors), the page layout (StyleSheetLayout) and printing features (StyleSheetPrint) of a ~TiddlyWiki. You can override these defaults by adding code to the StyleSheet tiddler.

''Note:'' I used to make changes directly to the three original style sheets and in earlier versions of this tutorial I directed others to do the same. Others kindly pointed out the drawbacks of that approach: 
*If you make mistakes in the three main style sheets, they can't be undone. They must be restored from a back up copy or another ~TiddlyWiki. Making changes to ~StyleSheet allows you to retain the original code of the three main style sheets.
*If in the future you upgrade to a newer version of ~TiddlyWiki, you will lose the changes you made to the three main style sheets as they are upgraded. So it's better to have your changes saved in ~StyleSheet.
This file already has its own ~StyleSheet. I have provided captions to explain my own tweaks, so that you can see how it is done. Feel free to tweak it as needed.

''Simple indenting:''

{{{ {{indent{text }}} produces:

{{indent{text


''Headlines'':

{{{!Text}}} produces:
!Text
{{{!!Text}}} produces:
!!Text
{{{!!!Text}}} produces:
!!!Text
and so on.


''Dotted horizontal lines:'' 

{{{----}}} produces the following line:
----

Background: #eeddaa
Foreground: #000
PrimaryPale: #ddcc99
PrimaryLight: #bb8833
PrimaryMid: #553322
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #cccccc
SecondaryDark: #553322
TertiaryPale: #ddcc99
TertiaryLight: #EEC591
TertiaryMid: #553322
TertiaryDark: #8B7355

*[[Alternate the color of table rows]]
*[[Force the text in a cell not to wrap to the next line at a space]]
*[[Align the text in a cell at the top instead of the center]]

*[[Macros]]
*[[Slider macros]]
*[[The macro for tabbed lists]]
*[[TiddlyVault: your source for macros, plugins and themes]]

As always, you can check the timeline in the tabbed menu to the right to view recent changes. But to save you time, here are the newest changes:

''October 6, 2008''
*Updated [[Format links and images]]
*Added [[Adapting TiddlyWiki for use as a website]]

''May 24, 2008''
*Added info in [[Save a TiddlyWiki file to your computer]].
*Updated ToggleRightSidebar.

''August 25, 2007''
*[[Access files, folders, etc from within TiddlyWiki]] and the tiddlers contained therein.
*Updated [[The macro for tabbed lists]]
*[[Special note on modifying shadow tiddlers]]
*[[The SelectPaletteMacro]]
*[[TiddlySnip Firefox addon]]

''August 24, 2007''
*[[Use IFrames to embed other webpages in your TiddlyWiki]]
*Large initial letters in [[Format text]]
*[[More information on tables]] and the tiddlers contained therein.

''August 23, 2007''
*Added iframes to show the [[Coloria color names]] and the [[4096 Color wheel]]. Swiped the idea from Morris Gray's tutorial. Good thinking, Morris!
*Added a couple items to the glossary.
*Cleaned up a few tiddlers to make them less cluttered, including [[How do you use a TiddlyWiki?]] and [[For medium users: adding your own material to a TiddlyWiki file]].
*[[Format ASCII symbols, foreign symbols, math symbols]]
*[[Open the indexes of your hard drive, CD or USB files from inside your TiddlyWiki]]
*[[Toggle the right hand menu]]
*[[Changing the look of the basic page layout - understanding the PageTemplate]]
*[[Changing the look of a tiddler in viewing mode - understanding the ViewTemplate]]
*[[Changing the look of a tiddler in editing mode - understanding the EditTemplate]]
*[[Host your TiddlyWiki online]]

''July 4, 2007''
*[[Tips for speeding up performance on large TiddlyWikis]]

''June 8, 2007''
*Upgraded to version 2.2.1, with instructions at [[Version 2.2]]. Most pertinent tiddlers changed, but the guide to the TW screen will need to be adjusted soon to account for the fact that ImportTiddlers has been moved.

''June 4, 2007''
*Basically cleaned up a few texts to simplify and correct what I had written before. I also mention the "My Notes" ~TiddlyWiki I created for more powerful categorization of notes. 

''May 26, 2007''
*Added the [[easyFormat]] plugin and the other tiddlers needed to make it work. This allows you to quickly add formatting to selected text within a tiddler. Edit this tiddler and click on the word "Format" to see a dropdown menu of formatting options.
*Changed the layout of the page.

''March 26, 2007''
*Added a plugin to allow users to toggle the sidebar. 

''March 5, 2007''
*Finally cleaned up the [[How to Format Text]] tiddler. This is much improved, and adds a few items such as lists in tables and links to local files.
*[[How to create new tiddlers based on a template tiddler]] in the advanced section.
*[[Create forms with editable fields]] in the advanced section.
*[[Some great "power" plugins]] in the advanced section.
*[[Advanced ideas for tags]], includes how to create an index for a tag and how to create an index for all tiddlers by tag. Accessible from the medium and advanced sections.
*Added a few terms to the glossary.
*Adjusted Stylesheet so that topmenu doesn't print.
*Deleted dead links to blogjones.
*Cut and pasted Julian Knight's info on macros in [[List of built-in macros]] just in case that becomes a dead link, too! 

''March 2, 2007''
*Added [[greenishgray]] color scheme.

''Feb. 22, 2007''
*Added a section on how to create [[Slider macros]].
*Added a section on [[Top menus versus left hand main menus]], including how to change them back and forth.
*Added a section on [[How to add background images]] and one on [[How to create gradients]].
*Added link to ''~TiddlyWiki in Action'' in [[What are TiddlyWikis being used for?]].

''Feb. 10, 2007''
*Moved the MainMenu to the header and reworded the tiddlers that refer to it.

''Jan. 27 2007''
*Made corrections and clean-up to the section [[Messing with StyleSheets]]
*Added my own StyleSheet with captions
*Added two new color schemes, [[Mauve]] and [[Mocha]], and improved [[Apples]] and [[Blueberry]].
*Added note about our new personal organizer in [[What are TiddlyWikis being used for?]]

''Jan. 24 2007'':
*Added a link to a list of TW macros in [[Macros]].
*Added a link to another TW tutorial in [[Where to go for more information]]

''other recent changes'':
*Double-spacing between items on bulleted and numbered lists
*A tiddler on DaveGifford (information about the author of this tutorial)
*[[How to install a plugin]] and [[My favorite plugins]]
*[[Macros]]
*[[Messing with StyleSheets]] and a description of the tweaks I made to the {{{StyleSheetLayout}}} of this file.
*Link to the Spanish version is in the MainMenu. 
*[[TW glossary]] begun.

There are many plugins that expand the usefulness of ~TiddlyWiki. 

''Calendars:'' 
Here are links to three calendars: 

{{indent{Two are plugins, 
{{indent{http://www.rumsby.org/yatwa/#CalendarPlugin and {{indent{http://www.math.ist.utl.pt/~psoares/addons.html#PlasticCalendarPlugin, 

{{indent{and the other is a tool to help you make calendars in table format: 
{{indent{http://33ad.org/tools/gtdtwcal.php

''Tag clouds:'' 
They take your tags and visualize them for you, from most frequent to least frequent. Here is a good one by Clint Checkett: http://15black.bluedepot.com/twtests/tagcloud.htm#%5B%5BtagCloud%20plugin%5D%5D

''Colored boxes:'' 
I think these are cool, even though I haven't actually used them. http://www.math.ist.utl.pt/~psoares/addons.html#BoxesPlugin

''Light boxes'' 
Click on a photo, and the photo illuminates while the rest of the screen goes dark. Here is the link: http://solo.dc3.com/tw/#DC3.LightBox

''Check boxes'' 
http://www.TiddlyTools.com/#CheckboxPlugin

''Contact information plugins'' 
http://macrolinz.com/macrolinz/tiddlyware/macrolinz.html#ContactInfoPlugin

''Various foreign language translations'' of the TiddlyWiki buttons and menus. See my temporary fix for the Spanish language here: http://www.giffmex.org/twtutorialespanol.html#SpanishLingoGiffmex. There is a permanent version in the works.

I would be remiss if I didn't also mention the HUGE list of plugins at TiddlyTools. http://www.tiddlytools.com/

If you save this ~TiddlyWiki file to your computer and then check out this tiddler, you will see buttons that allow you to access an index of your C, D, E, or F files. Why ever leave your ~TiddlyWiki again? Thanks to Morris Gray whose [[TW Help site|http://twhelp.tiddlyspot.com]] drew this to my attention.

|<html><FORM action="file:///c:/" target="_blank"><INPUT type=submit value="c:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///d:/" target="_blank"><INPUT type=submit value="d:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///e:/" target="_blank"><INPUT type=submit value="e:\ drive" name="button" class="btn" name=submit2></FORM></html>|<html><FORM action="file:///f:/" target="_blank"><INPUT type=submit value="f:\ drive" name="button" class="btn" name=submit2></FORM></html>|

<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
	<div class='headerShadow'>
		<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
		<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
	</div>
	<div class='headerForeground'>
		<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
		<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
	</div>
</div>
<!-- horizontal MainMenu -->
<div id='topMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
	<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
	<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
	<div id='messageArea'></div>
	<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

|Standard Periodic Table (ref. Wikipedia)|c
|| !1 | !2 |!| !3 | !4 | !5 | !6 | !7 | !8 | !9 | !10 | !11 | !12 | !13 | !14 | !15 | !16 | !17 | !18 |
|!1|bgcolor(#a0ffa0): @@color(red):H@@ |>|>|>|>|>|>|>|>|>|>|>|>|>|>|>|>||bgcolor(#c0ffff): @@color(red):He@@ |
|!2|bgcolor(#ff6666): Li |bgcolor(#ffdead): Be |>|>|>|>|>|>|>|>|>|>||bgcolor(#cccc99): B |bgcolor(#a0ffa0): C |bgcolor(#a0ffa0): @@color(red):N@@ |bgcolor(#a0ffa0): @@color(red):O@@ |bgcolor(#ffff99): @@color(red):F@@ |bgcolor(#c0ffff): @@color(red):Ne@@ |
|!3|bgcolor(#ff6666): Na |bgcolor(#ffdead): Mg |>|>|>|>|>|>|>|>|>|>||bgcolor(#cccccc): Al |bgcolor(#cccc99): Si |bgcolor(#a0ffa0): P |bgcolor(#a0ffa0): S |bgcolor(#ffff99): @@color(red):Cl@@ |bgcolor(#c0ffff): @@color(red):Ar@@ |
|!4|bgcolor(#ff6666): K |bgcolor(#ffdead): Ca ||bgcolor(#ffc0c0): Sc |bgcolor(#ffc0c0): Ti |bgcolor(#ffc0c0): V |bgcolor(#ffc0c0): Cr |bgcolor(#ffc0c0): Mn |bgcolor(#ffc0c0): Fe |bgcolor(#ffc0c0): Co |bgcolor(#ffc0c0): Ni |bgcolor(#ffc0c0): Cu |bgcolor(#ffc0c0): Zn |bgcolor(#cccccc): Ga |bgcolor(#cccc99): Ge |bgcolor(#cccc99): As |bgcolor(#a0ffa0): Se |bgcolor(#ffff99): @@color(green):Br@@ |bgcolor(#c0ffff): @@color(red):Kr@@ |
|!5|bgcolor(#ff6666): Rb |bgcolor(#ffdead): Sr ||bgcolor(#ffc0c0): Y |bgcolor(#ffc0c0): Zr |bgcolor(#ffc0c0): Nb |bgcolor(#ffc0c0): Mo |bgcolor(#ffc0c0): Tc |bgcolor(#ffc0c0): Ru |bgcolor(#ffc0c0): Rh |bgcolor(#ffc0c0): Pd |bgcolor(#ffc0c0): Ag |bgcolor(#ffc0c0): Cd |bgcolor(#cccccc): In |bgcolor(#cccccc): Sn |bgcolor(#cccc99): Sb |bgcolor(#cccc99): Te |bgcolor(#ffff99): I |bgcolor(#c0ffff): @@color(red):Xe@@ |
|!6|bgcolor(#ff6666): Cs |bgcolor(#ffdead): Ba |bgcolor(#ffbfff):^^*1^^|bgcolor(#ffc0c0): Lu |bgcolor(#ffc0c0): Hf |bgcolor(#ffc0c0): Ta |bgcolor(#ffc0c0): W |bgcolor(#ffc0c0): Re |bgcolor(#ffc0c0): Os |bgcolor(#ffc0c0): Ir |bgcolor(#ffc0c0): Pt |bgcolor(#ffc0c0): Au |bgcolor(#ffc0c0): @@color(green):Hg@@ |bgcolor(#cccccc): Tl |bgcolor(#cccccc): Pb |bgcolor(#cccccc): Bi |bgcolor(#cccc99): Po |bgcolor(#ffff99): At |bgcolor(#c0ffff): @@color(red):Rn@@ |
|!7|bgcolor(#ff6666): Fr |bgcolor(#ffdead): Ra |bgcolor(#ff99cc):^^*2^^|bgcolor(#ffc0c0): Lr |bgcolor(#ffc0c0): Rf |bgcolor(#ffc0c0): Db |bgcolor(#ffc0c0): Sq |bgcolor(#ffc0c0): Bh |bgcolor(#ffc0c0): Hs |bgcolor(#ffc0c0): Mt |bgcolor(#ffc0c0): Ds |bgcolor(#ffc0c0): Rg |bgcolor(#ffc0c0): @@color(green):Uub@@ |bgcolor(#cccccc): Uut |bgcolor(#cccccc): Uuq |bgcolor(#cccccc): Uup |bgcolor(#cccccc): Uuh |bgcolor(#fcfecc): @@color(#cccccc):Uus@@ |bgcolor(#ecfefc): @@color(#cccccc):Uuo@@ |

| !Lanthanides^^*1^^|bgcolor(#ffbfff): La |bgcolor(#ffbfff): Ce |bgcolor(#ffbfff): Pr |bgcolor(#ffbfff): Nd |bgcolor(#ffbfff): Pm |bgcolor(#ffbfff): Sm |bgcolor(#ffbfff): Eu |bgcolor(#ffbfff): Gd |bgcolor(#ffbfff): Tb |bgcolor(#ffbfff): Dy |bgcolor(#ffbfff): Ho |bgcolor(#ffbfff): Er |bgcolor(#ffbfff): Tm |bgcolor(#ffbfff): Yb |
| !Actinides^^*2^^|bgcolor(#ff99cc): Ac |bgcolor(#ff99cc): Th |bgcolor(#ff99cc): Pa |bgcolor(#ff99cc): U |bgcolor(#ff99cc): Np |bgcolor(#ff99cc): Pu |bgcolor(#ff99cc): Am |bgcolor(#ff99cc): Cm |bgcolor(#ff99cc): Bk |bgcolor(#ff99cc): Cf |bgcolor(#ff99cc): Es |bgcolor(#ff99cc): Fm |bgcolor(#ff99cc): Md |bgcolor(#ff99cc): No |

*Chemical Series of the Periodic Table
**@@bgcolor(#ff6666): Alkali metals@@
**@@bgcolor(#ffdead): Alkaline earth metals@@
**@@bgcolor(#ffbfff): Lanthanides@@
**@@bgcolor(#ff99cc): Actinides@@
**@@bgcolor(#ffc0c0): Transition metals@@
**@@bgcolor(#cccccc): Poor metals@@
**@@bgcolor(#cccc99): Metalloids@@
**@@bgcolor(#a0ffa0): Nonmetals@@
**@@bgcolor(#ffff99): Halogens@@
**@@bgcolor(#c0ffff): Noble gases@@

*State at standard temperature and pressure
**those in @@color(red):red@@ are gases
**those in @@color(green):green@@ are liquids
**those in black are solids

Printing from a ~TiddlyWiki file is just like printing any webpage using the print function of your browser. Wow, that was easy to explain! For an extra tip, try this:

[[Printing just tiddler titles and text without all the TiddlyWiki stuff around it]]

You may find you don't want to print your file's ''header'', ''main menu'', the right hand ''sidebar'', or elements within the tiddlers such as its ''subtitle, buttons toolbar, and tags''. If so, well, here is your first chance to foray into the world of ~TiddlyWiki behind-the-scenes code. Here are the instructions:
# Double-click this tiddler to go into edit mode..
# Each line below represents a part of ~TiddlyWiki that you don't want to print. Decide what you want and don't want to print, then insert the appropriate lines of code from below into the StyleSheet tiddler.
<!--{{{-->
@media print {#mainMenu {display: none ! important;}}
@media print {#topMenu {display: none ! important;}}
@media print {#sidebar {display: none ! important;}}
@media print {#messageArea {display: none ! important;}} 
@media print {#toolbar {display: none ! important;}}
@media print {.header {display: none ! important;}}
@media print {.tiddler .subtitle {display: none ! important;}}
@media print {.tiddler .toolbar {display; none ! important; }}
@media print {.tiddler .tagging {display; none ! important; }}
@media print {.tiddler .tagged {display; none ! important; }}
<!--}}}-->
3.  Open the StyleSheet tiddler and doubleclick on it to put it into edit mode. Paste the code you copied into it.

4. Close both tiddlers. Now use your browser's print preview function to see what will be printed. Did you remove all the elements that you wanted to? I hope so.

Background: #FFcc00
Foreground: #000
PrimaryPale: #FF8C69
PrimaryLight: #cc66ff
PrimaryMid: #440044
PrimaryDark: #410
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #440044
TertiaryPale: #ffff99
TertiaryLight: #EEC591
TertiaryMid: #440044
TertiaryDark: #8B7355

Background: #ccaabb
Foreground: #000
PrimaryPale: #eeaaff
PrimaryLight: #ff0033
PrimaryMid: #464544
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eeaaff
TertiaryLight: #EEC591
TertiaryMid: #000
TertiaryDark: #8B7355

I have no salsa recipes for you. Try "Salsa recipes for the rest of us."

~TiddlyWikis should not be saved to your computer using the conventional "save" methods. To save this ~TiddlyWiki to your computer, go to the menu above, {{italic{right-click}}} where it says "save this file", and select "save target as" or "save link as". Give the file whatever name you want to give it, and save it in a convenient place on your computer. 

If the ~TiddlyWiki you want to download doesn't have a download link, or you can't find it, you can always copy the URL (web location) from your browser's navigation window, paste it into a tiddler in that ~TiddlyWiki, and right-click it to save the file.

After you save the file to your computer, close the webpage and open your saved version of the document from Start button > Documents. Your saved version will have the name you just gave it. 

! Customizing your newly saved ~TiddlyWiki file
# ''Change the SiteTitle and SiteSubtitle Tiddlers'' to reflect the content of the Tiddly you are creating. Your new title and subtitle will appear in the header at the top.
# ''Open the MainMenu Tiddler'', doubleclick on it, and remove any undesired items. Then add items to the main menu with double brackets. Example: {{{[[Car maintenance]]}}}
# If you want certain Tiddlers to appear every time you open the file, go to [[DefaultTiddlers]] and edit it to include the Tiddlers you want to appear at startup.
# Also you will definitely want to [[Decide on saving options]].

<<tabs txtMainTab Timeline Timeline TabTimeline All 'All tiddlers' TabAll Tags 'All tags' TabTags More 'More lists' TabMore>>

The great ~BidiX himself helped me create these simple instructions for his plugin!
#''Import the plugin and its friends.'' In your ~TiddlyWiki file, go to the backstage section and import the following tiddlers from http://tiddlywiki.bidix.info/
##~PasswordOptionPlugin
##~UploadPlugin
##store.php
#''Save changes'' to your file ''and reload'' / refresh your browser.
#''Create a store.php file.'' Open the store.php tiddler in your file and copy its contents. In Notepad, or whatever program you use to create webpages, paste the contents you've copied, and save the file as store.php. Be sure your program hasn't added any extensions such as .html, etc. The file should be called 'store' and its extension should be .php.
#''Set your username and password.'' In the store.php file, add your username(s) and password(s). Do this by going to the line {{{$USERS = array( '~UserName1'=>'Password1', etc) and replacing Username1 with your username, and Password1 with your password. Be sure to leave all the punctuation and code, such as the single quotes, intact. Save your file.
#''Upload store.php.'' Use your FTP client (the program you use to upload files to your website - I use ~FileZilla) to upload store.php to the directory (folder) where you are going to put your ~TiddlyWiki file. If it's been uploaded correctly, you should be able to open your file from your browser (e.g. "http://www.giffmex.org/experiments/store.php") and see Bidix's message.
#''Go to the Upload options panel.'' Now go to your ~TiddlyWiki file and in the backstage area at the top you should be able to see an 'upload' button. Click it.
#''Fill in the Upload options panel.''
##Set the same username and password that you placed in your store.php file
##Add the url of your store.php file (e.g., http://www.giffmex.org/experiments/store.php)
##Leave the Relative directory blank, and it will use default settings
##For filename, add the filename of the ~TiddlyWiki you are uploading
##If you have created a special directory on your site for backups, enter it in the Relative Directory for backups line. You don't add the entire url, just the name of the directory.
##Decide whether you want the ~UploadLog tiddler in your file to display the new logging data every time you save changes to the web, and check the box accordingly.
##Decide how many lines of data you want to appear in ~UploadLog, or leave it at a default of 10.
#''Click 'Upload' in the Upload with options panel.'' There will be a delay as your file is uploaded, but a message area should appear saying that your file is saved and about to upload. When done it should say 'Main ~TiddlyWiki file uploaded'. You are done!
#''Upload to your heart's content.'' Now, every time you want to upload the changes from your local file to the file on your website, go to the upload section of the backstage area, be sure your username and password are correct, and hit the upload button. That's it!

An easy-to-use entry-level ~TiddlyWiki tutorial from [[giffmex|http://www.giffmex.org/bloghome.html]]

~TiddlyWiki for the rest of us

Background: #cccccc
Foreground: #000
PrimaryPale: #999999
PrimaryLight: #667788
PrimaryMid: #334444
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #555566
TertiaryPale: #999999
TertiaryLight: #EEC591
TertiaryMid: #000
TertiaryDark: #8B7355

Sliders are macros that create expandable and collapsible text, such as dropdown menus or information you only want exposed when the user clicks on it.

For the power version of sliders, you might need the Nested Sliders plugin ([[here is the link|http://www.tiddlytools.com/#NestedSlidersPlugin]]). Nevertheless, slider macros are nice easy solutions for simple expandable text. Below is an example of a slider. Click on it to see the items that appear:

<<slider fortabTags TabTags TabTags>>

The ''syntax'' for the slider macro above looks like this:

{{{<<slider fortabTags TabTags TabTags>>}}}

''There are four elements to the syntax,'' enclosed by double angle brackets, each divided by a space:
#The word 'slider' so that ~TiddlyWiki knows what kind of macro it is
#A name for your slider so that ~TiddlyWiki distinguishes it from other sliders.
#The name of the Tiddler that you want to open by clicking on the slider. Clicking the macro above opens the tiddler that lists all the tags in this ~TiddlyWiki file.
#The label for your slider - in other words, the text you want to appear in your slider box. For example, you could change the slider above to say 'Spaghetti'.

''You can customize the look of your slider with some knowledge of CSS.''
For example, ocat has created a nice custom slider that uses gray horizontal three-dimensional bars rather than a gold box. Below is an image of his customization with the top bar opening the GettingStarted tiddler.

[img[http://www.giffmex.org/images/ocat.GIF]]

If you want to try out this style on a slider, add the text below to your StyleSheet Tiddler:

/*{{{*/
/*AccordionEffect, Designed by oc ( http://b-oo-k.net/blog/ ). */

.viewer .button{ display: block; color: #fff; text-align: left;
font-weight: bold;
border-top: solid 1px #bbb;
border-left: solid 1px #bbb;
border-right: solid 1px #888;
border-bottom: solid 1px #888;
background: #999;
margin-left: -0.3em;
padding: 0 1px 1px 20px;
}

.viewer .button:hover{
border-top: solid 1px #777;
border-left: solid 1px #777;
border-right: solid 1px #bbb;
border-bottom: solid 1px #bbb;
background: #888;
padding: 1px 0 0 21px;
}

/*}}}*/

These plugins are for extra ~TiddlyWiki mileage. They increase your filesize significantly, but they also add significantly to your file's capabilities.

!Favorites from [[Abego Extensions|http://tiddlywiki.abego-software.de/]]
*''~ForEachTiddlerPlugin'' lets you sort tiddlers and portions of tiddlers in many clever and helpful ways. I use it to index tags and tiddler titles. See [[Advanced ideas for tags]].
*''~FormTiddlerPlugin'' and ''~DataTiddlerPlugin'' work together to [[Create forms with editable fields]].
*The ''~IncludePlugin'' allows you to create a portal TW that accesses tiddlers from multiple other TiddlyWiki files as read-only tiddlers. Very nice for having a lot of data in one file without bloating the file.

!Favorites from [[Lewcid Extensions|http://tw.lewcid.org/]]
*''~FontsizePlugin'' lets you adjust the font size in a tiddler with + and - buttons.
*''~IconMacro'' and ''~ToolbarIconsPluigin'' let you replace the usual TW features with icons.
*''~SplashScreenPlugin'' calls up an introductory message while users wait for your file to open.

!Favorites from [[TiddlyTools|http://www.tiddlytools.com/]]
*''~NestedSlidersPlugin'' is a plugin for more advanced sliders than you can get from the [[Slider macros]].
*''~SearchOptionsPlugin''. When this plugin is loaded and you do a search, you get a list of tiddlers containing the word you are searching for, rather than having all those tiddlers open. I don't have it installed here, because I want newbies to see what happens normally with searching. But I think this plugin is a must.
*''~CoreTweaks'' adds some helpful tweaks to the TW core.

!From [[MonkeyPirate (old beta site)|http://mptw-beta.tiddlyspot.com/]]
*''~SelectPaletteMacro'' is technically a macro, but I'm including it here. It lets you select from a dropdown list of color palettes, and automatically reconfigures your color scheme based on your selection.  

!From [[MonkeyPirate|http://mptw.tiddlyspot.com/]]
*''~TagglyTagging'' is a unique and handy way to use tags for organizing information. It's easier to use than it is to explain. 

!From [[Yann Perrin|http://yann.perrin.googlepages.com/twkd.html]]
*The ''easyFormat'' plugin is included in this tutorial. It allows you to format selected text by using a dropdown list. Edit this tiddler and click on "Format" to see which styles I have included in my adapted version of this plugin. 

!~LaunchApplicationPlugin
*The ''~LaunchApplicationsPlugin'' allows you to launch other programs (Outlook, Word, etc) from within ~TiddlyWiki. You can access it either [[here|http://www.Remotely-Helpful.com/TiddlyWiki/LaunchApplication.html]] or [[here|http://www.Remotely-Helpful.com/TiddlyWiki/LaunchApplication.html|]]. Be aware that there are security risks involved with some uses of this plugin. See Morris Gray's help file [[here|http://twhelp.tiddlyspot.com/#%5B%5BLaunch%20Applications%20Plugin%5D%5D]] for more information.

''Soup recipe''
*Buy Ramen Pride.
*Boil water and mix.

*[[Format text]]
*[[Format links and images]]
*[[Format lists]]
*[[Format tables]]
*[[Format blockquotes]]
*[[Miscellaneous formats]]
*[[Format ASCII symbols, foreign symbols, math symbols]]

If you are using Internet Explorer (IE) to open this document, please keep in mind the following items:
# For reading ~TiddlyWikis, any browser will do. But for editing a TW file or creating your own, Mozilla's free Firefox browser is optimal, whereas Internet Explorer will require you to take the steps below. You can download Firefox for free from [[here|http://www.mozilla.com/firefox/]]. It really is a great browser. Think about it!
# However, ''if you prefer to continue using Internet Explorer'', you will need version 6.x or higher, preferably version 7. If you want to upgrade to the latest version of IE, you can do so [[here|http://www.microsoft.com/windows/ie/downloads/default.mspx]].
# If you are using anything less than version 7, you will just need to ''enable active content''. Go to Tools >> Internet Options >> Advanced >> and check the boxes that say "Allow active content to run on files in My Computer", "Java logging enabled" and "Java Console enabled." Also you will want to click on the options link on the right-hand side of ~TiddlyWiki and check the "Auto Save" option.
# The ''only known issues with Internet Explorer'' itself have to do with gradients and series of consecutive spaces in Tiddler titles, neither of which should be on this version.
# ''If you have Micrososft XP Service Pack 2'', there is one hiccup. Internet Explorer Windows XP SP2 keeps track of html files saved from the internet, and stores saved changes in an 'Internet' zone regardless of attempts to rename or modify the file. But, in order to be able to save changes, ~TiddlyWiki needs to run in the 'My Computer' zone. The solution is to right-click on the ~TiddlyWiki html file and choose Properties. If the file is blocked, you'll see an 'Unblock' button on the resulting property sheet that removes the protection and allows the file to open in the 'My Computer' zone. Then open the file in Internet Explorer - it might put up its information bar asking you whether you want to run it. You need to 'Allow blocked content' to let ~TiddlyWiki do its stuff.

Shadow tiddlers are the behind the scenes tiddlers found in the tiddler TabMoreShadowed and which appear in the "Shadowed" tab in the "more" section in the righthand sidebar tabs. Technically speaking, when you modify these tiddlers, you are not actually modifying them. You are creating a "twin" tiddler that overrides the original shadowed tiddler. 

So if you ever feel the need to revert to the default settings of a shadow tiddler such as StyleSheet or PageTemplate, all you have to do is open the tiddler and delete it. The "twin" tiddler you modified will be deleted and the original shadowed tiddler will return once again to take its place.

Background: #FFBCAD
Foreground: #000
PrimaryPale: #F67276
PrimaryLight: #FF6633
PrimaryMid: #A73853
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #FFBCAD
TertiaryLight: #EEC591
TertiaryMid: #000
TertiaryDark: #8B7355

/*{{{*/
/* horizontal main menu */

#displayArea { margin: 1em 15.5em 0em 1em; } /* use the full horizontal width */

#topMenu { background: [[ColorPalette::PrimaryMid]]; color: [[ColorPalette::PrimaryPale]]; padding: 0.2em 0.2em 0.2em 0.5em; border-bottom: 2px solid #000000; }

#topMenu br { display: none; }

#topMenu .button, #topMenu .tiddlyLink, #topMenu a { margin-left: 0.25em; margin-right: 0.25em; padding-left: 0.5em; padding-right: 0.5em; color: [[ColorPalette::PrimaryPale]]; font-size: 1.15em; }

#topMenu .button:hover, #topMenu .tiddlyLink:hover { background: [[ColorPalette::PrimaryDark]]; }

 .firstletter{ float:left; width:0.75em; font-size:400%; font-family:times,arial; line-height:60%; }

.viewer .FOO table tr.oddRow { background-color: #bbbbbb; }
.viewer .FOO table tr.evenRow { background-color: #fff; } 


/*Invisible table*/

.viewer .invisibletable table { 
border-color: white;
 }

.viewer .invisibletable table td { 
font-size: 1em;
font-family: Verdana;
border-color: white;
padding: 10px 20px 10px 0px;
text-align: left;
vertical-align: top;
} 

.viewer .invisibletable table th { 
color: #005566;
background-color: white;
border-color: white;
font-family: Verdana;
font-size: 1.2em;
font-weight: bold;
padding: 10px 20px 10px 0px;
text-align: left;
vertical-align: top;
} 

/* GIFFMEX TWEAKS TO STYLESHEETPRINT (so that nothing but tiddler title and text are printed) */


@media print {#mainMenu {display: none ! important;}}
@media print {#topMenu {display: none ! important;}}
@media print {#sidebar {display: none ! important;}}
@media print {#messageArea {display: none ! important;}} 
@media print {#toolbar {display: none ! important;}}
@media print {.header {display: none ! important;}}
@media print {.tiddler .subtitle {display: none ! important;}}
@media print {.tiddler .toolbar {display; none ! important; }}
@media print {.tiddler .tagging {display; none ! important; }}
@media print {.tiddler .tagged {display; none ! important; }}
@media print {#displayArea {margin: 1em 1em 0em 1em;}}
@media print {.pageBreak {page-break-before: always;}}

a.button{
 border: 0;

} 

/*Color changes*/


#sidebarOptions input {
	border: 1px solid [[ColorPalette::TertiaryPale]];
}

#sidebarOptions .sliderPanel {
	background: [[ColorPalette::TertiaryPale]];
}

#sidebarOptions .sliderPanel a {
	border: none;
	color: [[ColorPalette::PrimaryMid]];
}

#sidebarOptions .sliderPanel a:hover {
	color: [[ColorPalette::Background]];
	background: [[ColorPalette::TertiaryPale]];
}

#sidebarOptions .sliderPanel a:active {
	color: [[ColorPalette::PrimaryMid]];
	background: [[ColorPalette::TertiaryPale]];
}

/*Makes sliders bold*/

.tuduSlider .button{font-weight: bold;
}

/* (2) Adjusts the color for all headlines so they are both readable and match my color schemes. */

h1,h2,h3,h4,h5 {
 color: #000;
 background: [[ColorPalette::TertiaryPale]];
}

.title {
color: [[ColorPalette::PrimaryMid]];
}

/* (2) Makes text verdana. */

body {
 font-family: verdana;
font-size: 9pt;
}

/* (4) Allows for Greek - one way */

   .greek {
      font-family: Palatino Linotype;
      font-style: normal;
      font-size: 150%;
   }

/* (5) Shortens the height of the Header */

.headerShadow {
 padding: 1.5em 0em 1em 1em;
}

.headerForeground {
 padding: 2em 0em 1em 1em;
}

/* (8) Makes ordered and unordered lists double-spaced between items but single-spaced within items. */

.viewer li {
   padding-top: 0.5em;
   padding-bottom: 0.5em;

} 

/*Makes block quotes line-less*/

.viewer blockquote {
border-left: 0px;
margin-top:0em;
margin-bottom:0em; 
}

/* Cosmetic fixes that probably should be included in a future TW... */

.viewer .listTitle { list-style-type:none; margin-left:-2em; }
.editorFooter .button { padding-top: 0px; padding-bottom:0px; }

Important stuff. See TagglyTaggingStyles and HorizontalMainMenuStyles

[[Styles TagglyTagging]]
[[Styles HorizontalMainMenu]]

Just colours, fonts, tweaks etc. See MessageTopRight and SideBarWhiteAndGrey

body { 
  background: #eee; }
.headerForeground a { 
  color: #6fc;}
.headerShadow { 
  left: 2px; 
  top: 2px; }
.siteSubtitle { 
  padding-left: 1.5em; }

.shadow .title {
  color: #999; }

.viewer pre { 
  background-color: #f8f8ff; 
  border-color: #ddf }

.tiddler {
  border-top:    1px solid #ccc; 
  border-left:   1px solid #ccc; 
  border-bottom: 3px solid #ccc; 
  border-right:  3px solid #ccc; 
  margin: 0.5em; 
  background:#fff; 
  padding: 0.5em; 
  -moz-border-radius: 1em; }

#messageArea { 
  background-color: #eee; 
  border-color: #8ab; 
  border-width: 4px; 
  border-style: dotted; 
  font-size: 90%; 
  padding: 0.5em; 
  -moz-border-radius: 1em; }

#messageArea .button { text-decoration:none; font-weight:bold; background:transparent; border:0px; }

#messageArea .button:hover {background: #acd; }

.editorFooter .button { 
  padding-top: 0px; 
  padding-bottom:0px; 
  background: #fff;
  color: #000; 
  border-top:    1px solid #ccc; 
  border-left:   1px solid #ccc; 
  border-bottom: 2px solid #ccc; 
  border-right:  2px solid #ccc; 
  margin-left: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 5px;
  padding-right: 5px; }
  
.editorFooter .button:hover { 
  border-top:    2px solid #ccc; 
  border-left:   2px solid #ccc; 
  border-bottom: 1px solid #ccc; 
  border-right:  1px solid #ccc; 
  margin-left: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 5px;
  padding-right: 5px; }

.tagged {
  padding: 0.5em;
  background-color: #eee;
  border-top:    1px solid #ccc; 
  border-left:   1px solid #ccc; 
  border-bottom: 3px solid #ccc; 
  border-right:  3px solid #ccc; 
  -moz-border-radius: 1em; }

.selected .tagged {
  padding: 0.5em;
  background-color: #eee;
  border-top:    1px solid #ccc; 
  border-left:   1px solid #ccc; 
  border-bottom: 3px solid #ccc; 
  border-right:  3px solid #ccc; 
  -moz-border-radius: 1em; }

Clint's fix for weird IE behaviour
body {position:static;}
.tagClear{margin-top:1em;clear:both;}


/*}}}*/

/*{{{*/

/* text alignments */
.left
	{ display:block;text-align:left; }
.center
	{ display:block;text-align:center; }
.right	
	{ display:block;text-align:right; }
.justify
	{ display:block;text-align:justify; }
.indent
	{ margin:0;padding:0;border:0;margin-left:2em; }
.floatleft
	{ float:left; }
.floatright
	{ float:right; }
.clear
	{ clear:both; }
.wrap
	{ white-space:normal; }
.nowrap
	{ white-space:nowrap; }
.hidden
	{ display:none; }
.span
	{ display:span; }
.block
	{ display:blockquote; }

/* font sizes */
.big
	{ font-size:14pt;line-height:120% }
.medium
	{ font-size:12pt;line-height:120% }
.normal
	{ font-size:9pt;line-height:120% }
.small
	{ font-size:8pt;line-height:120% }
.fine
	{ font-size:7pt;line-height:120% }
.tiny
	{ font-size:6pt;line-height:120% }
.larger
	{ font-size:120%; }
.smaller
	{ font-size:80%; }

/* font styles */
.bold
	{ font-weight:bold; }
.italics
	{ font-style:italics; }
.underline
	{ text-decoration:underline; }

/* multi-column tiddler content (not supported in Internet Explorer) */
.twocolumns
	{ display:block; -moz-column-count:2; -moz-column-gap:1em; -moz-column-width:50%;}
.threecolumns
	{ display:block; -moz-column-count:3; -moz-column-gap:1em; -moz-column-width:33%}
.fourcolumns
	{ display:block; -moz-column-count:4; -moz-column-gap:1em; -moz-column-width:25%}

/* borderless tables */
.borderless, .borderless table, .borderless td, .borderless tr, .borderless th, .borderless tbody
	{ border:0 !important; margin:0 !important; padding:0 !important; }

/* thumbnail images (fixed-sized scaled images) */
.thumbnail img { height:5em !important; }

/* grouped content */
.outline
	{ display:block; padding:1em; -moz-border-radius:1em; border:1px solid; }
.menubox
	{ display:block; padding:1em; -moz-border-radius:1em; border:1px solid; background:#ccccff; color:#000; }
.menubox .button, .menubox .tiddlyLinkExisting, .menubox .tiddlyLinkNonExisting
	{ color:#009 !important; }
.groupbox
	{ display:block; padding:1em; -moz-border-radius:1em; border:1px solid; background:#ffe; color:#000; }
.groupbox a, .groupbox .button, .groupbox .tiddlyLinkExisting, .groupbox .tiddlyLinkNonExisting
	{ color:#009 !important; }
.groupbox code
	{ color:#333 !important; }
.borderleft
	{ margin:0;padding:0;border:0;margin-left:1em; border-left:1px dotted; padding-left:.5em; }
.borderright
	{ margin:0;padding:0;border:0;margin-right:1em; border-right:1px dotted; padding-right:.5em; }
.borderbottom
	{ margin:0;padding:1px 0;border:0;border-bottom:1px dotted; margin-bottom:1px; padding-bottom:1px; }
.bordertop
	{ margin:0;padding:0;border:0;border-top:1px dotted; margin-top:1px; padding-top:1px; }

/* compact form */
.smallform
	{ white-space:nowrap; }
.smallform input, .smallform textarea, .smallform button, .smallform checkbox, .smallform radio, .smallform select
	{ font-size:8pt; }

/* colors */
.green { color:#6f6 !important }
.red { color:#f66 !important }
.blue { color:#99f !important }

/*}}}*/

|bgcolor(#dddddd):''Case-senstive search''|A function of ~TiddlyWiki whereby the user can search for a word or phrase with precise upper and lowercase specifications.|
|bgcolor(#dddddd):''Client-side''|A ~TiddlyWiki file that is edited offline by the user or client, hence "On the client's side." These cannot be edited through the Internet when the file is located on a web server.|
|bgcolor(#dddddd):''CSS''|CSS is the computer code used to create custom style sheets. Style sheets are pages that control the look of html webpages. The style sheets for a ~TiddlyWiki file are internal. They are the three default style sheets [[StyleSheetColors]], [[StyleSheetLayout]], [[StyleSheetPrint]] and the one you use to override the other three, named simply [[StyleSheet]].<br><br>To learn more about CSS, see [[here|http://www.htmldog.com/reference/cssproperties/]]. |
|bgcolor(#dddddd):''Default Tiddlers''|This is a tiddler that contains the tiddlers that are viewed when your file opens up. You can customize this tiddler or empty it out if you wish.|
|bgcolor(#dddddd):''HTML''|HTML is the computer language used to create webpages. A ~TiddlyWiki file is a modified HTML file.|
|bgcolor(#dddddd):''~JavaScript''|~JavaScript is a computer language used for special functions. It is made of up scripts or instructions that tell a webpage what to do under certain conditions. Java scripts are used to create and run many ~TiddlyWiki plugins.|
|bgcolor(#dddddd):''Macro''|See [[this tiddler|Macros]]|
|bgcolor(#dddddd):''~MainMenu''|The menu normally found on the left hand side of the screen. In the present file it is found in the header. It acts as a table of contents.|
|bgcolor(#dddddd):''Options panel''|The menu in the middle of the right hand menu. Sometimes it is hidden, and you can open it by clicking "options >>".|
|bgcolor(#dddddd):''Permalink''|A ~TiddlyWiki button on the tiddlers that places the exact url of the tiddler in your browser search window. Helpful for placing links to a specific tiddler in e-mails and webpages. |
|bgcolor(#dddddd):''Permaview''|A ~TiddlyWiki option on the right hand menu that places the exact url of the present file when all the currently open tiddlers are open. Helpful for placing links to a specific combination of tiddlers in e-mails and webpages.|
|bgcolor(#dddddd):''Plugin''|A tiddler with a special code that adds extra functionality to a ~TiddlyWiki file. For more information, see [[this tiddler|How to install a plugin]]|
|bgcolor(#dddddd):''Server-side''|A ~TiddlyWiki file that is able to be edited while the file is located on a web server. This gives users the ability to edit it from any online computer. |
|bgcolor(#dddddd):''Shadow tiddlers''|Tiddlers that work in the background and affect the functioning of ~TiddlyWiki. See also [[Special note on modifying shadow tiddlers]]|
|bgcolor(#dddddd):''~SideBar''|The options at the top of the right hand menu.|
|bgcolor(#dddddd):''Slider''|An expandable-and-collapsible menu that you can place in any tiddler. See [[here (external link)|]] for a helpful showcase of four sliders and what to use them for.|
|bgcolor(#dddddd):''~StyleSheet''|A tiddler with the code that controls the appearance, layout and printing properties of a ~TiddlyWiki file. For more information, see [[this tiddler|Messing with StyleSheets]]|
|bgcolor(#dddddd):''systemConfig tag''| A tag that tells ~TiddlyWiki that the tiddler contains Javascript that should be run when the file opens. Usually appended to plugins.|
|bgcolor(#dddddd):''Tabs''|The menu at the bottom of the right hand menu. They are called tabs because they have what looks like the tabs on file folders protruding from the top of them. |
|bgcolor(#dddddd):''Tag''|A label that a user adds to a tiddler to index it according to topic. In other words, the tag is the topic or category by which you want to index and search for your tiddler. This provides an extra way to find tiddlers, because the user can go to the Tags tab in the right hand tabbed menu and browse his or her personal list of tags. See [[this tidder|through tags]]|
|bgcolor(#dddddd):''Tiddler''|A 'window' containing text or code in ~TiddlyWiki. Tiddlers are like 3x5 note cards to which the user adds content and links with other tiddlers using tags and hyperlinks. For more on tiddlers, see [[this tiddler|Anatomy of a Tiddler]]. |
|bgcolor(#dddddd):''~WikiWord''|See [[this tiddler|WikiWord]]|

Simon Baird has a wonderful macro that displays a dropdown menu of various color palettes. You select the palette you desire from the list, and the colors of your ~TiddlyWiki instantly change!

Get the ~SelectPaletteMacro [[here|http://mptw-beta.tiddlyspot.com/#SelectPaletteMacro]].

The header contains the Title and Subtitle of your document. After downloading a ~TiddlyWiki file to your computer, you can alter these by opening and editing the Tiddlers SiteTitle and SiteSubtitle.

[img[http://www.giffmex.org/images/headerimage.GIF]]

Tabbed lists, like the ones to the right listing all tiddlers and tags, are a macro. Here is what the macro looks like:
//{{{
<<tabs identifier tabLabel tabName Tiddlername>>
//}}}
*You leave "tabs" alone. That tells ~TiddlyWiki that this macro is a tabs macro.
*Replace "identifier" with the name that you want to give your //macro//. 
*Replace "tabLabel" with the text you want to appear on the tab.
*Replace "tabName" with the name you want to give to that tab.
*Replace "Tiddlername" with the tiddler whose contents will appear when you open that tab.
*For each new tab, insert "tabLabel tabName Tiddlername" within the macro and edit to reflect the contents of the new tab. 

Here is a sample tabbed list, and its code. I have placed the sections of the code on separate lines to make it easier to see the separate sections.

<<tabs salsas "Salsa recipes" "Salsa recipes" SalsaRecipes "Soup recipes" "Soup recipes" SoupRecipes>>
{{{
<<tabs salsas 
"Salsa recipes" "Salsa recipes" SalsaRecipes 
"Soup recipes" "Soup recipes" SoupRecipes>>
}}}

The ~MainMenu is basically a table of contents by which you can quickly access the main contents of your file. You can edit any and all aspects of the ~MainMenu by opening and editing the MainMenu Tiddler. Below is a main menu of another of my ~TiddlyWiki documents ([[link here|http://www.giffmex.org/philemontiddlywiki.html]]). In the present tutorial file, the ~MainMenu has been placed in the header to allow more room for the text.

[img[http://www.giffmex.org/images/mainmenu.GIF]]

What I call the right hand menu or sidebar menu is filled with tools. 

!The top of the menu
At the top of the right hand menu there are several features:
[img[http://www.giffmex.org/images/rhtop.GIF]]

!Interface options
Clicking the ''options >>'' link opens up the Interface Options menu:
[img[http://www.giffmex.org/images/interfaceoptions.GIF]]

(Note: in version 2.2, Plugin Manager and Import Tiddlers have been moved to the backstage area.)
!Lists of Tiddlers and tags
At the bottom of the right hand menu are lists of all the Tiddlers and tags in your ~TiddlyWiki file:

[img[http://www.giffmex.org/images/tidlist.GIF]]

~TiddlySnip is a Firefox add-on that allows you to quickly "snip" selected text from webpages and paste it directly into a ~TiddlyWiki file. You can even specify categories and when you snip the text, and ~TiddlySnip will add a tag with the category you specify. Check it out at http://tiddlysnip.com/#About.

Not too crazy about the default colors and layout, but you're not ready to tinker behind the scenes with your ~TiddlyWiki? Try out one of the many themes  at http://tiddlythemes.com. They even have themes that look like blogs.

Want a calendar plugin? A tag cloud plugin? A plugin for an address book? There is now a growing index of over 100 ~TiddlyWiki plugins, macros, scripts and themes, organized by categories. Check it out at http://www.giffmex.org/twvault.html.

Why reinvent the wheel? Morris Gray has a number of tips [[here|http://tiddlyspot.com/twhelp/#%5B%5BFireFox%20Tips%5D%5D]] at his excellent tutorial.

*''Disable the animations.'' It may be cute to have tiddlers open with cool animation, but the animation slows performance way down. Open the OptionsPanel and uncheck ~EnableAnimations.
*''Save less often.'' Uncheck 'Autosave' and 'Save backups', and save manually every few minutes instead of saving every single change.
*''Hide the growing tabbed lists in your SideBarTabs.'' Every time you create a new tiddler, TabAll and TabTimeline have to refresh to add the new tiddler's title. As the list of tiddlers gets longer, these tabs take longer to refresh, slowing down your ~TiddlyWiki. There are three ways I know of to hide these lists:
##The easiest way is to click on the More tab. The lists in More don't grow like the other lists. This should be a good enough solution for most users.
##You can use the ToggleRightSidebar plugin to hide the entire right hand sidebar of your ~TiddlyWiki screen. This plugin happens to be included in this tutorial.
##I don't necessarily recommend the following for newer users, but to remove the right hand sidebar tabs from view altogether, open PageTemplate and delete the following:
<!--{{{-->
	<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
<!--}}}-->
*''Michael Cimino offered this suggestion by e-mail:''
"...(1) add the following to the end of SidebarOptions: {{{<<slider chkSliderContents [[TabContents]] 'contents »' 'contents'>>}}}
(2) cut out the text from SidebarTabs and save it, leaving it blank.
(3) create a new tiddler TabContents and paste the text that used to be in SidebarTabs, which should be:
{{{<<tabs txtMainTab "Timeline" "Timeline" TabTimeline "All" "All tiddlers" TabAll "Tags" "All tags" TabTags "More" "More lists" TabMore>>}}}

Now, you can collapse that area of the Sidebar whenever you wish, and its state will be saved in a cookie! I hope this helps!"

Look at our top menu. The last item shows, (depending on what you have or haven't done with it), either ( ►) or (◄). When you click on those words, the right hand sidebar disappears and reappears. This is done with the ToggleRightSidebar script from ~TiddlyTools. See [[here|http://www.TiddlyTools.com/#ToggleRightSidebar]] for more details. ~TiddlyTools also offers a ~ToggleLeftSidebar script for ~TWs with left hand main menus.

/%
|Name|ToggleRightSidebar|
|Source|http://www.TiddlyTools.com/#ToggleRightSidebar|
|Version|2.0.0|
|Author|Eric Shulman - ELS Design Studios|
|License|http://www.TiddlyTools.com/#LegalStatements <br>and [[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|~CoreVersion|2.1|
|Type|script|
|Requires|InlineJavascriptPlugin|
|Overrides||
|Description|show/hide right sidebar (MainMenu)|

Usage: <<tiddler ToggleRightSidebar with: "label">>

Config settings:
	config.options.chkShowRightSidebar (true)
	config.options.txtToggleRightSideBarLabelShow (Show sidebar ►)
	config.options.txtToggleRightSideBarLabelHide (Hide sidebar ◄)

%/<script label="$1" title="show/hide right sidebar content">
	var co=config.options;
	if (co.chkShowRightSidebar=='undefined') co.chkShowRightSidebar=true;
	co.chkShowRightSidebar=!co.chkShowRightSidebar;
	var sb=document.getElementById('sidebar'); if (!sb) return;
	sb.style.display=co.chkShowRightSidebar?'block':'none';
	document.getElementById('displayArea').style.marginRight=co.chkShowRightSidebar?'':'1em';
	saveOptionCookie('chkShowRightSidebar');
	var labelShow=co.txtToggleRightSideBarLabelShow||(config.browser.isSafari?'&#x25c0;':'&#x25c4;');
	var labelHide=co.txtToggleRightSideBarLabelHide||'&#x25ba;';
	if (typeof(place)!='undefined' && '$1'=='$'+'1') {
		place.innerHTML=co.chkShowRightSidebar?labelHide:labelShow;
		place.title=(co.chkShowRightSidebar?'hide':'show')+' right sidebar';
	}
	var sm=document.getElementById('storyMenu'); if (sm) config.refreshers.content(sm);
</script><script>
	var co=config.options;
	if (co.chkShowRightSidebar=='undefined') co.chkShowRightSidebar=true;
	var sb=document.getElementById('sidebar'); if (!sb) return;
	sb.style.display=co.chkShowRightSidebar?'block':'none';
	document.getElementById('displayArea').style.marginRight=co.chkShowRightSidebar?'':'1em';
	if ('$1'=='$'+'1') {
		var labelShow=co.txtToggleRightSideBarLabelShow||(config.browser.isSafari?'&#x25c0;':'&#x25c4;');
		var labelHide=co.txtToggleRightSideBarLabelHide||'&#x25ba;';
		place.lastChild.innerHTML=co.chkShowRightSidebar?labelHide:labelShow;
		place.lastChild.title=(co.chkShowRightSidebar?'hide':'show')+' right sidebar';
	}
</script>

If you compare this tutorial with Jeremy Ruston's original ~TiddlyWiki file ([[here|http://www.tiddlywiki.com]]), you will notice that his file has the ~MainMenu in a left-hand sidebar, while I have the ~MainMenu built into the header. Mine is called a ~TopMenu. Top menus have the advantage of saving horizontal space. Tiddlers can get pretty squished inbetween a left-hand ~MainMenu and a right hand options sidebar. So to free up room for wider tiddlers, I moved the menu to the top.

The way I see it, there are three things you might want to know about moving the ~MainMenu from one place to another:

[[How do I remove the top menu and have a normal left-hand menu?]]
[[How do I remove the left-hand menu of a typical TiddlyWiki and create a top menu for it?]]
[[Can I have both a left-hand menu AND a top menu, each with different items?]]

~IFrames are HTML elements that allow you to have a frame containing a different document within a Tiddler. 

''The code'' to add to your tiddler:
{{{
<html><div align="center"><iframe src="WEBPAGEURLHERE" frameborder="0" width="100%" height="600"></iframe></div></html>
}}}
You can. of course, adjust the webpage url, the frame border, the width and the height with this code. You can also have an iframe of an html document or an image that is stored in your local hard drive. Instead of the webpage url you would substitute your file pathname, something like this:
{{{
"file:///c:/My%20Documents/Folder/document.html"
}}}
Here is an ~IFrame of our online bio page. Try clicking on a link to see what happens.
<html><div align="center"><iframe src="http://www.giffmex.org/aboutus/giffordsbio.html" frameborder="0" width="100%" height="600"></iframe></div></html>

!What does it include?
Version 2.2 is the latest version of ~TiddlyWiki. It has a "backstage" area with extra functions. As Jeremy Ruston explains [[here|http://www.tiddlywiki.com/#BackstageArea]], the idea of the backstage is to make some of the advanced sidebar options available to power users while eliminating the clutter and confusion for newer users who just want to read a ~TiddlyWiki. For example, some authors want to drastically change the page layout of their ~TiddlyWiki, but still want quick access to advanced features. The backstage gives them a way to have their cake and eat it too.

This tutorial is now upgraded to version 2.2.1. You can check out the backstage clicking "backstage" in the far upper right corner of the screen. This calls up a hidden menu with the following 5 options:
*''save'' - saves your ~TiddlyWiki just as you would by clicking "Save changes" in the right hand sidebar options.
*''sync'' - allows you to sync the changes in your ~TiddlyWiki file with other ~TiddlyWiki files on your hard drive and your server. I will try to write more about this as I play with it more myself.
*''import'' - this is the new location for ImportTiddlers, formerly available on the right hand options sidebar. This is a macro that allows you to import tiddlers from other ~TiddlyWiki files on your hard drive or on the Internet.
*''tweak'' - this is the new location for AdvancedOptions. This is still available on the right hand options side bar, but the backstage appears to be its new home. AdvancedOptions gives you, well, advanced options for saving, searching, editing and other functions. This is a good place to start when you save a new ~TiddlyWiki file and are fairly particular about how you want it to function.
*''plugins'' - this is the new location for Manage Plugins. You can see a list of your plugins. For more on plugins, see the following tiddlers if you haven't already:
**[[How to install a plugin]]
**[[My favorite "goodies" plugins]]
** [[Some great "power" plugins]]
For more on version 2.2, see Jeremy Ruston's explanation [[here|http://www.tiddlywiki.com/#Release2.2]].
!How do I upgrade?

Jeremy Ruston's helpful instructions for upgrading to the latest version can be found [[here|http://www.tiddlywiki.com/#HowToUpgrade]] (external link to www.tiddlywiki.com).

@@Please note!@@ In earlier versions of this tutorial I erroneously advised you to make style changes to your StyleSheetLayout, StyleSheetPrint and StyleSheetColors. This was incorrect. All style changes should actually be done on the StyleSheet tiddler. This will override the above three default stylesheets. The reason I'm telling you this is that if you have made changes to the 3 default stylesheets, you may find that the backstage doesn't work right. If that is the case, all you need to do is delete your three default stylesheets and save changes, and you should be okay. However, before you do, you should transfer all your style changes to the StyleSheet tiddler. I apologize for any inconvenience that my misinformation has caused you.

If you find any other difficulties in upgrading, please consult the TiddlyWiki Google Group at http://groups.google.com/group/TiddlyWiki. Please do a search for your problem first, before posting your problem in a brand new thread. You may find someone has already asked about your problem and that the solutions are already there waiting for you.

!~TiddlyWiki in Action
The best way to see what ~TiddlyWikis are being used for is to visit "~TiddlyWiki in Action", our very own showcase of ~TiddlyWikis around the world. There are screenshots, brief descriptions and links to many ~TiddlyWikis, including some listed below. The link is: http://giffmex.tiddlyspot.com.

! List of ideas

|bgcolor(#dddddd):''To-do lists and project task management''|For example, there are several versions adapted to function according to the GTD (“Getting Things Done”) to-do list system. Here are two examples: [[GTD|http://shared.snapgrid.com/index.html]] and [[d3|http://www.dcubed.ca/]]. My own to-do list system can be found [[here|http://www.giffmex.org/tiddlydu.html]]|
|bgcolor(#dddddd):''Blogs and journals''|Others use them as blogs and journals, since one feature of most ~TiddlyWikis is clicking a button to create a new, automatically dated journal entry.|
|bgcolor(#dddddd):''Course packets''|Some teachers are using them to give students information packets that they can easily edit and take notes on. TW is really a good way of taking notes. See these philosophy notes [[here|http://parmenides.objectis.net/reason/]]|
|bgcolor(#dddddd):''Organizing research notes''|Eclectic Bill is using it to organize his research notes for his Ph. D. [[see here|http://eclecticbill.blogspot.com/2005/11/tiddlywiki-example-research-notes.html]] |
|bgcolor(#dddddd):''Slideshow presentations''|A student at the University of Adelaide used ~TiddlyWiki to create a slide-show presentation on the ideology of a Hollywood motion picture: [[see here|http://lewcid.googlepages.com/tots.html#Bibliography]]|
|bgcolor(#dddddd):''Recipes''|Jackson Boyle, among others, are using ~TiddlyWiki to organize recipes. [[See here|http://jacksonboyle.com/kitchen.htm.]]|
|bgcolor(#dddddd):''Photo albums''|I am using TW as a photo album. See [[here|http://www.giffmex.org/giffr.html]]|
|bgcolor(#dddddd):''Miniature databases''|Editable custom form fields can be used in conjunction with ~TiddlyWiki to make it a database. I am using it to create a database of sorts of my notes. See a template version [[here|http://www.giffmex.org/emptynotestw.html]]|
|bgcolor(#dddddd):''Novels''|A few people are using TWs to write non-linear novels and editable novels.|

~TiddlyWikis are basically good for organizing any small to medium sized masses of information where a non-linear, non-cluttered format is desirable.

''~TiddlyWikis:''
*Are free
*Are self-contained - no need for programs other than an Internet browser
*Are easy to edit
*Are portable - a USB memory stick becomes a "Wiki on a Stick" that can be edited on any relatively new computer with a relatively recent Internet browser
*Are uncluttered - one can look at bite-sized chunks of information (microcontent) at a time rather than read through a long article in a linear fashion. One click closes all Tiddlers but the one you are reading
*Are fast - you navigate quickly through the Tiddlers that you want to read, in the order that you determine.
*Are non-linear - instead of scrolling up and down long files or webpages, the content is connected by hyperlinks
*Are searchable by tags that you assign to Tiddlers
*Are a handy way to create blogs and to-do lists
*Can create glossaries, notes and bibliographies that link to any Tiddler you desire
*Can be modified with a number of macros and plugins created specifically for ~TiddlyWiki.
*Can cook and sew. Okay, maybe they can't do everything.

There are ''a few minor drawbacks'':

A drawback to using ~TiddlyWiki for ''larger amounts of information'' is that the file size becomes unwieldy either for storing or for uploading / downloading. They tend to START at 200kb-400kb. Larger ~TiddlyWikis still run fine, though. I have a few large ones myself. Here are a few [[Tips for speeding up performance on large TiddlyWikis]].

''Tables'' have to be created anew rather than copied and pasted from a Word Processor. Simple tables are fairly easy to create, but larger or more complicated tables would be better transferred as embedded images. Also, any fancy formatting, color changes, etc, take longer to do. Remember, an advantage of ~TiddlyWiki is that it runs using nothing more than a browser. But this advantage means that any fancy fiddling must be done with code, not with toolbars as in Word.

Some versions of ''Internet Explorer'' give ~TiddlyWikis hiccups. But then, you have already switched to Mozilla Firefox by now, I would hope. It is a superior browser with some handy plug-ins. So this isn’t really a drawback, just a push for you to switch to a better browser. For more information, see the Tiddler [[Special note for users of Internet Explorer]].

For special formatting such as italics, bold, bulleted and numbered lists, headings and subheadings, ''you need to know a minimum of code.'' I found this to be extremely easy to learn—as in a few minutes of practice—and really is not a major drawback for those willing to learn a limited number of new tricks. See [[How to Format Text]] to quickly see how this is done.

Every time you add Tiddlers or edit existing Tiddlers, ''the file saves a backup copy of itself.'' This is a good thing, to keep you from losing valuable information. But these files are generally 300kb or more. So either you need to delete all the backup copies each time you finish using ~TiddlyWiki, or uncheck the "save backups" box in the right-hand menu and save changes manually by clicking "save changes", also in the right-hand menu.

~TiddlyWiki is an ingenious free application that is ideal for taking and organizing notes, organizing to-do lists, and even managing small personal databases. It is basically an html file (a webpage) stuffed with special code that allows you to create small snippets of information called Tiddlers. These tiddlers can be linked by tags and hyperlinks, and tucked away. When you need them again, you can use a search window, your own personalized tables of contents, or any number of handy tiddler indexes to find them quickly. Think of ~TiddlyWiki as an easily-searchable catalog of 3x5 cards and post-it notes all linked together in one file.

You don't need to buy a program to use ~TiddlyWiki. It is an html file that you can read and edit using nothing more than your Internet browser. And you don't need to be online to use ~TiddlyWiki. You can quickly download any ~TiddlyWiki to your computer to use offline. You can then take it with you wherever you go, on a USB memory stick (called a “Wiki on a Stick”) and edit it on any computer that has a relatively recent web browser, preferably Mozilla’s free browser Firefox. 

~TiddlyWikis were invented by Jeremy Ruston. His site, with the original documentation and other information, can be found at http://www.tiddlywiki.com/. 

[[What are TiddlyWikis being used for?]]
[[What are the benefits of TiddlyWikis?]]
[[What are the limitations of TiddlyWikis?]]

This is the best tutorial for those who know a bit more: http://tiddlyspot.com/twhelp/ by Morris Gray

The in-process official documentation site: http://www.tiddlywiki.org/wiki

The Google Group devoted to ~TiddlyWiki: http://groups-beta.google.com/group/TiddlyWiki

A ~TiddlyWiki FAQ - http://twfaq.tiddlyspot.com

A Tiddly Guides wikipedia type document: http://tiddlywikiguides.org/index.php?title=TiddlyWiki_Guides

A WikiWord is a word that combines upper and lowercase letters. Examples: ~WikiWord, ~GiffMex, ~MainMenu, ~AbrahamLincoln, etc.

You see?

/***
|!''Name:''|!easyFormat|
|''Description:''|the format command format selection according to your choice|
|''Version:''|0.1.0|
|''Date:''|13/01/2007|
|''Source:''|[[TWkd|http://yann.perrin.googlepages.com/twkd.html#easyFormat]]|
|''Author:''|[[Yann Perrin|YannPerrin]]|
|''License:''|[[BSD open source license]]|
|''~CoreVersion:''|2.x|
|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|
|''Requires:''|@@color:red;''E.A.S.E''@@|
***/
//{{{
config.commands.format = new TWkd.Ease('Format','format selection accordingly to chosen mode');
config.commands.format.addMode({
 name:'Bold',
 tooltip:'turns selection into bold text',
 operation:function(){
 config.commands.format.putInPlace("''"+TWkd.context.selection.content+"''",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'Italic',
 tooltip:'turns selection into italic text',
 operation:function(){
 config.commands.format.putInPlace("//"+TWkd.context.selection.content+"//",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'Blockquote',
 tooltip:'turns selection into blocked text',
 operation:function(){
config.commands.format.putInPlace(">"+TWkd.context.selection.content+">",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'2block',
 tooltip:'turns selection into doubly blocked text',
 operation:function(){
config.commands.format.putInPlace(">>"+TWkd.context.selection.content+">>",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'3block',
 tooltip:'turns selection into triply blocked text',
 operation:function(){
config.commands.format.putInPlace(">>>"+TWkd.context.selection.content+">>>",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'4block',
 tooltip:'turns selection into quadruplly blocked text',
 operation:function(){
config.commands.format.putInPlace(">>>>"+TWkd.context.selection.content+">>>>",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'Highlight',
 tooltip:'highlight selection',
 operation:function(){
 config.commands.format.putInPlace("@@"+TWkd.context.selection.content+"@@",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'Code window',
 tooltip:'Show a window to backstage TW code',
 operation:function(){
 config.commands.format.putInPlace("//{{{"+TWkd.context.selection.content+"//}}}",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'Group box',
 tooltip:'Enclose text in a box',
 operation:function(){
 config.commands.format.putInPlace("{{menubox{"+TWkd.context.selection.content+"}}}",TWkd.context.selection);
 }
});
config.commands.format.addMode({
 name:'Greek',
 tooltip:'turns selection into unicode text, for Greek characters',
 operation:function(){
 config.commands.format.putInPlace("{{greek{"+TWkd.context.selection.content+"}}}",TWkd.context.selection);
 }
});
//}}}

Background: #eeffcc
Foreground: #000
PrimaryPale: #bbcc99
PrimaryLight: #bbdd88
PrimaryMid: #445533
PrimaryDark: #000
SecondaryPale: #ffc
SecondaryLight: #99dd55
SecondaryMid: #cccccc
SecondaryDark: #445533
TertiaryPale: #bbcc99
TertiaryLight: #EEC591
TertiaryMid: #552233
TertiaryDark: #8B7355

*The MainMenu is like a table of contents. It's normally found in a left hand menu bar. The ~MainMenu for this file is found in the header. Click on any item and a tiddler will open up. You can create various levels of a table of contents starting with the ~MainMenu.

*Hyperlinks are links between files and between places within a file. The hyperlinks in this file are shown in [[bold, colored]] text. Click on the words "bold, colored" and TW will take you to another tiddler.

Tags are words attached to tiddlers to aid readers in finding and sorting them. In the colored box to the right side of this tiddler are listed two tags attached to this tiddler: "beginners" and "reading". Tags are like categories or topics that you want to assign to a tiddler. If you want to search for a specific tiddler without wading through the levels of the ~MainMenu, you can use the special menu at the bottom of the right-hand column to search for tiddlers and tags. See [[here|The right hand menu]] for more information on the right hand menu.