<<list untagged>>
config.macros.list["untagged"] = {prompt: "Tiddlers that are not tagged"};\n\nconfig.macros.list.untagged.handler = function(params)\n{\n//displayMessage("Building list of untagged tiddlers");\n var results = [];\n for(var t in store.tiddlers) {\n var tiddler = store.tiddlers[t];\n if(tiddler.getTags() == "")\n results.push(t);\n }\n results.sort();\n return results;\n}
Start by styling the most simple elements.
version.extensions.listTags = {major: 0, minor: 1, revision: 0};\n\nconfig.macros.listTags = {\n text: "Hello"\n};\n\nconfig.macros.listTags.handler = function(place,macroName,params) {\n var tagged = store.getTaggedTiddlers(params[0]);\n for(var r=0;r<tagged.length;r++){\n createTiddlyLink(place,tagged[r].title,true);\n createTiddlyElement(place,"br",null,null,"");\n }\n}
!Rules\n*''font''- a combination of font-style, font-variant, font-weight, font-size, line-height and font-family]\n*''font-family''- multiple font names separated by commas\n*''font-size''- measurement(px,em,%,ex) or word (larger, normal, small)\n*''font-weight''- use 'bold' or 'normal'\n*''font-style''- use 'italic' or 'normal'\n*''font-variant''- use 'small-caps' or 'normal'\n*''line-height''- measurement(px,em,%,ex) or 'normal'\n*''letter-spacing''- measurement(px,em,&,ex) or 'normal'\n*''word-spacing''- measurement(px,em,&,ex) or 'normal'\n*''text-align''- use 'left', 'right', 'center', or 'justify'\n*''text-decoration''- use 'none', 'underline', 'overline', or 'line-through'\n*''text-indent''- measurement(px,em,&,ex), applies to the first line of text\n*''text-transform''- use 'capitalize', 'uppercase', 'lowercase', or 'none'\n*''vertical-align''- measurement(px,em,&,ex), 'baseline', 'sub', 'super', 'top', 'text-top', 'middle' , 'bottom', 'text-bottom',this only applies to vertical position in an inline box.\n*''white-space''- 'normal', 'pre', 'nowrap', 'pre-wrap', 'pre-line;\n\n\n!Example\n*''font'': italic bold 1.5em/2 arial, Helvetica, sans-serif;\n*''font-family'': "Times New Roman", Times, serif;\n*''font-size'': 1.5em; (or 12px or 80%)\n*''font-weight'': bold;\n*''font-style'': italic;\n*''font-variant'': small-caps;\n*''line-height'': 1.2em;\n*''letter-spacing'': 1em;\n*''word-spacing'': 2em;\n*''text-align'': center;\n*''text-decoration'': underline;\n*''text-indent'': 5px;\n*''text-transform'': capitalize;\n*''vertical-align'': baseline;\n*''white-pace'': pre;
!Rules\n*''padding''- measurement(em,px,%,ex)\n*''border''- combination of border-width, border-style, and border-color\n*''border-style''- use 'none', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', or 'outset'\n*''border-color''- color or 'transparent'\n*''border-width''- measurement(em,px,%,ex) or 'thin', 'medium', or 'thick'\n*''outline''- combines outline-color, outline-style and outline-width (not supported by IE or Firefox)\n*''outline-style''- same as border-style (not supported by IE or Firefox)\n*''outline-color''- color or 'inverted'\n*''outline-width''- same as border-width (not supported by IE or Firefox)\n*''margin''- measurement(em,px,%,ex) or 'auto'\n*''width''- measurement(em,px,%,ex) or 'auto'\n*''height''- measurement(em,px,%,ex) or 'auto'\n*''min-width''- measurement(em,px,%,ex) or 'auto' (not supported in IE)\n*''max-width''- measurement(em,px,%,ex) or 'auto' (not supported in IE)\n*''min-height''- measurement(em,px,%,ex) or 'auto' (not supported in IE, but height acts as the same)\n*''max-height''- measurement(em,px,%,ex) or 'auto' (not supported in IE)\n\n*''padding, border, border-style, border-color, border-width, and margin''- can be selected by using top, right, bottom, or left rules (eg border-top) but were not included for simplicity and brevity.\n\n!Examples\n*''padding'': 1em;\n*''border'': 1px solid black;\n*''border-style'': dotted;\n*''border-color'': #e6e6e6;\n*''border-width'': 1px;\n*''outline'': 1px solid black;\n*''outline-style'': dashed;\n*''outline-color'': inverted;\n*''outline-width'': .25em;\n*''margin'': 2em;\n*''width'': 400px;\n*''height'': 100px;\n*''min-width'': 25em;\n*''max-width'': 75em;\n*''min-height'': 30em;\n*''max-height'': 200px;\n
!Rules\n*''color''- use color name, hex (#ffffff), or rgb (rgb(255,0,0)) specifies foreground (text and border) color of a box\n*''background-color''- color or 'transparent'\n*''background''- combines some or all of the values for background-color, background-image, background-repeat, background-attachment and background-position.\n*''background-image''- use 'none' or a URI\n*''background-repeat''- use 'repeat', 'repeat-x', 'repeat-y', 'or 'no-repeat'\n*''background-position''- 'top', 'right', 'bottom', 'left', 'center', or a measurement(em,px,%,ex)\n*''background-attachment''- use 'scroll' or 'fixed'\n\n!Examples\n*''color'': #000;\n*''background-color'': transparent;\n*''background'': red url(images/poobah.gif) no-repeat top left;\n*''background-image'': url(someimage.jpg);\n*''background-repeat'': no-repeat;\n*''background-position'': top right;\n*''background-attachment'': fixed;\n\n
!Rules\n*''list-style''- combination of list-style-type, list-style-position and list-style-image\n*''list-style-type''- use 'none', 'disc', 'circle', 'square', 'decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-greek', 'lower-latin', 'upper-latin', 'armenian', and 'georgian'\n*''list-style-image''- use 'none' or a URI\n*''list-style-position''- use 'inside' or 'outside' (places it in or out of the list-item box, outside is the default)\n\n*The following list-styles aren't supported by IE: 'decimal-leading-zero', 'lower-greek', 'lower-latin', and 'upper-latin' \n\n!Examples\n*''list-style'': square inside;\n*''list-style-type'': square;\n*''list-style-image'': url(images/myface.jpg); \n*''list-style-position'': inside;\n
!Rules\n*''position''- use 'static', 'relative', 'absolute', or 'fixed' (fixed is not supported by IE)\n*''top''- measurement(em,px,%,ex) or 'auto'\n*''right''- measurement(em,px,%,ex) or 'auto'\n*''bottom''- measurement(em,px,%,ex) or 'auto'\n*''left''- measurement(em,px,%,ex) or 'auto'\n*''clip''- use 'auto' or 'rect([top] [right] [bottom] [left])', requires position:absolute\n*''overflow''- use 'visible', 'hidden', 'scroll', or 'auto'\n*''z-index''use 'auto' or a number(higher number puts it on topo of others), requires position:absolute\n*''float''- use 'left', 'right', or 'none'\n*''clear''- use 'left', 'right', 'none', or 'both'\n*''display''- use 'none', 'inline', 'block', 'inline-block', 'list-item', 'table', 'inline-table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', 'table-caption',\n*''visibility''- use 'visible' or 'hidden'\n\n*''table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption'' are not supported by IE\n\n!Examples\n*''position'': absolute;\n*''top'': 3em;\n*''right'': 200px;\n*''bottom'': -25px;\n*''left'': 33%;\n*''clip'': rect(10px 50px 30px 10px);\n*''overflow'': hidden;\n*''z-index'': 2;\n*''float'': left;\n*''clear'': both;\n*''display'': block;\n*''visibility'': hidden;\n
!Rules\n*''page-break-before''- use 'auto', 'always', 'avoid', 'left', or 'right'\n*''page-break-after''- use 'auto', 'always', 'avoid', 'left', or 'right'\n*''page-break-inside''- use 'auto' or 'avoid'\n*''orphans''- use a number (default is 2)\n*''widows''- use a number (default is 2)\n\n!Examples\n*''page-break-before'': always;\n*''page-break-after'': avoid;\n*''page-break-inside'': avoid;\n*''orphans'': 3;\n*''widows'': 4;
!Rules\n*''table-layout''- use 'auto' or 'fixed' (rendering algorithm, not in IE)\n*''border-collapse''- use 'collapse' or 'separate' (default)\n*''border-spacing''- measurement(em,px,ex) one number is a padding around each cell, with two numbers the first is the horizontal and second is the vertical spacing. Not supported in IE. Will only work with border-collapse:separate.\n*''empty-cells''- use 'show' (default) or 'hide' Not in IE.\n*''caption-side''- use 'top' (default), 'right', 'bottom', 'left'\n\n!Examples\n*''table-layout'': fixed;\n*''border-collapse'': collapse;\n*''border-spacing'': .25em .5em;\n*''empty-cells'': hide;\n*''caption-side'': right;
!Rules\n*''content''- URI, string, normal, open-quote, close-quote, no-open-quote, no-close-quote, attr([attribute name]), used with :before or :after psuedo-selector (No IE support)\n*''cursor''- use 'auto', 'crosshair', 'default', 'help', 'move', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize', 'nw-resize', 'text', 'pointer', 'progress', 'wait', or a URI\n*''direction''- use 'ltr' (left to right) or 'rtl'(right to left)\n*''unicode-bidi''- use 'normal', 'embed', or 'bidi-override' \n\n!Examples\n*''content'': content: ">>";\n*''cursor'': help;\n*''direction'': rtl;\n*''unicode-bidi'': embed;\n
This collection can be found more complete and with more detail at [[HtmlDog|http://www.htmldog.com/]]. [[HtmlDog|http://www.htmldog.com/]] also has good tutorials and information regarding CSS and HTML.\n\n<<listTags "css reference">>
Its useful to understand the structure of a web page so you can 'describe' in your styles which element (like div, a, or #contentWrapper) you are coloring. For simplicity I'll only include elements that you would want to style. (Firefox extensions make this easier and somwhat automated.) I hope to make this list collapsable in the future to improve legibility.\n\n*html\n**body\n***div#contentWrapper //Use this for [[Centering the TiddlyWiki]] or [[Increasing specificity]]//\n****div#header\n*****div#titleLine\n******span.siteTitle //The site's title (content is controlled by the SiteTitle tiddler)// \n******span.siteSubtitle //The site's subtitle (content is controlled by the SiteSubtitle tiddler)//\n****div#sidebar //The sidebar on the right//\n*****div#sidebarOptions //The sidebar that contains the seach box (content is controlled by the SideBarOptions tiddler)//\n******div.sliderPanel //This is the panel containing the option checkboxes (content is controled by the OptionsPanel tiddler)//\n*****div#sidebarTabs //The sidebar with the tabs (content is controlled by the SideBarTabs tiddler) //\n******div.txtMainTab //The class name is determined by the tab generating macro//\n*******div.tabset //The tabs are contained in the tabset//\n********a.tab.tabSelected\n********a.tab.tabUnselected\n*******div.tabContents\n****div#mainMenu\n****div#displayArea\n*****div#messageArea\n*****div#tiddlerDisplay\n******div#tiddlerTiddlerName.tiddler //The TiddlerName part of the id is customized per tiddler (See [[Tiddler IDs]]) //\n*******div.unselectedTiddler //This div's class changes to .unselected when the mouse hovers over it. //\n********div#toolbarTiddlerName.toolbar\n********div#titleTiddlerName.title\n********div#bodyTiddlerName.body //This div and its children (.viewer and .footer) change when editing (see [[Editor Structure]]) //\n*********div#viewerTiddlerName.viewer\n**********div#popup //The popup is generated in a number of places but it uses the same code (see [[Styling the popup]]) //\n***********hr //The horizontal rule exists in all popups//\n*********div#footerTiddlerName.footer\n**********div //This div holds the tags listing//
This site is [[Clint's|Clint Checketts]] collection of TiddlyWiki tips and information with the following purposes:\n\n!Primary purpose\n*Offer a [[tutorial|Table of contents]] on styling ~TiddlyWiki\n*Present information on the [[structure|TiddlyWiki Structure]] of ~TiddlyWiki's elements\n*Collect tips on [[hard-to-style elements]] and general tips\n\n!Secondary purpose\n*Point to my [[Favorite Styles]]\n*List my [[Favorite Macros]]\n*Research TiddlyWiki [[improvements|Requests]]
http://15black.bluedepot.com
See [[Favorite Styles]]
This feature for TiddlyWiki would allow me to create a tiddler called TiddlyWiki fill it with content, then, in a tiddler called TW I would put\n\n{{{\n<<redirect TiddlyWiki>>\n}}}\n\nand the link would point to TiddlyWiki. I could then tag tiddler TW as non-searchable and listable.
Today I posted TiddlyKubrick and pondered the idea of [[redirect tiddlers]].
''This is incomplete!'' I'm improving this constantly. Check back at ==least== //most// by ==July 20, 2005== July 23, 2005.\n\n!Book layout\n*Introduction\n**CSS Explanation\n**Styling examples (ZO,BlueMist,GTDone,TiddlyTag)\n*[[TiddlyWiki Structure]]\n*CSS Tips\n**Firefox Extensions\n**Styling Popup\n**Hover over tiddler\n**StyleSheet editing tips
<<option chkOpenInNewWindow>> OpenLinksInNewWindow\n<<option chkSaveEmptyTemplate>> SaveEmptyTemplate\n<<option chkToggleLinks>> Clicking on links to tiddlers that are already open causes them to close\n^^(override with Control or other modifier key)^^\n\nYour username for signing your edits. Write it as a WikiWord (eg JoeBloggs)\n<<option txtUserName>>
These options for customising TiddlyWiki are saved in your browser\n\n<<option chkSaveBackups>> SaveBackups\n<<option chkAutoSave>> AutoSave\n<<option chkGenerateAnRssFeed>> GenerateAnRssFeed\n<<option chkRegExpSearch>> RegExpSearch\n<<option chkCaseSensitiveSearch>> CaseSensitiveSearch\n<<option chkAnimate>> EnableAnimations\n\nSee AdvancedOptions
*[[TiddlyStyle News]]\n*[[CSS Reference]]\n*[[Requests]]\n*MainMenu\n*StyleSheet\n*DefaultTiddlers\n*<<newTiddler>>\n*<<newJournal "DD MMM YYYY">>
//Grab contentWrapper\nvar contentWrapper = document.getElementById('contentWrapper');\n\n//Create bodyWrapper and put the displayArea and sidebar in it\nvar bodyWrapper = createTiddlyElement(contentWrapper,'div','bodyWrapper',null,null);\nbodyWrapper.appendChild(document.getElementById('sidebar'));\nbodyWrapper.appendChild(document.getElementById('displayArea'));\n\n//put mainMenu and sidebarOptions into header;\nvar headerDiv = document.getElementById('header');\nheaderDiv.appendChild(document.getElementById('mainMenu'));\nheaderDiv.appendChild(document.getElementById('sidebarOptions'));\n\n//Create footer and tack it to the bottom (to fix float problems)\nvar contentFooter = createTiddlyElement(bodyWrapper,"div","contentFooter",null,null);\ncreateTiddlyElement(contentFooter,"p","contentFooter",null,"TiddlyWiki was created by Jeremy Ruston and TiddlyRin was created by Clint Checketts");\n
<<tabs txtMoreTab\nMissing "Missing tiddlers" TabMoreMissing\nOrphans "Orphaned tiddlers" TabMoreOrphans\nUntagged "Untagged tiddlers" TabMoreUntagged\n>>
!TiddlyWiki improvement requests\n*Replace spaces in ids and classes with underscores\n*Have an 'Advanced Option' that lets you put in the name of the backup (sub)folder with the name of the tiddler file being the default\n*Create '[[redirect tiddlers]]' that autimatically point to other other tiddlers.\n*There sould be a default tiddler that would insert the lsat x days updated tiddlers. Minus thos that are tagged to be ignored (eg systemTiddlers and systemConfig)\n\n\n!TiddlyWiki Observations (no action currently required)\n*When listing Tiddlers via the listTags macro, they are not listed as being linked to.\n\n\n!Now in TiddlyWiki!\n*==Have and advanced option that toggles 'hidden' tiddlers==\n*==Wrap imported content in a div with an id of #importedTiddlerMyTiddler and a class of .importedTiddler==\n
/*\n{{{\n*/\n\n*{\n margin: 0;\n padding: 0;\n}\n\na,.viewer a.tiddlyLink,.viewer a.button, .viewer a.externalLink{\n color: #005d93;\n text-decoration: none;\n background: transparent;\n}\n\na:hover, .viewer a.tiddlyLink:hover, .viewer a.button:hover, .viewer a.externalLink:hover{\n color: #900;\n text-decoration: underline;\n}\n\nbody {\n background-color: #fff;\n font-family: Verdana, Arial, Helvetica, sans-serif;\n font-size: 62.5%; /* Resets 1em to 10px */\n text-align: left;\n}\n\n#contentWrapper{\n border: 0;\n padding: .5em 1em;\n}\n\n/*================================================Header and footer=======*/\n#header {\n height: 175px;\n background: url("rinback.jpg") repeat-x bottom left;\n position: relative;\n}\n\n#titleLine{\n background: #ccc url("ringradient.jpg") repeat-x top center;\n padding: 0 5px;\n}\n\n#siteTitle, #siteSubtitle{\n display: inline;\n font-size: 11px;\n line-height: 25px;\n font-weight: bold;\n color: #000;\n}\n\n#siteTitle a{\n color: #000;\n}\n\n#siteTitle a:hover, #siteSubtitle a:hover,#header .headerOptions a:hover{\n color: #cdcecf;\n text-decoration: none;\n background: transparent;\n}\n\n#siteSubtitle, #siteSubtitle a{\n font-weight: normal;\n color: #8b9198;\n}\n\n\n#header .headerOptions{\n position: absolute;\n z-index: 10;\n top: 0;\n right: 5px;\n text-align: right;\n}\n\n#header .headerOptions a{\n position: relative;\n top: -2px;\n color: #8b9190;\n}\n\n#header .headerOptions .sliderPanel{\n color: #000;\n background: #fff;\n border-right: 2px solid #999;\n border-bottom: 2px solid #999;\n border-left: 1px solid #ccc;\n font-size: 10px;\n text-align: left;\n line-height: 1.2em;\n padding: .5em 1em;\n margin: -3px -2px 0 0;\n width: 180px; \n}\n\n.headerSearch input{\n margin: 0em 1em 0 .5em;\n font-size: 9px;\n}\n\n/*=========================================Sidebar====*/\n#sidebar, #sidebarOptions, #sidebarTabs{\n background: transparent;\n text-align: left;\n}\n\n#sidebar{\n float: left;\n margin: 9px 15px;\n position: relative;\n width: 220px;\n}\n\n#sidebarOptions a.button{\n display: inline;\n}\n\n.sidebarBlock{\n display: block;\n margin: 0 0 .5em 0;\n background: #fff;\n padding-bottom: 5px;\n}\n\n.sidebarBlock h1, .sidebarBlock h2, .sidebarBlock h3, .sidebarBlock .tabset{\n background: #ccc url("ringradient.jpg") repeat-x top left;\n font-size: 11px;\n line-height: 23px;\n font-weight: bold;\n color: #000; \n padding-left: 5px ;\n}\n\n.sidebarBlock .tabset{\n padding: 0;\n}\n\n#sidebar .sidebarBlock .tabContents,\n#displayArea .sidebarBlock .tabContents .tabContents, \n#displayArea .viewer .tabUnselected,\n#displayArea .viewer .tabContents .tabSelected{\n background: #fff;\n}\n\n\n#sidebar .sidebarBlock .tabContents .tabContents,\n#displayArea .sidebarBlock .tabContents,\n#displayArea .viewer .tabSelected,\n#displayArea .viewer .tabContents .tabUnselected{\n background: #f5f6f7;\n}\n\n#sidebar .sidebarBlock .tabContents .tab{\n background: #f5f6f8;\n}\n\n\n#sidebar .sidebarBlock .tabContents .tabUnselected{\n background: #f0f0f0;\n}\n\n#sidebar .sidebarBlock .tabContents .tabUnselected:hover{\n text-decoration: underline;\n}\n\n\n#contentWrapper .tab{\n position: relative;\n padding-bottom: 2px;\n font-weight: normal;\n top: 3px;\n background: #f5f6f8;\n color: #000;\n text-decoration: none;\n}\n\n#contentWrapper .tabSelected{\n top: 1px;\n padding-bottom: 4px !important;\n background: #fff;\n font-weight: bold;\n cursor: default;\n}\n\n#sidebarTabs .tabContents li.listTitle,#sidebarTabs .tabContents li.listTitle:hover{\n padding: 0 0 0 .5em;\n margin: 0;\n background: transparent;\n}\n\n#sidebarTabs .tabContents li.listLink{\n margin-left: 1em; \n}\n\n#sidebarTabs .sidebarBlock li{\n list-style: none;\n margin-left: 1em;\n padding: 1px 0 1px 1.5em;\n background: transparent url("rinbulletOver.gif") no-repeat left center;\n}\n\n#sidebarTabs .sidebarBlock li:hover{\n background: transparent url("rinbullet.gif") no-repeat left center;\n}\n\n#contentWrapper .tabContents a.tiddlyLink,#contentWrapper .tabContents a.button{\n display: block;\n color: #005d93;\n}\n\n#contentWrapper .tabContents a.tiddlyLink:hover,#contentWrapper .tabContents a.button:hover{\n color: #900;\n background: #f0f0f0;\n text-decoration: none;\n}\n\n/* TIddlyRin was designed by Clint Checketts http://15black.bluedepot.com */\n\n#mainMenu{\n bottom: 0;\n left: 0;\n width: auto;\n padding: 0;\n margin: 0;\n color: #fff;\n}\n#mainMenu br{\n display: none;\n}\n\n#mainMenu ul{\n margin: 0 auto -1px 2px;\n}\n\n#mainMenu li{\n display: inline;\n}\n\n#mainMenu li a.tiddlyLink,#mainMenu li a.button,#mainMenu li a.externalLink{\n padding: 2px 10px;\n color: #e6e6e6;\n text-decoration: none;\n}\n\n#mainMenu li a.tiddlyLink:hover,#mainMenu li a.button:hover,#mainMenu li a.externalLink:hover{\n background: #97ced5;\n color: #19729e;\n}\n\n/*========================================================================Display area and bodyWrapper======*/\n\n#bodyWrapper{\n border: 1px solid #d5d7db;\n border-width: 15px 1px 3px 1px;\n margin: 10px 0;\n background: #f5f6f7;\n}\n\n#displayArea{\n margin: 0em 0em 0em 24.5em;\n padding: 0 10px;\n position: relative;\n}\n\n#messageArea{\n background: #ccc url("ringradient.jpg") repeat-x left top;\n color: #000;\n position: absolute;\n top: -20px;\n right: 10px;\n}\n\n#messageArea a:link{\n color: #000;\n}\n\n#messageArea a:hover{\n text-decoration: none;\n}\n\n.tiddler{\n background: #fff;\n margin: 10px 0;\n}\n\n.tiddler .toolbar a.button,.tiddler .footer a.button,.tiddler .editorFooter a.button{\n padding: 2px 5px;\n color: #19729e;\n text-decoration: none;\n}\n\n.tiddler .toolbar a.button:hover,.tiddler .footer a.button:hover,.tiddler .editorFooter a.button:hover{\n background: #97ced5;\n color: #19729e;\n}\n\n.title{\n font-size: 16px;\n}\n\n.viewer h1,h2,h3,h4,h5,h6{\n background: transparent;\n}\n\n.viewer h1{\n border-bottom: 1px dotted #97ced5;\n}\n\n#contentFooter{\n clear: both;\n color: #fff;\n text-align: center;\n background: #d5d7db\n}\n\n.toolbar #popup{\n width: 12em;\n}\n\n#sidebarTabs #popup{\n width: 25em;;\n}\n\n#popup{\n color: #000;\n background: #d5d7db;\n margin-left: -3em;\n}\n\n#popup hr{\n color: #999;\n border-top: 1px solid #999;\n width: 96%;\n}\n\n#contentWrapper #popup a{\n display: block;\n color: #005d93;\n}\n\n#contentWrapper #popup a:hover{\n color: #900;\n background: #f0f0f0;\n text-decoration: none;\n }\n\n.zoomer{\n color: #005d93;\n border: 1px solid #005d93;\n\n/*\n}}}\n*/
TiddlyTagStyle for TiddlyWiki <<version>>\n\n''I did not design this beautiful layout!''\n\nI copied this directly from Jonny ~LeRoy's [[TiddlyTagWiki|http://www.digitaldimsum.co.uk/]]. I only threw this css together to solve two things:\n*The [[TiddlyTagWiki|http://www.digitaldimsum.co.uk/]] hasn't been updated for TW <<version>>\n*The [[TiddlyTagWiki|http://www.digitaldimsum.co.uk/]] didn't work in the StyleSheet tiddler.\n\nEnjoy!
TiddlyRin is a StyleSheet tiddler inspired by the [[Rin/Manji|http://www.brokenkode.com/rin]] theme for Wordpress. I believe that this is the most beautiful style that I've created for TiddlyWiki. Its functional in that it gets the most amount of info on the page without cluttering it.
TiddlyKubrick was a good challenge for me. First of all it was my first TiddlyStyle that used graphics. That actually was no problem. The true challenge came from styling the the sidebars. \n\nCurrently, the sidebars are created as a series of links and line breaks (<a><br><a><br>) this works rather well. THe problem arises when you want to get rid of the <br> elements. Using CSS I couldn't seem to style them away. I'm still not satisfied with the end spacing.\n\nI going to //tweak// the source code so the lists are generated to be //lists//. Hopefully that will seem worthwhile and useful to others. It shouldn't be too difficult either.\n\nThe second problem that TiddlyKubrik brings lies in the fact that it is a major pain to upgrade to. I had to make changes in about 6 different tiddler to get move TiddlyStyles over to the new TK layout.\n\nAs a confession, the idea of taking the default WordPress theme was actually meant in jest. I was inspired by an article at [[Asterisk|http://www.7nights.com/asterisk/]] when he complained of the [[Scourge of Kubrick|http://www.7nights.com/asterisk/archives05/2005/05/the-scourge-of-kubrick]]. In the meantime, enjoy the new style.\n\n-Clint
Please wait while TiddlyStyles finishes loading... (javascript is required)
TiddlyStyles
TiddlyWiki can do that?!?!
TiddlyWiki is an open source project that is maintained by Jeremy Ruston. Its home online is at http://www.tiddlywiki.com
I completed TiddlyRin today. I'll post it and now I think I'll either just focus on color schemes (rather than layouts) or try my hand at programming macros.\n\nI'm really liking TiddlyRin for its layout. TiddlyKubrick couldn't show everything I wanted on a single page. TiddlyRin packs in more info without crowding in the least. I'd tried the embedding the images in the StyleSheet tiddler, but them it tried to interpret the codes as wikiwords, that messed up my 'Missing' tab because it was filled with data-wikiwords!\n\nI'm also posting the updates to all the other StyleSheets to 1.2.29 today.
!July 17, 2005\n*Site Launch\n*[[CSS Reference]] Completed\n*[[TiddlyWiki Structure]] Completed\n*Tutorial Started ''Very Incomplete''
TiddlyStyles
// //''Name:'' Weblog\n// //''Version:'' 0.1.0\n// //''Author:'' ClintChecketts\n// //''Type:'' Plugin\n\n// //''Description:'' Posts the most recently edited tiddlers when the TiddlyWiki is opened, similar to a blog.\n\n// //''Syntax:'' Change the daysOrPosts and numOfDaysOrPosts variables in the code section. \n// //Examples: \n/*\n{{{\n var daysOrPosts = "days";\n var numOfDaysOrPosts = "2";\n}}}\nwill display the defaultTiddlers then all the tiddlers from the 2 most recent days, except those tagged as SystemTiddlers.\n\n{{{\n var daysOrPosts = "posts";\n var numOfDaysOrPosts = "10";\n}}}\nwill display the defaultTiddlers then the 15 most recent posts, except those tagged as SystemTiddlers.\n*/\n\n// //''Directions:'' Copy this tiddler and tag it as systemConfig. Next, change the daysOrPosts and numOfDaysOrPosts variable to your liking. (About 8 lines below this)\n\n// //''Know Issues:'' If a defaultTiddlers references a tiddler that has recently been referenced it will appear in the chronological order rather than at the top of the page. Also, if you are inserting the 15 most recent posts and default tiddlers new enough they too will be part of that count.\n\n// //''Revision History:''\n// // v0.1.0 (03 Aug 2005): initial release\n// // v0.1.2 (03 Aug 2005): fixed 'day' sorting order and permalink breakage\n\n// //''Code section:''\nvar daysOrPosts = "days";\nvar numOfDaysOrPosts = "2";\n// // We don't want to show tiddlers tagged as systemTiddlers etc.\nvar ignoreTags = ("systemTiddlers","systemConfig","weblogIgnore");\n\nwindow.displayTiddlers_original_TiddlyBlog = window.displayTiddlers;\nwindow.displayTiddlers = function(src,titles,state,highlightText,highlightCaseSensitive,animate,slowly) {\n // if using the addressbar to select tiddlers return\n if(window.location.hash) daysOrPosts = "";\n if(daysOrPosts == "posts"){\n //lookup the last few posts\n var tiddlerNames = store.reverseLookup("tags","systemTiddlers",false,"modified");\n for(var t = tiddlerNames.length-numOfDaysOrPosts;t<=tiddlerNames.length-1;t++)\n displayTiddler(src,tiddlerNames[t].title,state,highlightText,highlightCaseSensitive,animate,slowly);\n }\n if (daysOrPosts == "days"){\n var lastDay = "";\n var tiddlerNames = store.reverseLookup("tags","systemTiddlers",false,"modified");\n var t = tiddlerNames.length -1;\n var tFollower = 0;\n for(t;t>=0;t--) if(numOfDaysOrPosts >= 0){\n var theDay = tiddlerNames[t].modified.convertToYYYYMMDDHHMM().substr(0,8);\n if(theDay != lastDay){\n numOfDaysOrPosts = numOfDaysOrPosts -1;\n lastDay = theDay;\n tFollower = t;\n }\n }\n\n for(tFollower = tFollower+1; tFollower < tiddlerNames.length;tFollower++){\n displayTiddler(src,tiddlerNames[tFollower].title,state,highlightText,highlightCaseSensitive,animate,slowly);\n }\n\n }\n\n // call the original displayTiddlers function\n window.displayTiddlers_original_TiddlyBlog(src,titles,state,highlightText,highlightCaseSensitive,animate,slowly);\n\n}
I've just posted my first plugin. It amazed me just how complicated these things can be. Its really increased my respect for those who can package a plugin quickly and efficiently.\n\nThe plugin, [[TiddlyBlog|http://15black.bluedepot.com/twtests/tiddlyblog.html]], is intended to encourage me to post more frequently to TiddlyStyles. It automates the frontpage generation by posting the most recent posts or most recent days. I'll touch it up, but I think its just about at it maximum functionality.
!Style tiddlers for TiddlyWiki about <<version>>:\n\n!!Color schemes (moderate to no layout change)\n*[[Zeldman Orange Style]] - http://15black.bluedepot.com/styles/zotiddlywiki.html\n*[[Blue Mist Style]] - http://15black.bluedepot.com/styles/misttiddlywiki.html\n*TiddlySinister - http://15black.bluedepot.com/styles/tiddlysinister.html\n\n\n!!Layouts (drastic/impressive layout modifications)\n*[[GTDone Style]] - http://15black.bluedepot.com/styles/gtdonetiddlywiki.html\n*[[TiddlyTagStyle]] - http://15black.bluedepot.com/styles/tiddlytagtiddlywiki.html\n*[[TiddlyKubrick]]* - http://15black.bluedepot.com/styles/kubricktiddly.html\n*TiddlyRin* - http://15black.bluedepot.com/styles/tiddlyrin.html
First released on August, 5th 2005. I figured a dark but clean TiddlyWiki style would be welcome. I was inspired by the Wordpress skin [[Mars Spirit|http://www.alexking.org/software/wordpress/styles/sample.php?wpstyle=mars-spirit]].\n\nIt can be found at: http://15black.bluedepot.com/styles/tiddlysinister.html
// //''Name:'' InsertSmiley\n// //''Version:'' <<getversion smiley>> (<<getversiondate smiley "DD MMM YYYY">>)\n// //''Author:'' AlanHecht\n// //''Type:'' [[Macro|Macros]]\n\n// //''Description:'' Inserts a small smiley graphic at the location of the macro and does not require any external graphics. The method used should work on most current browser platforms.\n\n// //''Syntax:'' << {{{smiley ;-)}}}>>\n// //Examples: <<smiley>> <<smiley :-(>> <<smiley ;-)>> <<smiley :-|>> <<smiley :-D>>\n\n// //''Directions:'' <<tiddler MacroDirections>>\n\n// //''Notes:'' A regular smiley <<smiley>> will be displayed if no smiley string is provided. Most smileys will work with or without the "nose" -- e.g. {{{;-)}}} is the same as {{{;)}}}\n\n// //''Revision History:''\n// // v0.1.0 (20 July 2005): initial release\n// // v0.1.1 (20 July 2005): << {{{smiley}}}>> with no parameter displays a standard smiley\n\n// //''Code section:''\nversion.extensions.smiley = {major: 0, minor: 1, revision: 1, date: new Date(2005,7,20)};\nconfig.macros.smiley = {}\nconfig.macros.smiley.handler = function(place,macroName,params)\n{\n var palette = ["transparent","#000000","#1a1507","#352e18","#464646","#666666","#a3141e","#b06b63","#cc9900","#dd9030","#dddddd","#e89d00","#edc32a","#f3cb3c","#fdf201","#fdf526","#ff3149","#ffac00","#ffbf06","#ffc846","#ffcc66","#ffd758","#ffdd01","#ffea7b","#ffed55","#ffffff"];\n var data = params;\n var imageMap = null;\n if(!data[0] || data[0] == ":-)" || data[0] == ":)")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyffyffuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwboooowwwbllbbwwwboooowbrllbacwwwbbbbbrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-(" || data[0] == ":(")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyyyyyyuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwoooooowwrllbbwwwwbbbbbsrllbacwwbwwwwsbllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ";-)" || data[0] == ";)")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyxxxxxuujbaadyyyxxxeetttdabppphddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwboooowwwbllbbwwwboooowbrllbacwwwbbbbbrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-|" || data[0] == ":|")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyffyffuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwoooooowwrllbbwwwwbbbbbsrllbacwwwwwwwsrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-D" || data[0] == ":D")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyeeyeeuujbaadyyyeeyeetttdabppppyyyyypmmlbbwbbbbbbbbbbblbbwbkzzzzzzzkbwbbwbfzzzzzzzfbwbbwbkzzzzzzzkbwbacwbkzzzzzkblcaablsbkzzzkblibaaablsbbbbblibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else\n createTiddlyElement(place,"span",null,"errorNoSuchMacro","unknown smiley");\n if(imageMap)\n {\n var box = createTiddlyElement(place,"span",null,"smiley",String.fromCharCode(160));\n box.style.position = "relative";\n box.style.width = "15px";\n box.style.height = "15px";\n box.style.marginLeft = "1px";\n box.style.marginRight = "1px";\n box.style.paddingRight = "12px";\n box.style.verticalAlign = "top";\n\n //now divide into 15x15 grid and create each pixel\n // rows\n for(r=0; r<15; r++)\n {\n // columns\n for(c=0; c<15; c++)\n {\n //create each pixel with the correct background\n var pix = document.createElement("img");\n pix.className = "smileyPixel";\n pix.style.position = "absolute";\n pix.border = 0;\n pix.style.top = r + "px";\n pix.style.left = c + "px";\n pix.style.width = "1px";\n pix.style.height = "1px";\n pix.style.backgroundColor = palette[imageMap.charCodeAt((r*15)+c)-97];\n pix.src = "data:image/gif,GIF89a%01%00%01%00%91%FF%00%FF%FF%FF%00%00%00%C0%C0%C0%00%00%00!%F9%04%01%00%00%02%00%2C%00%00%00%00%01%00%01%00%40%02%02T%01%00%3B";\n box.appendChild(pix);\n }\n }\n }\n}\n
Well, my evil twin released TiddlySinister today. Super-villians of the world, unite!\n\nI was also thrilled to see myself listed on TiddlyWiki because of my [[Weblog plugin]] and themes. Cheap thrills. <<smiley :D>>
Email address: checketts [at] gmail -dot- com\n\nClint is a student at [[BYU-Idaho|http://www.byui.edu]] studying Information Systems.
!TiddlyWiki [[Spanish Translation|http://15black.bluedepot.com/twtests/spanishtw.htm]] posted\nI posted a quick translation of the TiddlyWiki interface into Spanish. Ricardo Destuvo emailed me corrections that helped immensely. The [[final product|http://15black.bluedepot.com/twtests/spanishtw.htm]] is great.\n\n![[Adsense|http://www.google.com/adsense]] works with TiddlyWiki\nI created an [[adsense file|http://15black.bluedepot.com/twtests/adsense.html]] and pasted it into a TW file. It worked perfectly. The drawback is that the javascript is required to be directly inserted into the source code. I wish there was [[a simple way to insert it|file:///c:/Documents%20and%20Settings/Clint/Desktop/adsense.html#%5B%5BHow%20to%20use%3A%5D%5D]] into a tiddler so it would be upgrade proof. I've also gone through and created matching [[adsense layouts|http://15black.bluedepot.com/twtests/adsense.html]] for each of my TW styles.\n\n!Tiddly Thoughts and wishes, and ~To-Dos\n*Incorporate [[nifty corners|http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html]] into TiddlyWiki\n*Revamp GTDone Style (==place mainmenu with-in sidebar== done!)\n*Create the TiddlyPedia skin\n\n\n!Collection of TW translations\n*[[German|http://byzero.de/files/tiddlywiki-deutsch.txt]]\n*Dutch\n*[[French|http://avm.free.fr/tidlipo.html#AdaptationFran%C3%A7aise]]\n*[[Spanish|http://15black.bluedepot.com/twtests/spanishtw.htm]]\n
Before we attempt to rearrange the page's layout, it is important to understand the page's structure. What is the page's structure? Think of a tree. The base element for a web page is the HTML element, like the trunk of a tree. IMany elements branch out of the HTML element and even more elements branch out of those elements. So the page's structure branches out like a tree. Got it?\n\nNow the elements that we are concerned with are the MainMenu and Sidebar. Here's how they sit in TiddlyWiki:\n\n*~ContentWrapper\n**Sidebar\n***~SidebarOptions\n***~SidebarTabs\n**mainMenu\n**~DisplayArea (where the tiddler's are)\n\n\nTo move the sidebar under the MainMenu we have to move it in two ways: 1) we need to place the MainMenu before or at the top of the sidebar (using JavaScript) and 2) we have to change how it displays on the page (using CSS).\n\nCreate a tiddler and name it whatever you want. ('HTML Structure' is usually a good name.) Give it the tag of 'systemConfig'. This will make it execute the JavaScript in the tiddler the next time the page is refreshed. Now insert the following code:\n\n{{{\nvar sidebar = document.getElementById('sidebar');\nsidebar.insertBefore(document.getElementById('mainMenu'),document.getElementById('sidebarOptions'));\n}}}\n\nThis 'grabs' the sidebar then grabs the mainMenu element and moves it to be before the sidebarOptions element. Save your TiddlyWiki file and refresh it. This will execute the new HTML Structure tiddler and rearrange the page structure. Now the page's structure looks like this (notice where the mainMenu has moved to):\n\n*~ContentWrapper\n**Sidebar\n***''mainMenu''\n***~SidebarOptions\n***~SidebarTabs\n**~DisplayArea (where the tiddler's are)\n\nYou may be scratching your head wondering why we need to do anything else. In the TiddlyWiki the mainMenu is overlapping the sidebar and its still on the wrong side of the page. We'll fix it with CSS.\n\nCSS rules allow you to change how the page displays. They're pretty easy to understand once you see them written out. We'll just add a few rules that undo the default TiddlyWiki styles.\n\nCreate a tiddler named 'StyleSheet' and add the following rules:\n\n{{{\n#mainMenu{\n position: static;\n}\n#sidebar{\n left: 0;\n}\n#displayArea{\n margin-right: 0;\n}\n}}}\n\nThe first rule turns off a 'position: absolute;' rule. Absolute positioning is what make the mainMenu overlap the sidebar. 'Static' tells the sidebar to move on down and display after the mainMenu.\n\nThe second rule tells the sidebar to be zero pixels from the left side of the screen. It was set at 'right:0;' by TiddlyWiki before.\n\nThe final rule is actually not necessary but once we move the sidebar to the left side of the screen we want to let the tiddler's fill in the empty area again. So we remove the displayArea's right margin.\n\nTo keep the TiddlyWiki useable you'll probably want to keep the mainMenu realatively short. Next time I'll show you how to make your mainMenu horizontal and part of the header.