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]]
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.
##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>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<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]]
''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
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:
''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>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<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.
After you do this, then close your browser, 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 filen