Welcome to TiddlyWiki created by Jeremy Ruston, Copyright © 2007 UnaMesa Association
{{title{[[How does the 12 column grid work?|12ColumnGrid]]}}} /% Temporary title hack %/
The grid is based on a width of 960 pixels, a size that fits most browsers. It uses 12 grid columns, which can be combined for many different layouts. Any combination of grid columns that adds up to 12 equals one row.
Please note that this test version of Tiddly 960 requires some clean up. There are quite a few extra tiddlers that should be removed, and no tags employed yet. I'll be doing this cleanup over the next week.
If you prefer to start fresh with an "empty" ~TiddlyWiki and just the bare-bones elements of the Tiddly 960 framework, you can download one at http://tinyurl.com/tiddly960empty, which will redirect you to a download at drop.io.
Discovered that in the Tiddly 960 coding it is easy to add an id to the tiddler where it is being displayed. This may be helpful for linking from the actual tiddler to the physical location on the page where it is displayed. I'm still experimenting with the best way to do this. Remember id's should always be unique names.
{{{
"tiddler SomeName"
"tiddler SomeName" style="font-size:14px;"
"tiddler SomeName" id="uniquename"
}}}
Took the day off. Hey, it was my birthday!
Am in the process of removing the extra tiddlers that got left from the original frenzy of development. I am also setting up a basic tagging scheme to try to make it easier to identify the elements of Tiddly 960 and the content elements in this instance. I am also beginning to experiment with using tagging for navigating up and down the hierarchy.
Please remember, your suggestions for improvement are always welcome at the TiddlyWiki Google Group at http://groups.google.com/group/tiddlywiki.
NOTES
*~BrandingHeader renamed AlternateHeader
*Added tiddler AllRows just for convenience (maybe can automate?)
*Tagged all current rows with Row
*Tagged all tiddlers on each row with that row's name
*Deleted unused row tiddlers
*Tagged all tiddlers to identify their function
*Broke Documentation and FAQ into smaller chunks (but creating more tiddlers)
*Created daily journal to track changes
*Created previous and next links in each Row tiddler so that you can follow the chain
This list of all rows in this Tiddly 960 example is for your convenience.
*RowHeader
*RowAbove
*Main tiddlywiki
*RowBelow
*RowFluidGrid
*RowMedia
*RowFooter
These tiddlers are used as Tiddly 960 Syntax
<! -- this is used in the tiddler RowHeader -->
<style>
/* =============================
/
/ These styles apply to rowHeader -- they allow Tiddly960 to have its own header so you can easily change it if you wish
/
/ ============================== */
#header {display:none;} /* <-- this hides TW's original header -- */
#searchBox {
float:right;
}
#searchBox .searchButton {
margin-right: 5px;
font-size:12px;
font-weight: bold;
}
/* since this header is on a 960 grid, the backstage button may be in an odd position relative to the header, so this style makes the backstage button invisible until you hover over it ... it's still there, just not as obvious */
#backstageButton a {color:transparent;}
/* -- these styles mimic the appearance of the original TW #header -- */
#branding .siteTitle {font-size:100%; color:#fff;}
.siteSubtitle {font-size:45%; color:#fff;}
a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
span.siteTitle a.tiddlyLink.tiddlyLinkNonExisting, span.siteSubtitle a.tiddlyLink.tiddlyLinkNonExisting, span.siteSubtitle a.externalLink {color:#8cf;}
span.siteSubtitle a.externalLink {font-style:italic; text-decoration:none;}
</style>
<!-- this header was made to look similar to the original, but a little different -- you could make one a LOT different, even one with multiple columns -->
<!-- it is based on the 12 column grid, but it has not been set up in Tiddly 960 markup -- yet! -->
<div class="container_12">
<div class="grid_12" style="position:relative; top:0;border-bottom:2px solid gray;">
<h1 id="branding" macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]' style='padding-top:2em;'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
<span id='searchBox' macro='search'></span>
</h1>
</div>
{{title{[[Want to put a tiddler anywhere on the page?|Anywhere]]}}} /% Temporary title hack %/
Just think in rows, columns, and boxes. You can add as many rows as you want, divide them into as many columns as you want, and put as many boxes as you want in each column. This box and all the examples above were created using this simple row, column, box system.
A Fluid 960 Grid System for ~TiddlyWiki
Have you tried resizing your browser window? Yes, the grid is fluid!
<div class="grid" id="grid-1">
<div class="grid_1">
<div class="box">
<p>01</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>02</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>03</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>04</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>05</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>06</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>07</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>08</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>09</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>10</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>11</p>
</div>
</div>
<div class="grid_1">
<div class="box">
<p>12</p>
</div>
</div>
{{title{[[Does it come in other colors?|CssTheming]]}}} /% Temporary title hack %/
Choose your own colors, borders, backgrounds, and fonts through ordinary [[CSS styling|StyleSheet]] and make your own theme using Tiddly 960. You will find it a fast and easy way to prototype new themes for your ~TiddlyWiki.
!!!!!Who the heck is David Lester?
<html><img src="http://dl.dropbox.com/u/75198/TiddlyWiki/davidsmiles200.jpg" style="width: 100px;margin-right:9px;float:left; "/></html>I've been a graphic designer for nearly 30 years, and an educator for the last 10. I am currently a full-time doctoral student in the field of Higher and Adult Education at the University of Memphis. I know HTML and CSS pretty well, and hate the tedious task of hand-coding. ~TiddlyWiki makes creating content so easy! But I found it a bit of a challenge to make changes to the basic UI, and thought a CSS templating system like the Fluid 960 Grid System might make that easier. This is my experiment in trying to do that.
''David Lester''
''tiddly960@gmail.com''
[[GettingStarted]]
[[Introducing Tiddly 960]]
[[The Tiddly 960 Concept]]
[[Under the hood]]
[[Try it yourself]]
''{{center{Display tiddlers anywhere}}}''
These tiddlers are linked to the Tiddly 960 Documentation
!!!!!See also:
*[[Markup: Extending Tiddly 960]]
*[[Markup: Floats]]
*[[Tiddly 960 Conceptual Model|Tiddly960conceptualModel]]
*[[How Tiddly 960 works|How it works]]
*[[What is a "fluid grid"?|Documentation: What is a "fluid grid"?]]
*[[What does "960" mean?|Documentation: What does "960" mean?]]
!!!!!Elsewhere:
*[[TiddlyWiki Markup|http://tiddlywiki.org/wiki/TiddlyWiki_Markup]]
*[[TiddlyWiki.com|http://www.tiddlywiki.com/]]
*[[TiddlyWiki.org|http://tiddlywiki.org/wiki/Main_Page]]
*[[Fluid 960 Grid System|http://www.designinfluences.com/fluid960gs/]]
*[[960 Grid System|http://960.gs/]]
Tiddly 960 is a work in progress and documentation is limited, but there really is not a lot that you need to know.
<<tiddler [[Tiddly 960 Markup]]>>
<tiddler [[Tiddly 960 Version]]>>
!!!!What does ''960'' mean?
Over the years computer screens have gotten larger, and web designers try to design web pages to fit well for most users. A very common screen size is 1024 pixels wide. Once you account for scrollbars and other things that make the browser window smaller, you're left with a bit less than 1000 pixels. Many designers have chosen to design pages 960 pixels wide so they fit on most screens. The number 960 is also very convenient because it can be divided evenly by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480, making it very flexible for mutli-column layouts. The Fluid 960 Grid System uses 12 columns that are about 6% wide (about 60 pixels). Each of the 12 columns has a 1% margin on both sides. There are many other CSS frameworks available (such as [[Elements|http://elements.projectdesigns.org/]], [[Blueprint|http://www.blueprintcss.org/]], [[Yahoo YUI|http://developer.yahoo.com/yui/grids/]]), and ~TiddlyWiki could probably be made to work with any of them. I just happen to be a fan of the Fluid 960 Grid System.
!!!!What is a "fluid grid"?
Web page designs come in two flavors: a //fixed// layout, or a //fluid// layout. A ''fixed'' layout is where the designer specifies exactly how wide the page and all of its elements will be. If the user resizes a browser window, some of the content may disappear behind the scroll bar. A ''fluid'' layout is one that resizes with the browser window. Wide browser windows on wide screens will make wider columns, and the fluid layout will flow the content to fit. Narrow browser windows on small screens will make narrow columns, and the fluid layout will flow the content to fit (usually). Some content (such as fixed-width images) may not be able to adjust to the browser window size, but most of the content on the page adjusts in a fluid manner. There are plenty of designers on both sides of the ''fixed'' and ''fluid'' divide, and both styles serve different purposes. The Fluid 960 Grid System also comes in a fixed flavor, and fixed-width elements can be used in a fluid grid. If Tiddly 960 sparks enough interest, it could easily be adapted to a fixed system.
This ~TiddlyWiki is an example of Tiddly 960.
Other examples will be added soon.
!!!!!But ~TiddlyWiki already has X Y and Z!
Great, use X, Y and Z. I've only been using ~TiddlyWiki for a few weeks, and I don't know all the history or all the gizmos that are available for it. Tiddly 960 is intended as a contribution to the ~TiddlyWiki community.
!!!!!Has Tiddly 960 been thoroughly tested?
Heh, heh. Uh, no. This has just been the result of an enthusiastic few days of tinkering over my winter break. I haven't even given it a spin in multiple browsers. (Update: I did quick checks in current versions of ~FIrefox, Safari, Opera and Camino, all on Mac OS X.) But the underlyiing elements of ~TiddlyWiki and the Fluid 960 Grid System each play well across multiple platforms, so I have expectations that Tiddly 960 will do the same. I'm sure you'll let me know if it doesn't, though I can't promise I'll know how to fix it.
!!!!!Haven't you gone a little box crazy?
Yes, this demonstration is probably overkill. It is doubtful many people would need more than a extra row with a box or two. But this is intended to demonstrate the concept and its flexibility. I'm sure your site will be much more tasteful and restrained. :-)
!!!!!How do I get Tiddly 960?
Visit http://tiddly960.tiddlyspot.com and save a copy of the page to your desktop so that you can tinker with it yourself.
!!!!!Is Tiddly 960 a finished product
No, it's not beta, it's barely even alpha. Right now it's mostly just a proof of concept, maybe almost a work in progress. If you think it has potential as one way to develop more robust ~TiddlyWiki themes and content, please offer your suggestions in the [[TiddlyWiki Google Group|http://groups.google.com/group/TiddlyWiki]]. If you think it is a preposterous idea that undermines the very foundations of western civilization, you can let me know that too.
!!!!!Is Tiddly 960 free?
It's about as free as it gets. Each of its basic components, including ~TiddlyWiki, the Fluid 960 Grid System, and jQuery are all produced under various open source software licenses. Tiddly 960, which is nothing more than a combination of these systems, is also offered under open source licensing. See details at [[Licensing]].
!!!!!Let me know: what's //your// biggest question?
Right now I'm looking for feedback, and would really like to know your biggest questions about Tiddly 960.
*What would you like to see it do, or not do?
*Do you prefer using direct HTML and CSS, or would you prefer a set of codes (maybe macros) you can apply in a tiddler that does it for you?
*Would you like to see the elements be more interactiive (see the demo at [[Fluid 960 Grid System|http://www.designinfluences.com/fluid960gs/]] and click on the headings and other elements at that site)?
Both ~TiddlyWiki and the Fluid 960 Grid System have jQuery built in, so there's plenty of potential, but I'm a javascript novice and would need to rely on the expertise of our ~TiddlyWiki gurus to make that happen. Please let me know your feedback and your biggest questions about Tiddly 960.
{{title{[[Fluid 960 Grid System |Fluid960]]}}} /% Temporary title hack %/
Learn more at: [[Fluid 960 Grid System|http://www.designinfluences.com/fluid960gs/]] and [[960 Grid System|http://960.gs/]].
These tiddlers are tagged with Fluid960Css
''[[Fluid 960 Grid System|Fluid960Footer]], created by [[Stephen Bau|http://www.domain7.com/WhoWeAre/StephenBau.html]], based on the [[960 Grid System|http://960.gs/]] by [[Nathan Smith|http://sonspring.com/journal/960-grid-system]]. Released under the [[GPL|http://www.designinfluences.com/fluid960gs/licenses/GPL_license.txt]] / [[MIT|http://www.designinfluences.com/fluid960gs/licenses/MIT_license.txt]] [[Licenses|http://www.designinfluences.com/fluid960gs/README.txt]]
/*
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* =Containers
--------------------------------------------------------------------------------*/
.container_12,
.container_16
{
width: 92%;
margin-left: 4%;
margin-right: 4%;
}
/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16
{
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
.container_12 .grid_3,
.container_16 .grid_4
{
width: 23%;
}
.container_12 .grid_6,
.container_16 .grid_8
{
width: 48%;
}
.container_12 .grid_9,
.container_16 .grid_12
{
width: 73%;
}
.container_12 .grid_12,
.container_16 .grid_16
{
width: 98%;
}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha
{
margin-left: 0;
}
.omega
{
margin-right: 0;
}
/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .grid_1
{
width: 6.333%;
}
.container_12 .grid_2
{
width: 14.666%;
}
.container_12 .grid_4
{
width: 31.333%;
}
.container_12 .grid_5
{
width: 39.666%;
}
.container_12 .grid_7
{
width: 56.333%;
}
.container_12 .grid_8
{
width: 64.666%;
}
.container_12 .grid_10
{
width: 81.333%;
}
.container_12 .grid_11
{
width: 89.666%;
}
/* =Grid >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .grid_1
{
width: 4.25%;
}
.container_16 .grid_2
{
width: 10.5%;
}
.container_16 .grid_3
{
width: 16.75%;
}
.container_16 .grid_5
{
width: 29.25%;
}
.container_16 .grid_6
{
width: 35.5%;
}
.container_16 .grid_7
{
width: 41.75%;
}
.container_16 .grid_9
{
width: 54.25%;
}
.container_16 .grid_10
{
width: 60.5%;
}
.container_16 .grid_11
{
width: 66.75%;
}
.container_16 .grid_13
{
width: 79.25%;
}
.container_16 .grid_14
{
width: 85.5%;
}
.container_16 .grid_15
{
width: 91.75%;
}
/* =Prefix Extra Space >> Global
--------------------------------------------------------------------------------*/
.container_12 .prefix_3,
.container_16 .prefix_4
{
padding-left: 25%;
}
.container_12 .prefix_6,
.container_16 .prefix_8
{
padding-left: 50%;
}
.container_12 .prefix_9,
.container_16 .prefix_12
{
padding-left: 75%;
}
/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .prefix_1
{
padding-left: 8.333%;
}
.container_12 .prefix_2
{
padding-left: 16.666%;
}
.container_12 .prefix_4
{
padding-left: 33.333%;
}
.container_12 .prefix_5
{
padding-left: 41.666%;
}
.container_12 .prefix_7
{
padding-left: 58.333%;
}
.container_12 .prefix_8
{
padding-left: 66.666%;
}
.container_12 .prefix_10
{
padding-left: 83.333%;
}
.container_12 .prefix_11
{
padding-left: 91.666%;
}
/* =Prefix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .prefix_1
{
padding-left: 6.25%;
}
.container_16 .prefix_2
{
padding-left: 12.5%;
}
.container_16 .prefix_3
{
padding-left: 18.75%;
}
.container_16 .prefix_5
{
padding-left: 31.25%;
}
.container_16 .prefix_6
{
padding-left: 37.5%;
}
.container_16 .prefix_7
{
padding-left: 43.75%;
}
.container_16 .prefix_9
{
padding-left: 56.25%;
}
.container_16 .prefix_10
{
padding-left: 62.5%;
}
.container_16 .prefix_11
{
padding-left: 68.75%;
}
.container_16 .prefix_13
{
padding-left: 81.25%;
}
.container_16 .prefix_14
{
padding-left: 87.5%;
}
.container_16 .prefix_15
{
padding-left: 93.75%;
}
/* =Suffix Extra Space >> Global
--------------------------------------------------------------------------------*/
.container_12 .suffix_3,
.container_16 .suffix_4
{
padding-right: 25%;
}
.container_12 .suffix_6,
.container_16 .suffix_8
{
padding-right: 50%;
}
.container_12 .suffix_9,
.container_16 .suffix_12
{
padding-right: 75%;
}
/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .suffix_1
{
padding-right: 8.333%;
}
.container_12 .suffix_2
{
padding-right: 16.666%;
}
.container_12 .suffix_4
{
padding-right: 33.333%;
}
.container_12 .suffix_5
{
padding-right: 41.666%;
}
.container_12 .suffix_7
{
padding-right: 58.333%;
}
.container_12 .suffix_8
{
padding-right: 66.666%;
}
.container_12 .suffix_10
{
padding-right: 83.333%;
}
.container_12 .suffix_11
{
padding-right: 91.666%;
}
/* =Suffix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .suffix_1
{
padding-right: 6.25%;
}
.container_16 .suffix_2
{
padding-right: 16.5%;
}
.container_16 .suffix_3
{
padding-right: 18.75%;
}
.container_16 .suffix_5
{
padding-right: 31.25%;
}
.container_16 .suffix_6
{
padding-right: 37.5%;
}
.container_16 .suffix_7
{
padding-right: 43.75%;
}
.container_16 .suffix_9
{
padding-right: 56.25%;
}
.container_16 .suffix_10
{
padding-right: 62.5%;
}
.container_16 .suffix_11
{
padding-right: 68.75%;
}
.container_16 .suffix_13
{
padding-right: 81.25%;
}
.container_16 .suffix_14
{
padding-right: 87.5%;
}
.container_16 .suffix_15
{
padding-right: 93.75%;
}
/* =Clear Floated Elements
--------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after
{
clear: both;
content: '.';
display: block;
visibility: hidden;
height: 0;
}
.clearfix
{
display: inline-block;
}
* html .clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}
/*
-----------------------------------------------
Grey Box Method - Layout CSS
----------------------------------------------- */
body {
background: #eee;
border-top: 5px solid #000;
color: #333;
font-size: 11px;
padding: 0 0 40px;
}
/* anchors
----------------------------------------------- */
a {
color: #000;
font-weight:bold;
text-decoration: none;
}
a:hover {
color:#333;
}
/* 960 grid system container background
----------------------------------------------- */
.container_12,
.container_16 {
background:#fff;
}
/* headings
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;}
h2 {margin-top:1em;}
h5 {font-size:1.2em;}
h6 {font-size:1em; text-transform:uppercase;}
h1 a {
font-weight:normal;
}
/* branding
----------------------------------------------- */
h1#branding {
font-weight:normal;
font-size:3em;
text-align:left;
background:#aaa;
padding:.7em 1em;
margin-bottom:0;
}
/* page heading
----------------------------------------------- */
h2#page-heading {
font-weight:normal;
padding:.5em;
margin:0 0 10px 0;
border-bottom:1px solid #ccc;
}
/* boxes
----------------------------------------------- */
.box {
background:#ddd;
margin-bottom:20px;
padding:10px 10px 1px 10px;
}
.box h2 {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#333;
margin:-10px -10px 0 -10px;
padding:6px 12px;
}
.box h2 a,
.box h2 a.visible {
color:#fff;
background:#333 url("../img/switch_minus.gif") 97% 50% no-repeat;
display:block;
padding:6px 12px;
margin:-6px -12px;
border:none;
}
.grid_4 .box h2 a {
background-position: 97% 50%;
}
.grid_5 .box h2 a {
background-position: 98% 50%;
}
.grid_12 .box h2 a {
background-position: 99% 50%;
}
.box h2 a.hidden,
.box h2 a.hidden:hover {
background-image: url("../img/switch_plus.gif");
}
.box h2 a:hover {
background-color:#111;
}
.block {
padding-top:10px;
}
div.menu {
padding:0;
}
div.menu h2 {
margin:0;
}
div.menu .block {
padding-top:0;
}
/* paragraphs, quotes and lists
----------------------------------------------- */
p {
margin-bottom:1em;
}
blockquote {
font-family: Georgia, 'Times New Roman', serif;
font-size:1.2em;
padding-left:1em;
border-left:4px solid #ccc;
}
blockquote cite {
font-size:.9em;
}
ul, ol {
padding-top:0;
}
/* menus
----------------------------------------------- */
ul.menu {
list-style:none;
border-top:1px solid #bbb;
}
ul.menu li {
margin:0;
}
ul.menu li a {
display:block;
padding:4px 10px;
border-bottom:1px solid #ccc;
}
ul.menu li a:hover {
background:#eee;
}
ul.menu li a:active {
background:#ccc;
}
/* submenus
----------------------------------------------- */
ul.menu ul {
list-style:none;
margin:0;
}
ul.menu ul li a {
padding-left:30px;
}
/* section menus
----------------------------------------------- */
ul.section {
border-top:0;
margin-bottom:0;
}
ul.section li {
text-transform:uppercase;
}
ul.section li a {
background:#bbb;
}
ul.section li a:hover {
background:#aaa;
}
ul.section li a:active {
color:#fff;
background:#666;
}
ul.section li li a {
background:#ddd;
border-bottom:1px solid #eee;
}
ul.section li li a:hover {
background:#ccc;
}
ul.section li li a:active {
color:#000;
background:#fff;
}
ul.section ul li {
text-transform:none;
}
ul.section ul.current li a {
background:#eee;
border-bottom:1px solid #fff;
}
ul.section ul.current li a:hover {
background:#ddd;
}
ul.section ul.current li a:active {
background:#fff;
}
ul.section li a.current {
color:#fff;
background:#666;
}
ul.section li a.current:hover {
background:#555;
}
ul.section li a.current:active {
background:#444;
}
ul.section li a.active {
background:#fff;
cursor:default;
}
ul.section li.current > a.active,
ul.section li.current > a.active:hover {
color:#fff;
background:#666;
cursor:default;
}
/* table
----------------------------------------------- */
table {
width:100%;
border:1px solid #bbb;
margin-bottom:10px;
}
col.colC {
width:8em;
}
th, td {
padding:.2em 1em;
text-align:left;
}
thead th {
border-bottom:2px solid #888;
background:#bbb;
padding:.4em 1em .2em;
}
thead th.table-head {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#555;
border:1px solid #555;
}
tbody th,
tbody td {
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
background:#eee;
}
tbody tr.odd th,
tbody tr.odd td {
background:#fff;
}
tfoot th,
tfoot td {
border-top:2px solid #666;
background:#eee;
}
tfoot tr.total th,
tfoot tr.total td {
border-top:6px double #666;
}
tfoot tr.total th {
text-transform:uppercase;
}
th.currency,
td.currency {
text-align:right;
}
/* forms
----------------------------------------------- */
form {
overflow:hidden;
}
fieldset {
border:1px solid #bbb;
padding:10px;
position:relative;
background:#e9e9e9;
margin-bottom:10px;
}
legend {
font-size:1.1em;
padding:.4em .8em;
background:#fff;
border:1px solid #bbb;
}
fieldset.login p {
margin-bottom:1em;
margin-top:0pt;
}
fieldset p label {
width:98%;
}
fieldset p input {
width:98%;
}
fieldset p select {
width:99%;
}
fieldset.login p label {
float:left;
line-height:2em;
margin-right:3%;
text-align:right;
width:32%;
}
fieldset.login p input {
width:60%;
}
fieldset.login input.button {
margin-left:35%;
}
form p.notice {
font-weight:bold;
}
input.search.text {
width:66%;
}
input.search.button {
width:28%;
margin-left:2%;
}
/* articles
----------------------------------------------- */
.articles {
padding:0;
}
.articles h2 {
margin:0;
}
#articles {
padding-top:0;
}
.article {
border-top:1px solid #666;
padding-top:.5em;
}
.box .article {
border-top:3px solid #fff;
padding:13px 10px 0 10px;
}
.article h2 {
font-size:2em;
font-weight:normal;
text-transform:none;
color:#333;
background:transparent;
padding:0;
margin:0;
border:none;
}
.article h3 {
margin-bottom:.2em;
font-size:1.6em;
}
.box .first {
border-top:none;
}
.article h4 {
font-size:1.2em;
text-transform:uppercase;
margin-bottom:.5em;
}
.article a.image {
float:left;
margin:3px 10px 3px 0;
padding:4px;
border:1px solid #bbb;
background:#fff;
}
.article a.image:hover {
border:1px solid #666;
}
.article a.image img {
float:left;
}
.article p.meta {
color:#666;
border-top:1px dotted #999;
border-bottom:1px dotted #999;
padding:.3em 0;
margin-bottom:.8em;
}
/* site information
----------------------------------------------- */
#site_info .box {
color:#ccc;
background:#666;
margin-bottom:10px;
}
#site_info a {
color:#fff;
}
#site_info a:hover {
color:#000;
}
/* AJAX sliding shelf
----------------------------------------------- */
#loading {float:right; margin-right:14px; margin-top:-2px;}
.block {padding-bottom:1px;}
/* Accordian
----------------------------------------------- */
.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size:1.1em;
font-weight: normal;
}
.element h4 {
margin: 0;
padding:4px;
line-height:1.2em;
}
.element p {
margin: 0;
padding: 4px;
}
.float-right {
padding:10px 20px;
float:right;
}
#accordian-block {
padding-bottom:10px;
}
/* Mootools Kwicks
----------------------------------------------- */
#kwick-box {
padding:0;
overflow:hidden;
}
#kwick-box h2 {
margin:0;
}
#kwick {
position: relative;
}
#kwick .kwicks {
display: block;
background: #999;
height: 120px;
list-style:none;
margin:0;
overflow:hidden;
}
#kwick li {
float: left;
margin:0;
padding:0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 100px;
width: 215px;
padding: 10px;
background: #fff;
}
#kwick .kwick span {
color:#fff;
}
#kwick .one {
background: #666;
}
#kwick .two {
background: #777;
}
#kwick .three {
background: #888;
}
#kwick .four {
background: #999;
}
/*
-----------------------------------------------
Navigation
----------------------------------------------- */
/* navigation (horizontal subnavigation)
----------------------------------------------- */
ul.nav,
ul.nav * { margin:0;padding:0;}
ul.nav {
position:relative;
background:#666;
max-width:100%;
height:2.5em;
}
ul.nav li {
cursor:pointer;
float:left;
text-align:center;
list-style-type:none;
font-weight:normal;
}
ul.nav li ul {
cursor:default;
width:100%;
max-width:100%;
position:absolute;
height:auto;
top:2.5em;
background-position:0 0 !important;
left:-9000px;
}
ul.nav li ul li {
padding:0;
border:none;
width:auto;
max-width:none;
}
ul.nav li a {
color:#fff;
background:#666;
font-weight:bold;
text-decoration:none;
display:block;
float:left;
padding:0 1em;
height:2.4em;
line-height:2.5em;
}
ul.nav li ul li a {
position:relative !important; /* ie Mac */
cursor:pointer !important;
white-space:nowrap;
line-height:2em;
height:2em;
font-weight:normal;
color:#666;
background-position:0 50% !important;
}
ul.nav li:hover a,
ul.nav li a:hover,
ul.nav li a:focus {color:#000; background:#ccc;}
ul.nav li a:active {color:#666; background:#fff;}
ul.nav li:hover ul {left:0;z-index:10}
ul.nav li ul,
ul.nav li {background:#ccc !important}
ul.nav li:hover ul li a {color:#444;}
ul.nav li:hover ul li a:hover {color:#000; background:#fff;}
ul.nav li:hover ul li a:active {color:#666; background:#fff;}
ul.nav li.current a {color:#666; background:#fff; cursor:default; font-weight:bold;}
ul.nav li.current ul {left:0;z-index:5}
ul.nav li.current ul,
ul.nav li.current {background:#ccc !important}
ul.nav li.current ul li a {color:#444; background:#ccc; font-weight:normal;}
ul.nav li.current ul li a:hover {color:#000; background:#fff;}
ul.nav li ul li.current a,
ul.nav li ul li.current a:hover,
ul.nav li.current:hover ul li a:active {color:#666; background:#fff;}
/* navigation (vertical subnavigation)
----------------------------------------------- */
ul.nav {
background:#666;
}
ul.main li {
position:relative;
top:0;
left:0;
}
ul.main li ul {
border-top:0;
}
ul.main li ul li {
float:left;
}
ul.main li a {
height:2.5em;
line-height:2.5em;
border:0;
color:#fff;
background:#666;
}
ul.main li ul li a {
width:12em;
line-height:2em;
height:2em;
text-align:left;
color:#fff;
border-top:1px solid #444;
background:#444;
}
ul.main li a:focus {color:#fff; background:#666;}
ul.main li ul li a:hover {
color:#fff;
background:#555;
}
ul.main li:hover a {
color:#fff;
background:#555;
}
ul.main li:hover ul li a {color:#fff;}
ul.main li:hover ul li a:hover {color:#fff; background:#444;}
ul.main li:hover a:active {background:#444;}
ul.main li:hover ul li a:active {color:#fff; background:#222;}
/* secondary list
----------------------------------------------- */
ul.nav li.secondary {
float:right;
color:#cde;
background:transparent !important;
}
ul.nav li.secondary span.status {
float:left;
padding:0 1em;
line-height:2.77em;
height:2.77em;
font-size:0.9em;
}
ul.nav li.secondary span.status a {
float:none;
display:inline;
padding:0;
height:auto;
line-height:auto;
color:#cde;
background:transparent;
}
ul.nav li.secondary span.status a:hover {
color:#fff;
background:transparent;
}
ul.nav li.secondary span.status span {
text-transform:capitalize;
}
ul.nav li.secondary:hover a {
color:#fff;
background:#666;
}
ul.nav li.secondary:hover a:hover {
background:#555;
}
ul.nav li.secondary:hover a:active {background:#444;}
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
960 Grid System ~ Text CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* =Basic HTML
--------------------------------------------------------------------------------*/
body
{
font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
}
a:focus
{
outline: 1px dotted invert;
}
hr
{
border-color: #ccc;
border-style: solid;
border-width: 1px 0 0;
clear: both;
height: 0;
}
/* =Headings
--------------------------------------------------------------------------------*/
h1
{
font-size: 25px;
}
h2
{
font-size: 23px;
}
h3
{
font-size: 21px;
}
h4
{
font-size: 19px;
}
h5
{
font-size: 17px;
}
h6
{
font-size: 15px;
}
/* =Spacing
--------------------------------------------------------------------------------*/
ol
{
list-style: decimal;
}
ul
{
list-style: square;
}
li
{
margin-left: 30px;
}
p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset
{
margin-bottom: 20px;
}
''Tiddly 960'' has the Fluid 960 Grid System built into it, so any block element on the page can be aligned with a simple fluid 12-column grid.
#Create a tiddler just the way you always do.
#Add some very simple markup to your ~PageTemplate to put that tiddler anywhere on the page.
#There is no step 3.
Here's what the markup looks like:
{{{
[[NewRow]]
[[NewCol4]]
[[NewBox]]
"tiddler WhatIsTiddly960"
[[EndBox]]
}}}
That says to:
#Create a new horizonal row
#Create a new vertical column in that row that is four ''grid units'' wide
#Create a new box in that column
#Display the tiddler ~WhatIsTiddly960 in the box
#You're done
You can continue adding as many rows, columns, and boxes as you want using a simple syntax. Tiddly 960 handles the HTML and the CSS for you. If you know how to use ~TiddlyWiki markup, you know how to use Tiddly 960.
You take that simple markup and enter it into your ~PageTemplate wherever you would like the row to appear -- usually above or below your ~TiddlyWiki. Save your ~PageTemplate, refresh your page, and you should see your tiddler displayed in a box. Oh, yes, be sure to make backups before you add markup to your ~PageTemplate! Tiddly 960 has not been fully tested and you may have a few unpleasant surprises along the way.
[[Click here to see the full Tiddly 960 markup ...|Tiddly 960 Markup]]
{{title{[[How do I ...|HowDoI]]}}} /% Temporary title hack %/
This ~TiddlyWiki has many answers for your questions in the regular ~TiddlyWiki contents. Please read the [[FAQ|Tiddly 960 Frequently Asked Questions]]. Also see: [[How it works]]
Have you ever wanted to add a footer to your ~TiddlyWiki? Or move the ~MainMenu to the right column to give your tiddlers more room on the page? Or easily edit the format of the page header? Or just make a tiddler appear in a box somewhere on the page other where tiddlers always appear? I have, but the coding was just a bit too hard for me to do it.
I really love ''~TiddlyWiki's'' easy ability to quickly create, store, and find text and other information in a single-page application file, but I'm one of those people who likes to customize where things go on screen. As a working designer, I know some of the shortcuts the pros use to quickly create web page layouts. One of those shortcuts is the ''Fluid 960 Grid System'' that allows you to very quickly define the layout of a page in columns and rows. So I spent a few days on my winter break to see what might be possible by combining ~TiddlyWiki and the Fluid 960 Grid System. What you see here is the result.
Welcome to ''Tiddly 960'', a fluid grid layout system for ~TiddlyWiki.
The goal was to keep ~TiddlyWiki functionally the same as much as possible, but allow the display of //''tiddlers anywhere''//. How does it work?
#Create a tiddler just the way you always do.
#Add some very simple markup to your ~PageTemplate to put that tiddler anywhere on the page.
#There is no step 3.
//[[Click here to continue reading ...|Welcome to Tiddly 960]]//
//or learn more about [[How it works]]
!!!!!~TiddlyWiki
''~TiddlyWiki'' was designed by Jeremy Ruston and others in the ~TiddlyWiki community. ~TiddlyWiki is copyright by [[Unamesa|http://www.unamesa.org/]], and offered under a BSD license. Learn more at [[TiddlyWiki.com|http://www.tiddlywiki.com/]] or the [[TiddlyWiki Google Group|http://groups.google.com/group/TiddlyWiki]].
!!!!!Fluid 960 Grid System
The ''Fluid 960 Grid System'' was created by ''Stephen Bau'', based on the ''960 Grid System'' by ''Nathan Smith''. Released under the GPL / MIT Licenses. Learn more at: [[Fluid 960 Grid System|http://www.designinfluences.com/fluid960gs/]] and [[960 Grid System|http://960.gs/]].
!!!!!jQuery
Both ''~TiddlyWiki'' and the ''Fluid 960 Grid System'' use the ''jQuery'' Javascript library, which is licensed under both the MIT and GPL licenses. Learn more at http://jquery.com/.
!!!!!Tiddly 960
''Tiddly 960'' is the contribution of [[David Lester]], and is released under the GPL / MIT licenses, as well as the applicable licenses for the components listed above. Learn more at: [[Tiddly 960|http://tiddly960.tiddlyspot.com/]].
/***
|''Name:''|LoadRemoteFileThroughProxy (previous LoadRemoteFileHijack)|
|''Description:''|When the TiddlyWiki file is located on the web (view over http) the content of [[SiteProxy]] tiddler is added in front of the file url. If [[SiteProxy]] does not exist "/proxy/" is added. |
|''Version:''|1.1.0|
|''Date:''|mar 17, 2007|
|''Source:''|http://tiddlywiki.bidix.info/#LoadRemoteFileHijack|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.2.0|
***/
//{{{
version.extensions.LoadRemoteFileThroughProxy = {
major: 1, minor: 1, revision: 0,
date: new Date("mar 17, 2007"),
source: "http://tiddlywiki.bidix.info/#LoadRemoteFileThroughProxy"};
if (!window.bidix) window.bidix = {}; // bidix namespace
if (!bidix.core) bidix.core = {};
bidix.core.loadRemoteFile = loadRemoteFile;
loadRemoteFile = function(url,callback,params)
{
if ((document.location.toString().substr(0,4) == "http") && (url.substr(0,4) == "http")){
url = store.getTiddlerText("SiteProxy", "/proxy/") + url;
}
return bidix.core.loadRemoteFile(url,callback,params);
}
//}}}
[[GettingStarted]]
[[About Tiddly 960|Introducing Tiddly 960]]
[[How it works]]
[[Conceptual Model|Tiddly960conceptualModel]]
[[Examples]]
[[Documentation|Documentation: Tiddly 960 Markup]]
[[FAQ|Tiddly 960 Frequently Asked Questions]]
[[Contact|David Lester]]
[[Daily journal|journal]]
[[Tiddly 960 To Do]]
<<tiddler [[Tiddly 960 Version]]>>
''{{center{Do you need an announcement box?}}}''
!!!!Boxes
{{{
[[NewBox]]
[[NextBox]]
[[EndBox]]
}}}
*Always add at least one ~NewBox to each column
*Use ~NextBox only if you want another box to follow in the same column
*Use ~EndBox to end the last box in every column
See also:
*[[Rows|Markup: Rows]]
*[[Columns|Markup: Columns]]
*Boxes (here)
*[[Tiddlers|Markup: Tiddlers]]
*[[Example|Markup: Example]]
!!!!Columns
{{{
[[NewCol1]]
[[NewCol2]]
[[NewCol3]]
[[NewCol4]]
[[NewCol5]]
[[NewCol6]]
[[NewCol7]]
[[NewCol8]]
[[NewCol9]]
[[NewCol10]]
[[NewCol11]]
[[NewCol12]]
}}}
*Always add at least one column to each row
*The number says how wide this column should be in ''grid units''
*The grid is based on 12 grid units
*You can use any combination of columns that add up to 12 for one row
*Example: three columns, each four grid units wide = 4 + 4 + 4 = 12
**6 + 6 = 12
**3 + 3 + 3 + 3 = 12
**2 + 5 + 7 = 12
*Or you may want the row to have just one column a full 12 units wide
*There is no ~NextCol or ~EndCol. Just start another ~NewCol_
See also:
*[[Rows|Markup: Rows]]
*Columns (here)
*[[Boxes|Markup: Boxes]]
*[[Tiddlers|Markup: Tiddlers]]
*[[Example|Markup: Example]]
!!!!Example
{{{
[[NewRow]]
[[NewCol6]]
[[NewBox]]
"tiddler SomeName"
[[NextBox]]
"tiddler AnotherName"
[[EndBox]]
[[NewCol6]]
[[NewBox]]
"tiddler AnyName"
[[EndBox]]
[[NewRow]]
[[NewCol12]]
[[NewBox]]
"tiddler BigBox" style="font-size:18px;"
[[EndBox]]
}}}
*Every row must begin with ~NewRow
*Every column must begin with ~NewCol_
*The first box in the row must begin with ~NewBox
*Use ~NextBox to add another box in the same column
*Use ~EndBox to end the last box in every column
*You may not use ~TiddlyWiki markup next to Tiddly 960 markup, but ...
*You may use ~TiddlyWiki markup within the tiddler you are displaying in your box
*You may have as many rows as you want
*You may have from one to twelve columns in each row
*You may have as many boxes in a column as you want
*Your columns should add up to 12 on each row
*Note that ~NewCol1 is one-twelfth of a row (very narrow)
*Note that ~NewCol12 is the full width of a row (very wide)
*Columns will vary in height by the amount of content in each column
*[[Rows|Markup: Rows]]
*[[Columns|Markup: Columns]]
*[[Boxes|Markup: Boxes]]
*[[Tiddlers|Markup: Tiddlers]]
*Example (here)
!!!!Extending Tiddly 960
{{{
[[NewBanner]]
[[EndBanner]]
}}}
*Use instead of ~NewBox to create a single line banner (see examples on this page)
~NewBanner is an example of how you can extend Tiddly 960 if you are crafty with a little HTML and CSS. You can create your own Tiddly 960 markup by creating a tiddler and entering the necessary HTML and CSS code. You might want to extend Tiddly 960 with a ~HighlightedBox that has a different color background, for example. Below is an example with a highlighted blue border, like the one near the top of this page.
{{{
[[NewBoxBorder]]
}}}
!!!!Floats
Tiddly 960 uses CSS floats for layout. This should behave well in most modern browsers, but sometimes it can be a bit tricky. Use ''NextBox'' if you want the next box to move ''down'' in the //same column vertically//. Use ''NewCol_'' to start a new column to the ''right'' of the current column, then follow it with a ''NewBox''
Always make sure your columns add up to 12, but you can have as few as one to as many as twelve columns in one row. The columns can be the same widths, or different widths. You can have a different number of columns in each row (that is one reason why you would make another NewRow).
To keep the markup simple, you must enter your markup in the sequence it appears on the page. There is currently no "push" or "pull" or absolute positioning. The rows, columns, and boxes will display in the order you enter them (unless the floats get wacky).
!!!!~PageTemplate
Enter or paste your Tiddly 960 markup (like the example above) in PageTemplate in the place you want it to appear. You will need tiddlers for the markup to display. Be sure to backup your file before tinkering in ~PageTemplate!
!!!!Rows
{{{
[[NewRow]]
}}}
*Always begin every new row with the ~NewRow markup
*There is no ~NextRow or ~EndRow. Just start a ~NewRow wherever you choose.
See also:
*Rows (here)
*[[Columns|Markup: Columns]]
*[[Boxes|Markup: Boxes]]
*[[Tiddlers|Markup: Tiddlers]]
*[[Example|Markup: Example]]
!!!!Tiddlers
{{{
"tiddler SomeName"
"tiddler SomeName" style="font-size:14px;"
"tiddler SomeName" id="uniquename"
}}}
*You must use //double// quote marks as shown
*Do not use two //single// quote marks because ~TiddlyWiki thinks that means ''bold''
*You can add inline CSS styling after the tiddler name if you wish as shown
*Or you can add a CSS id after the tiddler name and style it in StyleSheet
*Remember you can use ~TiddlyWiki markup inside your tiddler (that may be better)
*The inline CSS styling will only affect the text displayed in your box, not the box itself
Inside your tiddler you can put the following command on the first line and it will display a headline with a link back to the tiddler when it displays in your box. Clicking on that headline opens your tiddler as usual ~TiddlyWiki.
{{{
{{title{[[This is my headline|ThisIsSomeTiddler]]}}}
}}}
See also:
*[[Rows|Markup: Rows]]
*[[Columns|Markup: Columns]]
*[[Boxes|Markup: Boxes]]
*Tiddlers (here)
*[[Example|Markup: Example]]
<html><object width="346" height="265"><param name="movie" value="http://www.youtube.com/v/NpLgQUkq6sg&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/NpLgQUkq6sg&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="346" height="265"></embed></object></html>
{{title{[[Need media?|NeedMedia]]}}} /% Temporary title hack %/
Embed a ~YouTube video or Flickr image just as you would anywhere on the web.
{{title{[[Need more boxes?|NeedMoreBoxes]]}}} /% Temporary title hack %/
Yes, anywhere above or below your main tiddler content you can add additional rows, columns, and boxes.
{{title{[[Need a footer? It's just another row, and you don't need a column or a box!|NeedaFooter]]}}} /% Temporary title hack %/
<h2 id="page-heading" macro=
<div class="box">
<div class="block" macro=
<div class="box" style="border:2px solid blue;">
<div class="block" macro=
These tiddlers are tagged with NewCol.
<div style="clear:both;"></div>
<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>
<!--{{{-->
<!-- Just a prototype here ... could be LOTS cleaner -->
[[RowHeader]]
[[RowAbove]]
<! -- this is where your TW begins -- it's a row with columns , just like everything else -->
[[NewRow]]
[[TwStartsHere]]
[[NewRow]]
[[NewCol2]]
[[NewBox]]
"tiddler MainMenuAnnounce"
[[NextBox]]
<div id='mainMenu'>
<div id='submainMenu' refresh='content' tiddler='MainMenu'></div>
</div>
</div>
[[NewCol7]]
<div id='displayArea'>
<div id='tiddlerDisplay'></div>
</div>
</div>
[[NewCol3]]
[[NewBox]]
"tiddler SidebarAnnounce"
[[NextBox]]
[[NewBox]]
"tiddler SidebarAnnounce2"
[[NextBox]]
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
</div>
<div style="clear:both;"></div>
<div id='messageArea'></div>
[[TwEndsHere]]
<!-- end maincontentwrap -->
<! -- your TW ends here -->
<!-- you can have any number of rows above or below your TW -->
[[RowBelow]]
[[RowFluidGrid]]
[[RowMedia]]
[[RowFooter]]
</div>
<!--}}}-->
/***
|''Name:''|PasswordOptionPlugin|
|''Description:''|Extends TiddlyWiki options with non encrypted password option.|
|''Version:''|1.0.2|
|''Date:''|Apr 19, 2007|
|''Source:''|http://tiddlywiki.bidix.info/#PasswordOptionPlugin|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.2.0 (Beta 5)|
***/
//{{{
version.extensions.PasswordOptionPlugin = {
major: 1, minor: 0, revision: 2,
date: new Date("Apr 19, 2007"),
source: 'http://tiddlywiki.bidix.info/#PasswordOptionPlugin',
author: 'BidiX (BidiX (at) bidix (dot) info',
license: '[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D]]',
coreVersion: '2.2.0 (Beta 5)'
};
config.macros.option.passwordCheckboxLabel = "Save this password on this computer";
config.macros.option.passwordInputType = "password"; // password | text
setStylesheet(".pasOptionInput {width: 11em;}\n","passwordInputTypeStyle");
merge(config.macros.option.types, {
'pas': {
elementType: "input",
valueField: "value",
eventName: "onkeyup",
className: "pasOptionInput",
typeValue: config.macros.option.passwordInputType,
create: function(place,type,opt,className,desc) {
// password field
config.macros.option.genericCreate(place,'pas',opt,className,desc);
// checkbox linked with this password "save this password on this computer"
config.macros.option.genericCreate(place,'chk','chk'+opt,className,desc);
// text savePasswordCheckboxLabel
place.appendChild(document.createTextNode(config.macros.option.passwordCheckboxLabel));
},
onChange: config.macros.option.genericOnChange
}
});
merge(config.optionHandlers['chk'], {
get: function(name) {
// is there an option linked with this chk ?
var opt = name.substr(3);
if (config.options[opt])
saveOptionCookie(opt);
return config.options[name] ? "true" : "false";
}
});
merge(config.optionHandlers, {
'pas': {
get: function(name) {
if (config.options["chk"+name]) {
return encodeCookie(config.options[name].toString());
} else {
return "";
}
},
set: function(name,value) {config.options[name] = decodeCookie(value);}
}
});
// need to reload options to load passwordOptions
loadOptionsCookie();
/*
if (!config.options['pasPassword'])
config.options['pasPassword'] = '';
merge(config.optionsDesc,{
pasPassword: "Test password"
});
*/
//}}}
//{{center{Put them above or below your main TW}}}//
These are the tiddlers for each row in this example.
<!-- Previous: RowHeader -->
[[NewRow]]
[[NewCol12]]
[[NewBanner]]
"tiddler BannerAbove"
[[EndBanner]]
[[NewRow]]
[[NewCol12]]
[[NewBoxBorder]]
"tiddler WhatIsTiddly960"
[[EndBox]]
[[NewRow]]
[[NewCol4]]
[[NewBox]]
"tiddler DisplayTiddlersAnywhere"
[[EndBox]]
[[NewCol4]]
[[NewBox]]
"tiddler PutThemAbove"
[[EndBox]]
[[NewCol4]]
[[NewBox]]
"tiddler ScrollBelow"
[[EndBox]]
<!-- Next: main tiddlywiki and RowBelow -->
<!-- Previous: main tiddlywiki and RowAbove -->
[[NewRow]]
[[NewCol4]]
[[NewBox]]
"tiddler WhatIsFluid960"
[[EndBox]]
[[NewCol4]]
[[NewBox]]
"tiddler WhatIsTiddlyWiki"
[[EndBox]]
[[NewCol4]]
[[NewBox]]
"tiddler TiddlyWiki"
[[EndBox]]
[[NewCol4]]
[[NewBox]]
"tiddler Fluid960"
[[EndBox]]
[[NewCol4]]
[[NewBox]]
"tiddler Tiddly960"
[[EndBox]]
<!-- Next: RowFluidGrid -->
<!-- Previous: RowBelow -->
[[NewRow]]
[[NewCol12]]
[[NewBanner]]
"tiddler BannerBelow" style="border-top:1px solid #ccc;"
[[EndBanner]]
[[NewRow]]
[[NewCol12]]
[[NewBox]]
"tiddler 12ColumnGrid"
[[EndBox]]
[[Box12ColumnExample]]
[[NewRow]]
[[NewCol6]]
[[NewBox]]
"tiddler Anywhere"
[[EndBox]]
[[NewCol6]]
[[NewBox]]
"tiddler Tiddlers"
[[EndBox]]
<!-- Next: RowMedia -->
<!-- Previous: RowMedia -->
[[NewRow]]
[[NewCol12]]
[[NewBox]]
"tiddler NeedaFooter" id="xyz"
[[EndBox]]
[[NewCol12]]
[[NewBox]]
"tiddler Fluid960Footer"
[[EndBox]]
[[NewCol12]]
[[NewBox]]
"tiddler Tiddly960Footer"
[[EndBox]]
<!-- The End -->
<!-- you can use
OriginalTWheader or AlternateHeader
in the double brackets as shown below
or create your own tiddler and put it here -->
[[AlternateHeader]]
<!-- Next: RowAbove -->
<!-- Previous: RowFluidGrid -->
[[NewRow]]
[[NewCol3]]
[[NewBox]]
"tiddler NeedMoreBoxes"
[[NextBox]]
<!-- skip NewCol3 here to keep next box in same column -->
[[NewBox]]
"tiddler NeedMedia"
[[EndBox]]
[[NewCol5]]
[[NewBox]]
"tiddler MediaContent"
[[EndBox]]
[[NewCol4]]
[[NewBox]]
"tiddler CssTheming"
[[NextBox]]
<!-- skip NewCol3 here to keep next box in same column -->
[[NewBox]]
"tiddler HowDoI"
[[EndBox]]
<!-- Next: RowFooter -->
<!-- not used ... yet! -->
<div class="grid_12">
<ul class="nav main">
<li>
<a href="../../../12/">Fluid 12-column</a>
<ul>
<li>
<a href="../../../12/fluid/mootools/">MooTools</a>
</li>
<li>
<a href="../../../12/fluid/jquery/">jQuery</a>
</li>
<li>
<a href="../../../12/fluid/none/">No Javascript</a>
</li>
</ul>
</li>
<li>
<a href="../../../16/">Fluid 16-column</a>
<ul>
<li>
<a href="../../../16/fluid/mootools/">MooTools</a>
</li>
<li>
<a href="../../../16/fluid/jquery/">jQuery</a>
</li>
<li>
<a href="../../../16/fluid/none/">No Javascript</a>
</li>
</ul>
</li>
<li>
<a href="../../../12/fixed/">Fixed 12-column</a>
<ul>
<li>
<a href="../../../12/fixed/mootools/">MooTools</a>
</li>
<li>
<a href="../../../12/fixed/jquery/">jQuery</a>
</li>
<li>
<a href="../../../12/fixed/none/">No Javascript</a>
</li>
</ul>
</li>
<li>
<a href="../../../16/fixed/">Fixed 16-column</a>
<ul>
<li>
<a href="../../../16/fixed/mootools/">MooTools</a>
</li>
<li>
<a href="../../../16/fixed/jquery/">jQuery</a>
</li>
<li>
<a href="../../../16/fixed/none/">No Javascript</a>
</li>
</ul>
</li>
<li>
<a href="http://overture21.com/forum/comments.php?DiscussionID=231">Download / Forum</a>
<ul>
<li>
<a href="http://github.com/bauhouse/fluid960gs/tree/">Download: Github</a>
</li>
<li>
<a href="http://github.com/bauhouse/sym-fluid960gs/tree/">Symphony Ensemble</a>
</li>
<li>
<a href="http://overture21.com/forum/comments.php?DiscussionID=231">Forum Discussion</a>
</li>
</ul>
</li>
<li class="secondary">
<a href="http://960.gs/" title="960.gs | A CSS grid system developed by Nathan Smith">The 960 Grid System</a>
</li>
</ul>
</div>
<div class="clear"></div>
Type the text for 'SampleContent'
{{center{@@Scroll below this TW to find out more@@}}}
''{{center{Maybe an ad might look nice here?}}}''
''{{center{Or maybe you need two?}}}''
tiddlers anywhere on a fluid page
These tiddlers are displayed at startup. You can change the default tiddlers to suit your needs in DefaultTiddlers
/*{{{*/
/* =============================
/
/ fluid 960 styles !important;
/
/ ============================== */
[[FluidReset.css]]
[[FluidText.css]]
[[FluidGrid.css]]
[[FluidLayout.css]]
[[FluidNav.css]]
/* =============================
/
/ Primary TW resets -- these unlock the main elements of TW so they can be relocated where you want them on the grid
/
/ ============================== */
#maincontentwrap
/* this div is a wrapper around the row that contains all of the normal TW elements */
{ position:static; width:100%; overflow:auto; margin:0; padding:0;}
#mainMenu, #submainMenu, #sidebar, #sidebarOptions, #sidebarTabs, #displayArea, #tiddlerDisplay { position: relative; border:1px solid #ddd;}
#mainMenu { background: none; margin:0; padding:0;}
#submainMenu { background: none; margin:0; padding:0;}
#displayArea { margin:0;padding:0; background: none;}
#tiddlerDisplay { background: none; margin:0; padding: 0;}
#sidebar { float:right; background: none; margin:0; padding: 0;}
#sidebarOptions { background: none; margin:0; padding: 0;}
#sidebarTabs { background: none; margin:0; padding: 0;}
#footer { background: none; margin:0; padding: 0; }
.block {padding-top:0px; padding-bottom:10px;}
/* Want to see the grid?
WARNING: This will "break" the grid. :-( This is because even one pixel more than 960 will cause the floats to get out of alignment. But yes, you can still add borders where you want them. I'll explain later.
To see the grid add an asterisk and a slash at the end of this line.
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {border: 1px solid red;}
*/
/* sorry, just something I needed once ... */
.center
{ display:block;text-align:center; }
/*}}}*/
This demonstrates the Tiddly 960 conceptual model of rows, columns, and boxes.
<html>
<style>
.T960container {
border: 1px solid gray;
background: #ccc;
font-weight: normal;
padding: 12px;
width:auto;
overflow:auto;
}
.T960row {
border: 1px solid red;
background: #fbb;
padding: 12px;
margin-bottom:6px;
position:relative;
width:auto;
overflow:auto;
}
.T960column {
border: 1px solid green;
background: #9c9;
padding: 6px;
margin-bottom:6px;
margin-right:6px;
float:left;
position:relative;
overflow:auto;
}
.T960box {
border: 1px solid blue;
background: #99c;
padding: 6px;
margin-bottom:6px;
position:relative;
width:auto;
overflow:auto;
}
.TW960row {
border: 6px solid blue;
background: #99f;
padding: 12px;
margin-bottom:6px;
position:relative;
width:auto;
overflow:auto;
}
.TW960column {
border: 1px solid blue;
background: #bbf;
padding: 6px;
margin-bottom:6px;
margin-right:6px;
float:left;
position:relative;
overflow:auto;
}
.TW960box {
border: 1px solid blue;
background: #ddf;
padding: 6px;
margin-bottom:6px;
position:relative;
width:auto;
overflow:hidden;
}
.T960label {
background-color:#ffc;
border:1px solid yellow;
margin:6px;
margin-bottom:9px;
display:block;
width:auto;
}
.T960grid {
background-color:#ffc;
border:1px solid yellow;
margin:5px;
margin-bottom:9px;
display:inline-block;
width: 5%;
}
</style>
<div class="T960container"><span class='T960label'>container (960 px wide) with underlying 12 column grid</span>
<span class="T960grid">1</span>
<span class="T960grid">2</span>
<span class="T960grid">3</span>
<span class="T960grid">4</span>
<span class="T960grid">5</span>
<span class="T960grid">6</span>
<span class="T960grid">7</span>
<span class="T960grid">8</span>
<span class="T960grid">9</span>
<span class="T960grid">10</span>
<span class="T960grid">11</span>
<span class="T960grid">12</span>
<div class="T960row"><span class='T960label'>row 1</span>
<div class="T960column" style="width:27%"><span class='T960label'>column 1</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
<div class="T960box"><span class='T960label'>box 2</span>
tiddler content
</div>
</div>
<div class="T960column" style="width:27%"><span class='T960label'>column 2</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
</div>
<div class="T960column" style="width:27%"><span class='T960label'>column 3</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
</div>
</div>
<div style='clear:both;'></div>
</html>
//Learn more about the [[Tiddly 960 Conceptual Model|Tiddly960conceptualModel]]//
{{title{[[Where did all my regular tiddlers go?|Tiddlers]]}}} /% Temporary title hack %/
Rows, columns, and boxes are fine for static elements, but you also want ~TiddlyWiki to be interactive. Click on any headline and you'll see ~TiddlyWiki is still here for you. It is in its own row, and you can even re-arrange ~TiddlyWiki's own columns and boxes (like ~MainMenu) using the grid system too.
*[[FAQ: Is Tiddly 960 a finished product?]]
*[[FAQ: Has Tiddly 960 been thoroughly tested?]]
*[[FAQ: But TiddlyWiki already has X Y and Z!]]
*[[FAQ: Haven't you gone a little box crazy?]]
*[[FAQ: Is Tiddly 960 free?]]
*[[FAQ: How do I get Tiddly 960?]]
*[[FAQ: What's your biggest question?]]
!!!!Tiddly 960 Markup
Tiddly 960 uses a very simple set of ~TiddlyLinks for its markup.
*[[Rows|Markup: Rows]]
*[[Columns|Markup: Columns]]
*[[Boxes|Markup: Boxes]]
*[[Tiddlers|Markup: Tiddlers]]
*[[Example|Markup: Example]]
<<tiddler [[Documentation: See Also]]>>
TO DO
*move alert box within 960 grid
BUGS
*Printing in Firefox stops after two pages -- need to set up print style sheets
DONE
*Backstage button shows only partially. Hide it or give it a background.
*CSS technique -- what to do about margins and padding that expand beyond 100%
*create a box model to demonstrate row, column, box concept
*create simple transclusions for newRow, newColumn, newBox, endBox, endColumn (there is no endRow)
*tagged all content by function
*broke Documentation and FAQ into smaller chunks
IDEAS
*use tagging to group boxes, columns and rows
*adapt jquery gizmos from Fluid 960 to allow accordions, folding boxes, kwicks, etc.
*RowNav -- try setting up horizontal navigation in a row.
//This is Tiddly 960 Alpha 2010 v01.08//
//Updated January 8, 2010 by David Lester//
{{title{[[Tiddly 960|Tiddly960]]}}} /% Temporary title hack %/
This is the contribution of [[David Lester]]. Learn more at: [[TIddly 960|http://tiddly960.tiddlyspot.com]].
{{center{[[About Tiddly 960|Introducing Tiddly 960]] | [[How it works]] | [[Conceptual model|Tiddly960conceptualModel]] | [[Examples]] | [[Documentation|Documentation: Tiddly 960 Markup]] | [[FAQ|Tiddly 960 Frequently Asked Questions]] | [[Contact|David Lester]]}}}
[[Tiddly 960|Tiddly960Footer]] is the contribution of [[David Lester]], and is released under the GPL / MIT licenses, as well as the applicable licenses for the components listed above.
This demonstrates the Tiddly 960 conceptual model of rows, columns, and boxes.
<html>
<style>
.T960container {
border: 1px solid gray;
background: #ccc;
font-weight: normal;
padding: 12px;
width:auto;
overflow:auto;
}
.T960row {
border: 1px solid red;
background: #fbb;
padding: 12px;
margin-bottom:6px;
position:relative;
width:auto;
overflow:auto;
}
.T960column {
border: 1px solid green;
background: #9c9;
padding: 6px;
margin-bottom:6px;
margin-right:6px;
float:left;
position:relative;
overflow:auto;
}
.T960box {
border: 1px solid blue;
background: #99c;
padding: 6px;
margin-bottom:6px;
position:relative;
width:auto;
overflow:auto;
}
.TW960row {
border: 6px solid blue;
background: #99f;
padding: 12px;
margin-bottom:6px;
position:relative;
width:auto;
overflow:auto;
}
.TW960column {
border: 1px solid blue;
background: #bbf;
padding: 6px;
margin-bottom:6px;
margin-right:6px;
float:left;
position:relative;
overflow:auto;
}
.TW960box {
border: 1px solid blue;
background: #ddf;
padding: 6px;
margin-bottom:6px;
position:relative;
width:auto;
overflow:hidden;
}
.T960label {
background-color:#ffc;
border:1px solid yellow;
margin:6px;
margin-bottom:9px;
display:block;
width:auto;
}
.T960grid {
background-color:#ffc;
border:1px solid yellow;
margin:5px;
margin-bottom:9px;
display:inline-block;
width: 5%;
}
</style>
<div class="T960container"><span class='T960label'>container (960 px wide) with underlying 12 column grid</span>
<span class="T960grid">1</span>
<span class="T960grid">2</span>
<span class="T960grid">3</span>
<span class="T960grid">4</span>
<span class="T960grid">5</span>
<span class="T960grid">6</span>
<span class="T960grid">7</span>
<span class="T960grid">8</span>
<span class="T960grid">9</span>
<span class="T960grid">10</span>
<span class="T960grid">11</span>
<span class="T960grid">12</span>
<div class="T960row"><span class='T960label'>row 1</span>
<div class="T960column" style="width:28%"><span class='T960label'>column 1</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
<div class="T960box"><span class='T960label'>box 2</span>
tiddler content
</div>
</div>
<div class="T960column" style="width:28%"><span class='T960label'>column 2</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
</div>
<div class="T960column" style="width:28%"><span class='T960label'>column 3</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
</div>
</div>
<div style='clear:both;'></div>
<div class="T960row"><span class='T960label'>row 2</span>
<div class="T960column" style="width:20%"><span class='T960label'>column 1</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
</div>
<div class="T960column" style="width:20%"><span class='T960label'>column 2</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
<div class="T960box"><span class='T960label'>box 2</span>
tiddler content
</div>
</div>
<div class="T960column" style="width:20%"><span class='T960label'>column 3</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
</div>
<div class="T960column" style="width:20%"><span class='T960label'>column 4</span>
<div class="T960box"><span class='T960label'>box 1</span>
tiddler content
</div>
<div class="T960box"><span class='T960label'>box 2</span>
tiddler content
</div>
<div class="T960box"><span class='T960label'>box 3</span>
tiddler content
</div>
</div>
</div>
<div style='clear:both;'></div>
<div class="TW960row"><span class='T960label'>row -- TiddlyWiki itself -- it's just another row anywhere in the flow</span>
<div class="TW960column" style="width:22%"><span class='T960label'>Column Menu</span>
<div class="TW960box"><span class='T960label'>Main Menu</span>
<ul><li>item</li><li>item</li><li>item</li></ul>
</div>
<div class="TW960box"><span class='T960label'>Custom Box</span>
tiddler content
</div>
</div>
<div class="TW960column" style="width:42%"><span class='T960label'>Column Tiddlers</span>
<div class="TW960box"><span class='T960label'>Tiddler 1</span>
tiddler content content content
</div>
<div class="TW960box"><span class='T960label'>Tiddler 2</span>
tiddler content content content
</div>
</div>
<div class="TW960column" style="width:22%"><span class='T960label'>Column Sidebar</span>
<div class="TW960box"><span class='T960label'>Options</span>
<ul><li>button</li><li>button</li><li>button</li></ul>
</div>
<div class="TW960box"><span class='T960label'>Tabs</span>
<ul><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li></ul>
</div>
<div class="TW960box"><span class='T960label'>Custom Box</span>
tiddler content
</div>
</div>
</div>
<div style='clear:both;'></div>
<div class="T960row"><span class='T960label'>More rows ... as many as you need</span>
<div class="T960column" style="width:45%"><span class='T960label'>More columns ...</span>
<div class="T960box"><span class='T960label'>More boxes ...</span>
more tiddler content
</div>
</div>
<div class="T960column" style="width:45%"><span class='T960label'>More columns ...</span>
<div class="T960box"><span class='T960label'>More boxes ...</span>
more tiddler content
</div>
</div>
</div>
<div style='clear:both;'></div>
<div class="T960row"><span class='T960label'>Row footer</span>
You can skip the column and box and put the content directly in the row
</div>
<div style='clear:both;'></div>
</div>
</html>
{{title{[[TiddlyWiki|TiddlyWiki]]}}} /% Temporary title hack %/
Learn more at [[TiddlyWiki.com|http://www.tiddlywiki.com/]] or the [[TiddlyWiki Google Group|http://groups.google.com/group/TiddlyWiki]].
Feel free to download and save a copy of Tiddly 960 to try it out for yourself. You can save a copy of this page to your computer and modify it as you please
If you prefer to start fresh with an "empty" ~TiddlyWiki and just the bare-bones elements of the Tiddly 960 framework, you can download one at http://tinyurl.com/tiddly960empty, which will redirect you to a download at drop.io.
Enjoy!
/***
Description: Contains the stuff you need to use Tiddlyspot
Note, you also need UploadPlugin, PasswordOptionPlugin and LoadRemoteFileThroughProxy
from http://tiddlywiki.bidix.info for a complete working Tiddlyspot site.
***/
//{{{
// edit this if you are migrating sites or retrofitting an existing TW
config.tiddlyspotSiteId = 'tiddly960';
// make it so you can by default see edit controls via http
config.options.chkHttpReadOnly = false;
window.readOnly = false; // make sure of it (for tw 2.2)
window.showBackstage = true; // show backstage too
// disable autosave in d3
if (window.location.protocol != "file:")
config.options.chkGTDLazyAutoSave = false;
// tweak shadow tiddlers to add upload button, password entry box etc
with (config.shadowTiddlers) {
SiteUrl = 'http://'+config.tiddlyspotSiteId+'.tiddlyspot.com';
SideBarOptions = SideBarOptions.replace(/(<<saveChanges>>)/,"$1<<tiddler TspotSidebar>>");
OptionsPanel = OptionsPanel.replace(/^/,"<<tiddler TspotOptions>>");
DefaultTiddlers = DefaultTiddlers.replace(/^/,"[[WelcomeToTiddlyspot]] ");
MainMenu = MainMenu.replace(/^/,"[[WelcomeToTiddlyspot]] ");
}
// create some shadow tiddler content
merge(config.shadowTiddlers,{
'TspotOptions':[
"tiddlyspot password:",
"<<option pasUploadPassword>>",
""
].join("\n"),
'TspotControls':[
"| tiddlyspot password:|<<option pasUploadPassword>>|",
"| site management:|<<upload http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/store.cgi index.html . . " + config.tiddlyspotSiteId + ">>//(requires tiddlyspot password)//<br>[[control panel|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/controlpanel]], [[download (go offline)|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/download]]|",
"| links:|[[tiddlyspot.com|http://tiddlyspot.com/]], [[FAQs|http://faq.tiddlyspot.com/]], [[blog|http://tiddlyspot.blogspot.com/]], email [[support|mailto:support@tiddlyspot.com]] & [[feedback|mailto:feedback@tiddlyspot.com]], [[donate|http://tiddlyspot.com/?page=donate]]|"
].join("\n"),
'WelcomeToTiddlyspot':[
"This document is a ~TiddlyWiki from tiddlyspot.com. A ~TiddlyWiki is an electronic notebook that is great for managing todo lists, personal information, and all sorts of things.",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //What now?// @@ Before you can save any changes, you need to enter your password in the form below. Then configure privacy and other site settings at your [[control panel|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/controlpanel]] (your control panel username is //" + config.tiddlyspotSiteId + "//).",
"<<tiddler TspotControls>>",
"See also GettingStarted.",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //Working online// @@ You can edit this ~TiddlyWiki right now, and save your changes using the \"save to web\" button in the column on the right.",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //Working offline// @@ A fully functioning copy of this ~TiddlyWiki can be saved onto your hard drive or USB stick. You can make changes and save them locally without being connected to the Internet. When you're ready to sync up again, just click \"upload\" and your ~TiddlyWiki will be saved back to tiddlyspot.com.",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //Help!// @@ Find out more about ~TiddlyWiki at [[TiddlyWiki.com|http://tiddlywiki.com]]. Also visit [[TiddlyWiki.org|http://tiddlywiki.org]] for documentation on learning and using ~TiddlyWiki. New users are especially welcome on the [[TiddlyWiki mailing list|http://groups.google.com/group/TiddlyWiki]], which is an excellent place to ask questions and get help. If you have a tiddlyspot related problem email [[tiddlyspot support|mailto:support@tiddlyspot.com]].",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //Enjoy :)// @@ We hope you like using your tiddlyspot.com site. Please email [[feedback@tiddlyspot.com|mailto:feedback@tiddlyspot.com]] with any comments or suggestions."
].join("\n"),
'TspotSidebar':[
"<<upload http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/store.cgi index.html . . " + config.tiddlyspotSiteId + ">><html><a href='http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/download' class='button'>download</a></html>"
].join("\n")
});
//}}}
[[NewRow]]
[[NewCol12]]
<p style="border-bottom: 1px dotted red; text-align:center;color:gray;'">Your TW ends here!</p>
<//div></div>
[[NewCol12]]
<div id='maincontentwrap'>
<p style="border-top: 1px dotted red; text-align:center;color:gray;'">Your TW starts here!</p>
Here are a few places to look to get a close-up view of how Tiddly 960 integrates ~TiddlyWiki and the Fluid 960 Grid System.
[[PageTemplate]]
[[StyleSheet]]
[[FluidGrid.css]]
[[RowAbove]]
[[NewRow]]
[[NewCol4]]
[[NewBox]]
"tiddler WhatIsTiddly960"
[[EndBox]]
| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |
| 06/01/2010 11:01:11 | YourName | [[/|http://tiddly960.tiddlyspot.com/]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . |
| 07/01/2010 19:10:11 | YourName | [[/|http://tiddly960.tiddlyspot.com/#xyz]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . |
| 08/01/2010 05:58:28 | YourName | [[/|http://tiddly960.tiddlyspot.com/]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . |
| 08/01/2010 15:33:01 | YourName | [[tiddly960.html|file:///Users/David/Downloads/2010-01-08/tiddly960.html]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . |
| 08/01/2010 15:35:39 | YourName | [[/|http://tiddly960.tiddlyspot.com/]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . |
| 08/01/2010 15:43:24 | YourName | [[/|http://tiddly960.tiddlyspot.com/]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . |
| 08/01/2010 15:54:59 | YourName | [[/|http://tiddly960.tiddlyspot.com/]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . | ok |
| 08/01/2010 16:00:50 | YourName | [[/|http://tiddly960.tiddlyspot.com/#bannerabove]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . | ok |
| 08/01/2010 16:02:21 | YourName | [[/|http://tiddly960.tiddlyspot.com/#bannerabove]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . |
| 08/01/2010 16:04:39 | YourName | [[/|http://tiddly960.tiddlyspot.com/]] | [[store.cgi|http://tiddly960.tiddlyspot.com/store.cgi]] | . | [[index.html | http://tiddly960.tiddlyspot.com/index.html]] | . |
/***
|''Name:''|UploadPlugin|
|''Description:''|Save to web a TiddlyWiki|
|''Version:''|4.1.3|
|''Date:''|Feb 24, 2008|
|''Source:''|http://tiddlywiki.bidix.info/#UploadPlugin|
|''Documentation:''|http://tiddlywiki.bidix.info/#UploadPluginDoc|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.2.0|
|''Requires:''|PasswordOptionPlugin|
***/
//{{{
version.extensions.UploadPlugin = {
major: 4, minor: 1, revision: 3,
date: new Date("Feb 24, 2008"),
source: 'http://tiddlywiki.bidix.info/#UploadPlugin',
author: 'BidiX (BidiX (at) bidix (dot) info',
coreVersion: '2.2.0'
};
//
// Environment
//
if (!window.bidix) window.bidix = {}; // bidix namespace
bidix.debugMode = false; // true to activate both in Plugin and UploadService
//
// Upload Macro
//
config.macros.upload = {
// default values
defaultBackupDir: '', //no backup
defaultStoreScript: "store.php",
defaultToFilename: "index.html",
defaultUploadDir: ".",
authenticateUser: true // UploadService Authenticate User
};
config.macros.upload.label = {
promptOption: "Save and Upload this TiddlyWiki with UploadOptions",
promptParamMacro: "Save and Upload this TiddlyWiki in %0",
saveLabel: "save to web",
saveToDisk: "save to disk",
uploadLabel: "upload"
};
config.macros.upload.messages = {
noStoreUrl: "No store URL in parmeters or options",
usernameOrPasswordMissing: "Username or password missing"
};
config.macros.upload.handler = function(place,macroName,params) {
if (readOnly)
return;
var label;
if (document.location.toString().substr(0,4) == "http")
label = this.label.saveLabel;
else
label = this.label.uploadLabel;
var prompt;
if (params[0]) {
prompt = this.label.promptParamMacro.toString().format([this.destFile(params[0],
(params[1] ? params[1]:bidix.basename(window.location.toString())), params[3])]);
} else {
prompt = this.label.promptOption;
}
createTiddlyButton(place, label, prompt, function() {config.macros.upload.action(params);}, null, null, this.accessKey);
};
config.macros.upload.action = function(params)
{
// for missing macro parameter set value from options
if (!params) params = {};
var storeUrl = params[0] ? params[0] : config.options.txtUploadStoreUrl;
var toFilename = params[1] ? params[1] : config.options.txtUploadFilename;
var backupDir = params[2] ? params[2] : config.options.txtUploadBackupDir;
var uploadDir = params[3] ? params[3] : config.options.txtUploadDir;
var username = params[4] ? params[4] : config.options.txtUploadUserName;
var password = config.options.pasUploadPassword; // for security reason no password as macro parameter
// for still missing parameter set default value
if ((!storeUrl) && (document.location.toString().substr(0,4) == "http"))
storeUrl = bidix.dirname(document.location.toString())+'/'+config.macros.upload.defaultStoreScript;
if (storeUrl.substr(0,4) != "http")
storeUrl = bidix.dirname(document.location.toString()) +'/'+ storeUrl;
if (!toFilename)
toFilename = bidix.basename(window.location.toString());
if (!toFilename)
toFilename = config.macros.upload.defaultToFilename;
if (!uploadDir)
uploadDir = config.macros.upload.defaultUploadDir;
if (!backupDir)
backupDir = config.macros.upload.defaultBackupDir;
// report error if still missing
if (!storeUrl) {
alert(config.macros.upload.messages.noStoreUrl);
clearMessage();
return false;
}
if (config.macros.upload.authenticateUser && (!username || !password)) {
alert(config.macros.upload.messages.usernameOrPasswordMissing);
clearMessage();
return false;
}
bidix.upload.uploadChanges(false,null,storeUrl, toFilename, uploadDir, backupDir, username, password);
return false;
};
config.macros.upload.destFile = function(storeUrl, toFilename, uploadDir)
{
if (!storeUrl)
return null;
var dest = bidix.dirname(storeUrl);
if (uploadDir && uploadDir != '.')
dest = dest + '/' + uploadDir;
dest = dest + '/' + toFilename;
return dest;
};
//
// uploadOptions Macro
//
config.macros.uploadOptions = {
handler: function(place,macroName,params) {
var wizard = new Wizard();
wizard.createWizard(place,this.wizardTitle);
wizard.addStep(this.step1Title,this.step1Html);
var markList = wizard.getElement("markList");
var listWrapper = document.createElement("div");
markList.parentNode.insertBefore(listWrapper,markList);
wizard.setValue("listWrapper",listWrapper);
this.refreshOptions(listWrapper,false);
var uploadCaption;
if (document.location.toString().substr(0,4) == "http")
uploadCaption = config.macros.upload.label.saveLabel;
else
uploadCaption = config.macros.upload.label.uploadLabel;
wizard.setButtons([
{caption: uploadCaption, tooltip: config.macros.upload.label.promptOption,
onClick: config.macros.upload.action},
{caption: this.cancelButton, tooltip: this.cancelButtonPrompt, onClick: this.onCancel}
]);
},
options: [
"txtUploadUserName",
"pasUploadPassword",
"txtUploadStoreUrl",
"txtUploadDir",
"txtUploadFilename",
"txtUploadBackupDir",
"chkUploadLog",
"txtUploadLogMaxLine"
],
refreshOptions: function(listWrapper) {
var opts = [];
for(i=0; i<this.options.length; i++) {
var opt = {};
opts.push();
opt.option = "";
n = this.options[i];
opt.name = n;
opt.lowlight = !config.optionsDesc[n];
opt.description = opt.lowlight ? this.unknownDescription : config.optionsDesc[n];
opts.push(opt);
}
var listview = ListView.create(listWrapper,opts,this.listViewTemplate);
for(n=0; n<opts.length; n++) {
var type = opts[n].name.substr(0,3);
var h = config.macros.option.types[type];
if (h && h.create) {
h.create(opts[n].colElements['option'],type,opts[n].name,opts[n].name,"no");
}
}
},
onCancel: function(e)
{
backstage.switchTab(null);
return false;
},
wizardTitle: "Upload with options",
step1Title: "These options are saved in cookies in your browser",
step1Html: "<input type='hidden' name='markList'></input><br>",
cancelButton: "Cancel",
cancelButtonPrompt: "Cancel prompt",
listViewTemplate: {
columns: [
{name: 'Description', field: 'description', title: "Description", type: 'WikiText'},
{name: 'Option', field: 'option', title: "Option", type: 'String'},
{name: 'Name', field: 'name', title: "Name", type: 'String'}
],
rowClasses: [
{className: 'lowlight', field: 'lowlight'}
]}
};
//
// upload functions
//
if (!bidix.upload) bidix.upload = {};
if (!bidix.upload.messages) bidix.upload.messages = {
//from saving
invalidFileError: "The original file '%0' does not appear to be a valid TiddlyWiki",
backupSaved: "Backup saved",
backupFailed: "Failed to upload backup file",
rssSaved: "RSS feed uploaded",
rssFailed: "Failed to upload RSS feed file",
emptySaved: "Empty template uploaded",
emptyFailed: "Failed to upload empty template file",
mainSaved: "Main TiddlyWiki file uploaded",
mainFailed: "Failed to upload main TiddlyWiki file. Your changes have not been saved",
//specific upload
loadOriginalHttpPostError: "Can't get original file",
aboutToSaveOnHttpPost: 'About to upload on %0 ...',
storePhpNotFound: "The store script '%0' was not found."
};
bidix.upload.uploadChanges = function(onlyIfDirty,tiddlers,storeUrl,toFilename,uploadDir,backupDir,username,password)
{
var callback = function(status,uploadParams,original,url,xhr) {
if (!status) {
displayMessage(bidix.upload.messages.loadOriginalHttpPostError);
return;
}
if (bidix.debugMode)
alert(original.substr(0,500)+"\n...");
// Locate the storeArea div's
var posDiv = locateStoreArea(original);
if((posDiv[0] == -1) || (posDiv[1] == -1)) {
alert(config.messages.invalidFileError.format([localPath]));
return;
}
bidix.upload.uploadRss(uploadParams,original,posDiv);
};
if(onlyIfDirty && !store.isDirty())
return;
clearMessage();
// save on localdisk ?
if (document.location.toString().substr(0,4) == "file") {
var path = document.location.toString();
var localPath = getLocalPath(path);
saveChanges();
}
// get original
var uploadParams = new Array(storeUrl,toFilename,uploadDir,backupDir,username,password);
var originalPath = document.location.toString();
// If url is a directory : add index.html
if (originalPath.charAt(originalPath.length-1) == "/")
originalPath = originalPath + "index.html";
var dest = config.macros.upload.destFile(storeUrl,toFilename,uploadDir);
var log = new bidix.UploadLog();
log.startUpload(storeUrl, dest, uploadDir, backupDir);
displayMessage(bidix.upload.messages.aboutToSaveOnHttpPost.format([dest]));
if (bidix.debugMode)
alert("about to execute Http - GET on "+originalPath);
var r = doHttp("GET",originalPath,null,null,username,password,callback,uploadParams,null);
if (typeof r == "string")
displayMessage(r);
return r;
};
bidix.upload.uploadRss = function(uploadParams,original,posDiv)
{
var callback = function(status,params,responseText,url,xhr) {
if(status) {
var destfile = responseText.substring(responseText.indexOf("destfile:")+9,responseText.indexOf("\n", responseText.indexOf("destfile:")));
displayMessage(bidix.upload.messages.rssSaved,bidix.dirname(url)+'/'+destfile);
bidix.upload.uploadMain(params[0],params[1],params[2]);
} else {
displayMessage(bidix.upload.messages.rssFailed);
}
};
// do uploadRss
if(config.options.chkGenerateAnRssFeed) {
var rssPath = uploadParams[1].substr(0,uploadParams[1].lastIndexOf(".")) + ".xml";
var rssUploadParams = new Array(uploadParams[0],rssPath,uploadParams[2],'',uploadParams[4],uploadParams[5]);
var rssString = generateRss();
// no UnicodeToUTF8 conversion needed when location is "file" !!!
if (document.location.toString().substr(0,4) != "file")
rssString = convertUnicodeToUTF8(rssString);
bidix.upload.httpUpload(rssUploadParams,rssString,callback,Array(uploadParams,original,posDiv));
} else {
bidix.upload.uploadMain(uploadParams,original,posDiv);
}
};
bidix.upload.uploadMain = function(uploadParams,original,posDiv)
{
var callback = function(status,params,responseText,url,xhr) {
var log = new bidix.UploadLog();
if(status) {
// if backupDir specified
if ((params[3]) && (responseText.indexOf("backupfile:") > -1)) {
var backupfile = responseText.substring(responseText.indexOf("backupfile:")+11,responseText.indexOf("\n", responseText.indexOf("backupfile:")));
displayMessage(bidix.upload.messages.backupSaved,bidix.dirname(url)+'/'+backupfile);
}
var destfile = responseText.substring(responseText.indexOf("destfile:")+9,responseText.indexOf("\n", responseText.indexOf("destfile:")));
displayMessage(bidix.upload.messages.mainSaved,bidix.dirname(url)+'/'+destfile);
store.setDirty(false);
log.endUpload("ok");
} else {
alert(bidix.upload.messages.mainFailed);
displayMessage(bidix.upload.messages.mainFailed);
log.endUpload("failed");
}
};
// do uploadMain
var revised = bidix.upload.updateOriginal(original,posDiv);
bidix.upload.httpUpload(uploadParams,revised,callback,uploadParams);
};
bidix.upload.httpUpload = function(uploadParams,data,callback,params)
{
var localCallback = function(status,params,responseText,url,xhr) {
url = (url.indexOf("nocache=") < 0 ? url : url.substring(0,url.indexOf("nocache=")-1));
if (xhr.status == 404)
alert(bidix.upload.messages.storePhpNotFound.format([url]));
if ((bidix.debugMode) || (responseText.indexOf("Debug mode") >= 0 )) {
alert(responseText);
if (responseText.indexOf("Debug mode") >= 0 )
responseText = responseText.substring(responseText.indexOf("\n\n")+2);
} else if (responseText.charAt(0) != '0')
alert(responseText);
if (responseText.charAt(0) != '0')
status = null;
callback(status,params,responseText,url,xhr);
};
// do httpUpload
var boundary = "---------------------------"+"AaB03x";
var uploadFormName = "UploadPlugin";
// compose headers data
var sheader = "";
sheader += "--" + boundary + "\r\nContent-disposition: form-data; name=\"";
sheader += uploadFormName +"\"\r\n\r\n";
sheader += "backupDir="+uploadParams[3] +
";user=" + uploadParams[4] +
";password=" + uploadParams[5] +
";uploaddir=" + uploadParams[2];
if (bidix.debugMode)
sheader += ";debug=1";
sheader += ";;\r\n";
sheader += "\r\n" + "--" + boundary + "\r\n";
sheader += "Content-disposition: form-data; name=\"userfile\"; filename=\""+uploadParams[1]+"\"\r\n";
sheader += "Content-Type: text/html;charset=UTF-8" + "\r\n";
sheader += "Content-Length: " + data.length + "\r\n\r\n";
// compose trailer data
var strailer = new String();
strailer = "\r\n--" + boundary + "--\r\n";
data = sheader + data + strailer;
if (bidix.debugMode) alert("about to execute Http - POST on "+uploadParams[0]+"\n with \n"+data.substr(0,500)+ " ... ");
var r = doHttp("POST",uploadParams[0],data,"multipart/form-data; ;charset=UTF-8; boundary="+boundary,uploadParams[4],uploadParams[5],localCallback,params,null);
if (typeof r == "string")
displayMessage(r);
return r;
};
// same as Saving's updateOriginal but without convertUnicodeToUTF8 calls
bidix.upload.updateOriginal = function(original, posDiv)
{
if (!posDiv)
posDiv = locateStoreArea(original);
if((posDiv[0] == -1) || (posDiv[1] == -1)) {
alert(config.messages.invalidFileError.format([localPath]));
return;
}
var revised = original.substr(0,posDiv[0] + startSaveArea.length) + "\n" +
store.allTiddlersAsHtml() + "\n" +
original.substr(posDiv[1]);
var newSiteTitle = getPageTitle().htmlEncode();
revised = revised.replaceChunk("<title"+">","</title"+">"," " + newSiteTitle + " ");
revised = updateMarkupBlock(revised,"PRE-HEAD","MarkupPreHead");
revised = updateMarkupBlock(revised,"POST-HEAD","MarkupPostHead");
revised = updateMarkupBlock(revised,"PRE-BODY","MarkupPreBody");
revised = updateMarkupBlock(revised,"POST-SCRIPT","MarkupPostBody");
return revised;
};
//
// UploadLog
//
// config.options.chkUploadLog :
// false : no logging
// true : logging
// config.options.txtUploadLogMaxLine :
// -1 : no limit
// 0 : no Log lines but UploadLog is still in place
// n : the last n lines are only kept
// NaN : no limit (-1)
bidix.UploadLog = function() {
if (!config.options.chkUploadLog)
return; // this.tiddler = null
this.tiddler = store.getTiddler("UploadLog");
if (!this.tiddler) {
this.tiddler = new Tiddler();
this.tiddler.title = "UploadLog";
this.tiddler.text = "| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |";
this.tiddler.created = new Date();
this.tiddler.modifier = config.options.txtUserName;
this.tiddler.modified = new Date();
store.addTiddler(this.tiddler);
}
return this;
};
bidix.UploadLog.prototype.addText = function(text) {
if (!this.tiddler)
return;
// retrieve maxLine when we need it
var maxLine = parseInt(config.options.txtUploadLogMaxLine,10);
if (isNaN(maxLine))
maxLine = -1;
// add text
if (maxLine != 0)
this.tiddler.text = this.tiddler.text + text;
// Trunck to maxLine
if (maxLine >= 0) {
var textArray = this.tiddler.text.split('\n');
if (textArray.length > maxLine + 1)
textArray.splice(1,textArray.length-1-maxLine);
this.tiddler.text = textArray.join('\n');
}
// update tiddler fields
this.tiddler.modifier = config.options.txtUserName;
this.tiddler.modified = new Date();
store.addTiddler(this.tiddler);
// refresh and notifiy for immediate update
story.refreshTiddler(this.tiddler.title);
store.notify(this.tiddler.title, true);
};
bidix.UploadLog.prototype.startUpload = function(storeUrl, toFilename, uploadDir, backupDir) {
if (!this.tiddler)
return;
var now = new Date();
var text = "\n| ";
var filename = bidix.basename(document.location.toString());
if (!filename) filename = '/';
text += now.formatString("0DD/0MM/YYYY 0hh:0mm:0ss") +" | ";
text += config.options.txtUserName + " | ";
text += "[["+filename+"|"+location + "]] |";
text += " [[" + bidix.basename(storeUrl) + "|" + storeUrl + "]] | ";
text += uploadDir + " | ";
text += "[[" + bidix.basename(toFilename) + " | " +toFilename + "]] | ";
text += backupDir + " |";
this.addText(text);
};
bidix.UploadLog.prototype.endUpload = function(status) {
if (!this.tiddler)
return;
this.addText(" "+status+" |");
};
//
// Utilities
//
bidix.checkPlugin = function(plugin, major, minor, revision) {
var ext = version.extensions[plugin];
if (!
(ext &&
((ext.major > major) ||
((ext.major == major) && (ext.minor > minor)) ||
((ext.major == major) && (ext.minor == minor) && (ext.revision >= revision))))) {
// write error in PluginManager
if (pluginInfo)
pluginInfo.log.push("Requires " + plugin + " " + major + "." + minor + "." + revision);
eval(plugin); // generate an error : "Error: ReferenceError: xxxx is not defined"
}
};
bidix.dirname = function(filePath) {
if (!filePath)
return;
var lastpos;
if ((lastpos = filePath.lastIndexOf("/")) != -1) {
return filePath.substring(0, lastpos);
} else {
return filePath.substring(0, filePath.lastIndexOf("\\"));
}
};
bidix.basename = function(filePath) {
if (!filePath)
return;
var lastpos;
if ((lastpos = filePath.lastIndexOf("#")) != -1)
filePath = filePath.substring(0, lastpos);
if ((lastpos = filePath.lastIndexOf("/")) != -1) {
return filePath.substring(lastpos + 1);
} else
return filePath.substring(filePath.lastIndexOf("\\")+1);
};
bidix.initOption = function(name,value) {
if (!config.options[name])
config.options[name] = value;
};
//
// Initializations
//
// require PasswordOptionPlugin 1.0.1 or better
bidix.checkPlugin("PasswordOptionPlugin", 1, 0, 1);
// styleSheet
setStylesheet('.txtUploadStoreUrl, .txtUploadBackupDir, .txtUploadDir {width: 22em;}',"uploadPluginStyles");
//optionsDesc
merge(config.optionsDesc,{
txtUploadStoreUrl: "Url of the UploadService script (default: store.php)",
txtUploadFilename: "Filename of the uploaded file (default: in index.html)",
txtUploadDir: "Relative Directory where to store the file (default: . (downloadService directory))",
txtUploadBackupDir: "Relative Directory where to backup the file. If empty no backup. (default: ''(empty))",
txtUploadUserName: "Upload Username",
pasUploadPassword: "Upload Password",
chkUploadLog: "do Logging in UploadLog (default: true)",
txtUploadLogMaxLine: "Maximum of lines in UploadLog (default: 10)"
});
// Options Initializations
bidix.initOption('txtUploadStoreUrl','');
bidix.initOption('txtUploadFilename','');
bidix.initOption('txtUploadDir','');
bidix.initOption('txtUploadBackupDir','');
bidix.initOption('txtUploadUserName','');
bidix.initOption('pasUploadPassword','');
bidix.initOption('chkUploadLog',true);
bidix.initOption('txtUploadLogMaxLine','10');
// Backstage
merge(config.tasks,{
uploadOptions: {text: "upload", tooltip: "Change UploadOptions and Upload", content: '<<uploadOptions>>'}
});
config.backstageTasks.push("uploadOptions");
//}}}
Welcome to ''Tiddly 960'', a fluid layout system for ~TiddlyWiki.The goal was to keep ~TiddlyWiki functionally the same as much as possible, but allow the display of //''tiddlers anywhere''//. How does it work?
#Create a tiddler just the way you always do.
#Add some very simple markup to your ~PageTemplate to put that tiddler anywhere on the page.
#There is no step 3.
Your primary ~TiddlyWiki is still there as always (that's what you're reading now), but you can add as many rows, columns, and boxes as you like either above or below your main ~TiddlyWiki. In fact, you can even display tiddlers in fixed boxes anywhere within your regular ~TiddlyWiki layout, because the layout has been put on the same grid framework.
Because it is all done with the magic of CSS, you can easily add style definitions to completely change the appearance too. Like all good software, the code and presentation are separate. But you do not have to know any CSS to change the layout in ''Tiddly 960''. You just use a few very simple ~TiddlyLinks.
This is very much a proof-of-concept model -- just a work in progress. It has not been tested across browsers or using various macros and plugins that are available for ~TiddlyWiki. You should definitely //use it at your own risk//. But I do hope you use it because I really want your feedback!
None of what I have done here uses Javascript directly, mostly because I wouldn't know how. The working example on the [[Fluid 960 Grid System|http://www.designinfluences.com/fluid960gs/]] page shows that it can be used with some pretty nifty jQuery, including folding boxes, accordions, and kwicks, so maybe those kinds of things can be added here later. For now I wanted to focus on a basic prototype and then see where it goes.
So what can you do with Tiddly 960? Here are some possibilities:
*Put a tiddler anywhere, even in your page header
*Add a footer to your ~TiddlyWiki
*Put a box between your header and your ~TiddlyWiki for important announcements or reminders
*Rearrange your main ~TiddlyWiki elements (Main Menu, Submain Menu, Sidebar, Sidebar Options, Sidebar Tabs, or even the tiddler "story."
*Add a custom box to your ~TiddlyWiki that always appears below (or above) your Main Menu
*Create a new theme for both appearance and layout using only CSS
*Create several new themes or different headers that can be displayed when you want
*Give your ~TiddlyWiki a fresh new look using markup you already know (and you don't need to know //''any''// CSS to change your layout!)
*Get creative and use ~Tiddlywiki to design a sites for photo galleries, videos, or a portfolio of artwork.
*Need a place to put a widget, like your Flickr or Twitter feeds?
*Oh, yeah, ads!
*Anything you can display in a tiddler can be displayed in a box anywhere on the page in ''Tiddly 960''.
That should give you a general idea of what ''Tiddly 960'' is all about. I hope this contribution is something you can use. I haven't been using ~TiddlyWiki long enough to know its history or all the tools available for it, so I hope that this is seen as a contribution that adds something new, or at least adds it in a new way. I have nothing but respect for Jeremy Ruston and all the folks who have built ~TiddlyWiki into the great software it is, as well as Stephen Bau and Nathan Smith who developed the 960 frameworks.
Please let me know what you think by posting on the [[TiddlyWiki Google Group| http://groups.google.com/group/TiddlyWiki]] or emailing me directly.
[[David Lester]]
tiddly960@gmail.com
{{title{[[What is Fluid 960?|WhatIsFluid960]]}}} /% Temporary title hack %/
The ''Fluid 960 Grid System'' was developed by Stephen Bau based on work by Nathan Smith. It is a system used by many web designers for rapid prototyping and development of new web pages. The Fluid 960 Grid System has a fluid structure that resizes itself with the browser window. Adding the ''Fluid 960 Grid System'' will help make prototyping and developing new layouts and themes almost as easy as ~TiddlyWiki itself.
{{title{[[What is Tiddly 960?|WhatIsTiddly960]]}}} /% Temporary title hack %/
@@font-size:1.25em;''Tiddly 960'' is a combination of the ''Fluid 960 Grid System'' and ''~TiddlyWiki'', bringing together the best of both. The Fluid 960 Grid System is used for rapid prototyping and development of web sites. ~TiddlyWiki makes content generation fast and easy. Together they make it faster and easier to design web sites and add content quickly. And Tiddly 960 lets you put tiddlers anywhere.@@
{{title{[[What is TiddlyWiki?|WhatIsTiddlyWiki]]}}} /% Temporary title hack %/
''~TiddlyWiki'' is described as a "personal reusable non-linear web notebook.' ~TiddlyWiki's most unique feature is that it is a single, self-contained, self-editing file that can live on your desktop or the web, and operates within your browser to allow you to edit and save the file. Using simple wiki-like syntax, it is very quick easy to generate content in your ~TiddlyWiki and link it to other information. Best of all, the simple, single-file format allows you to carry it on a USB stick or share it by emailing the file to others.
Daily updates on Tiddly 960 development