Climate Change 2.0 | excludetest

Colour Palette

Sat, 22 Sep 2007 15:54:45 GMT

The ColorPalette tiddler is used in TiddlyWiki to define a set of colours - fifteen by default - whose names are then used in the StyleSheetColors tiddler. This system allow one to easily change the entire colour scheme of a TiddlyWiki site far more quickly than if one were to have change the colour for each style element.

Background	#fff	Background
Foreground	#000	Foreground
PrimaryPale	#8cf	PrimaryPale
PrimaryLight	#18f	PrimaryLight
PrimaryMid	#04b	PrimaryMid
PrimaryDark	#017	PrimaryDark
SecondaryPale	#ffc	SecondaryPale
SecondaryLight	#fe7	SecondaryLight
SecondaryMid	#db4	SecondaryMid
SecondaryDark	#841	SecondaryDark
TertiaryPale	#eee	TertiaryPale
TertiaryLight	#ccc	TertiaryLight
TertiaryMid	#999	TertiaryMid
TertiaryDark	#666	TertiaryDark
Error	#f77	Error

TagglyTaggingStyles

Sat, 22 Sep 2007 15:37:51 GMT

/* created by TagglyTaggingPlugin */
.tagglyTagging { padding-top:0.5em; }
.tagglyTagging li.listTitle { display:none; }
.tagglyTagging ul {
	margin-top:0px; padding-top:0.5em; padding-left:2em;
	margin-bottom:0px; padding-bottom:0px;
}
.tagglyTagging { vertical-align: top; margin:0px; padding:0px; }
.tagglyTagging table { margin:0px; padding:0px; }
.tagglyTagging .button { display:none; margin-left:3px; margin-right:3px; }
.tagglyTagging .button, .tagglyTagging .hidebutton {
	color:[[ColorPalette::TertiaryLight]]; font-size:90%;
	border:0px; padding-left:0.3em;padding-right:0.3em;
}
.tagglyTagging .button:hover, .hidebutton:hover {
	background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]];
}
.selected .tagglyTagging .button {
	display:inline;
}
.tagglyTagging .hidebutton { color:[[ColorPalette::Background]]; }
.selected .tagglyTagging .hidebutton { color:[[ColorPalette::TertiaryLight]] }
.tagglyLabel { color:[[ColorPalette::TertiaryMid]]; font-size:90%; }
.tagglyTagging ul {padding-top:0px; padding-bottom:0.5em; margin-left:1em; }
.tagglyTagging ul ul {list-style-type:disc; margin-left:-1em;}
.tagglyTagging ul ul li {margin-left:0.5em; }
.editLabel { font-size:90%; padding-top:0.5em; }
.tagglyTagging .commas { padding-left:1.8em; }
/* displays the list of a tiddler's tags horizontally. used in ViewTemplate */
.tagglyTagged {
text-align: right 
}
.tagglyTagged li.listTitle {
	display:none
}
.tagglyTagged li {
	display: inline; font-size:90%;
}
.tagglyTagged ul {
	margin:0px; padding:0px;
}

TemplateShowColor

Sat, 22 Sep 2007 15:36:58 GMT

$1 $2

ViewTemplate

Sat, 22 Sep 2007 15:30:19 GMT

<div class='toolbar'>
	<span macro="showWhenTagged systemConfig">
		<span macro="toggleTag systemConfigDisable . '[[disable|systemConfigDisable]]'"></span>
	</span>
	<span style="padding:1em;"></span>
	<span macro='toolbar closeTiddler closeOthers deleteTiddler refresh permalink fullscreen references newTiddler newJournal jump +editTiddler '></span>
</div>

<div class="tagglyTagged" macro="tags"></div>

<div class='titleContainer'>
	<span class='title' macro='view title'></span>
	<span macro="miniTag"></span>
</div>

<!-- <div class='subtitle'> 	<span macro='view modifier link'></span>, created <span macro='view created date [[YYYY.0MM.0DD]]'></span>, modified <span macro='view modified date [[YYYY.0MM.0DD]]'></span></div> -->

<div macro="showWhenExists ViewPanelTemplate">[[ViewPanelTemplate]]</div>

<div macro="hideWhen tiddler.tags.containsAny(['html','pre','systemConfig']) && !tiddler.text.match('{{'+'{')">
	<div class='viewer' macro='view text wikified'></div>
</div>
<div macro="showWhen tiddler.tags.containsAny(['html','pre','systemConfig']) && !tiddler.text.match('{{'+'{')">
	<div class='viewer'><pre macro='view text'></pre></div>
</div>

<div macro="showWhenExists ViewDashboardTemplate">[[ViewDashboardTemplate]]</div>

<div class="tagglyTagging" macro="tagglyTagging"></div>

EditTemplate

Sat, 22 Sep 2007 15:29:10 GMT

<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler jump'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div>
<div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler jump'></div>

css colours

Sat, 22 Sep 2007 15:28:13 GMT

The css colours tag is used for tiddlers and tags that relate to - or define - the use of colour in Cascading Style Sheets.

css colours
- StyleSheetColors

colour
- css colours
  - StyleSheetColors

PageTemplate

Sat, 22 Sep 2007 15:14:39 GMT

<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>

css

Sat, 22 Sep 2007 15:10:28 GMT

The css tag is used for tiddlers or tags that contain or are about Cascading Style Sheets that define for layout and appearance of the web page and its elements.

tiddlywiki

languages
- css

StyleSheetColors

Sat, 22 Sep 2007 15:09:38 GMT

body {
	background: [[ColorPalette::Background]];
	color: [[ColorPalette::Foreground]];
}

a.externalLink {
 color: #007700;
}
a {
	color: [[ColorPalette::PrimaryMid]];
}

a:hover {
	background: [[ColorPalette::PrimaryMid]];
	color: [[ColorPalette::Background]];
}
a img {
	border: 0;
}

.cleartable table {
border: 1px solid #fff;
}
h1,h2,h3,h4,h5 {
	color: [[ColorPalette::PrimaryDark]];
}


.button {
	color: [[ColorPalette::PrimaryDark]];
	border: 1px solid [[ColorPalette::Background]];
}

.button:hover {
	color: [[ColorPalette::PrimaryDark]];
	background: [[ColorPalette::SecondaryLight]];
	border-color: [[ColorPalette::SecondaryMid]];
}

.button:active {
	color: [[ColorPalette::Background]];
	background: [[ColorPalette::SecondaryMid]];
	border: 1px solid [[ColorPalette::SecondaryDark]];
}

.header {
	background: [[ColorPalette::PrimaryMid]];
}

.headerShadow {
	color: [[ColorPalette::Foreground]];
}

.headerShadow a {
	font-weight: normal;
	color: [[ColorPalette::Foreground]];
}

.headerForeground {
	color: [[ColorPalette::Background]];
}

.headerForeground a {
	font-weight: normal;
	color: [[ColorPalette::PrimaryPale]];
}

.tabSelected{
	color: [[ColorPalette::PrimaryDark]];
	background: [[ColorPalette::TertiaryPale]];
	border-left: 1px solid [[ColorPalette::TertiaryLight]];
	border-top: 1px solid [[ColorPalette::TertiaryLight]];
	border-right: 1px solid [[ColorPalette::TertiaryLight]];
}

.tabUnselected {
	color: [[ColorPalette::Background]];
	background: [[ColorPalette::TertiaryMid]];
}

.tabContents {
	color: [[ColorPalette::PrimaryDark]];
	background: [[ColorPalette::TertiaryPale]];
	border: 1px solid [[ColorPalette::TertiaryLight]];
}

.tabContents .button {
	 border: 0;}

#sidebar {
}

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

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

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

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

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

.wizard {
	background: [[ColorPalette::SecondaryLight]];
	border-top: 1px solid [[ColorPalette::SecondaryMid]];
	border-left: 1px solid [[ColorPalette::SecondaryMid]];
}

.wizard h1 {
	color: [[ColorPalette::SecondaryDark]];
}

.wizard h2 {
	color: [[ColorPalette::Foreground]];
}

.wizardStep {
	background: [[ColorPalette::Background]];
	border-top: 1px solid [[ColorPalette::SecondaryMid]];
	border-bottom: 1px solid [[ColorPalette::SecondaryMid]];
	border-left: 1px solid [[ColorPalette::SecondaryMid]];
}

.wizard .button {
	color: [[ColorPalette::Background]];
	background: [[ColorPalette::PrimaryMid]];
	border-top: 1px solid [[ColorPalette::PrimaryLight]];
	border-right: 1px solid [[ColorPalette::PrimaryDark]];
	border-bottom: 1px solid [[ColorPalette::PrimaryDark]];
	border-left: 1px solid [[ColorPalette::PrimaryLight]];
}

.wizard .button:hover {
	color: [[ColorPalette::PrimaryLight]];
	background: [[ColorPalette::PrimaryDark]];
	border-color: [[ColorPalette::PrimaryLight]];
}

.wizard .button:active {
	color: [[ColorPalette::Background]];
	background: [[ColorPalette::PrimaryMid]];
	border-top: 1px solid [[ColorPalette::PrimaryLight]];
	border-right: 1px solid [[ColorPalette::PrimaryDark]];
	border-bottom: 1px solid [[ColorPalette::PrimaryDark]];
	border-left: 1px solid [[ColorPalette::PrimaryLight]];
}

#messageArea {
	border: 1px solid [[ColorPalette::SecondaryDark]];
	background: [[ColorPalette::SecondaryMid]];
	color: [[ColorPalette::PrimaryDark]];
}

#messageArea .button {
	padding: 0.2em 0.2em 0.2em 0.2em;
	color: [[ColorPalette::PrimaryDark]];
	background: [[ColorPalette::Background]];
}

.popup {
	background: [[ColorPalette::PrimaryLight]];
	border: 1px solid [[ColorPalette::PrimaryMid]];
}

.popup hr {
	color: [[ColorPalette::PrimaryDark]];
	background: [[ColorPalette::PrimaryDark]];
	border-bottom: 1px;
}

.listBreak div{
	border-bottom: 1px solid [[ColorPalette::PrimaryDark]];
}

.popup li.disabled {
	color: [[ColorPalette::PrimaryMid]];
}

.popup li a, .popup li a:visited {
	color: [[ColorPalette::TertiaryPale]];
	border: none;
}

.popup li a:hover {
	background: [[ColorPalette::PrimaryDark]];
	color: [[ColorPalette::Background]];
	border: none;
}

.tiddler .defaultCommand {
 font-weight: bold;
}

.shadow .title {
	color: [[ColorPalette::TertiaryDark]];
}

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

.subtitle {
	color: [[ColorPalette::TertiaryDark]];
}

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

.tagging, .tagged {
	border: 1px solid [[ColorPalette::TertiaryPale]];
	background-color: [[ColorPalette::TertiaryPale]];
}

.selected .tagging, .selected .tagged {
	background-color: [[ColorPalette::TertiaryLight]];
	border: 1px solid [[ColorPalette::TertiaryMid]];
}

.tagging .listTitle, .tagged .listTitle {
	color: [[ColorPalette::PrimaryDark]];
}

.tagging .button, .tagged .button {
		border: none;
}

.footer {
	color: [[ColorPalette::TertiaryLight]];
}

.selected .footer {
	color: [[ColorPalette::TertiaryMid]];
}

.sparkline {
	background: [[ColorPalette::PrimaryPale]];
	border: 0;
}

.sparktick {
	background: [[ColorPalette::PrimaryDark]];
}

.error, .errorButton {
	color: [[ColorPalette::Foreground]];
	background: [[ColorPalette::Error]];
}

.warning {
	color: [[ColorPalette::Foreground]];
	background: [[ColorPalette::SecondaryPale]];
}

.cascade {
	background: [[ColorPalette::TertiaryPale]];
	color: [[ColorPalette::TertiaryMid]];
	border: 1px solid [[ColorPalette::TertiaryMid]];
}

.imageLink, #displayArea .imageLink {
	background: transparent;
}

.viewer .listTitle {list-style-type: none; margin-left: -2em;}

.viewer .button {
	border: 1px solid [[ColorPalette::SecondaryMid]];
}

.viewer blockquote {
	[[ColorPalette::Foeground]];
}

.viewer table {
	border: 2px solid [[ColorPalette::TertiaryDark]];
}

.viewer th, thead td {
	background: [[ColorPalette::PrimaryPale]];
	color: [[ColorPalette::PrimaryDark]];
}

.viewer td, .viewer tr {
	border: 1px solid [[ColorPalette::TertiaryDark]];
}

.viewer pre {
	border: 1px solid [[ColorPalette::SecondaryLight]];
	background: [[ColorPalette::SecondaryPale]];
}

.viewer code {
	color: [[ColorPalette::SecondaryDark]];
}

.viewer hr {
	border: 0;
	border-top: solid2px [[ColorPalette::TertiaryDark]];
	color: [[ColorPalette::TertiaryDark]];
}

.box {
	background: #ccecff;
	border; 1px;
}

#mainMenu .highlight, #mainMenu .marked {
	background: [[ColorPalette::PrimaryPale]];
}

.highlight, .marked {
	background: [[ColorPalette::SecondaryLight]];
}

.editor input {
	border: 1px solid [[ColorPalette::PrimaryMid]];
}

.editor textarea {
	border: 1px solid [[ColorPalette::PrimaryMid]];
	width: 100%;
}

.editorFooter {
	color: [[ColorPalette::TertiaryMid]];
}

css template

Sat, 22 Sep 2007 15:05:05 GMT

The css template tag is used for tiddlers - or tags - that are, or that relate to Cascading Style Sheet Templates that define the overall layout of the web site or sections of the web site.

MainMenuStyles

Sat, 22 Sep 2007 15:04:05 GMT

#mainMenu {
position: absolute;
left: 0;
width: 16em;
text-align: right;
line-height: 1.6em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-top: 0.5em;
font-size: 85%;
}

#mainMenu .tiddlyLinkExisting, 
#mainMenu .tiddlyLinkNonExisting,
#sidebarTabs .tiddlyLinkNonExisting{
font-weight: normal;
font-style: normal;
}

#mainMenu table {
text-align: right;
width: 100%;
}

cascading styles

Sat, 22 Sep 2007 15:02:53 GMT

The cascading styles tag is for tiddlers that contain, or are about Cascading Styles that define the appearance and characteristics of elements of the web page.

cascading styles

StyleSheetLayout

Sat, 22 Sep 2007 14:59:56 GMT

* html .tiddler {
    height: 1%;
}

[[TagglyTaggingStyles]]
[[MainMenuStyles]]

body {
font-size: .75em;
font-family: bookman old style, garamond antigua, arial, helvetica;
margin: 0;
padding: 0;
}

#displayArea {
margin-left: 16em;
margin-right: 3em;
}

.cleartable table {
border: 0;
}

h1, h2, h3, h4, h5 {
font-weight: bold;
text-decoration: none;
}

h1 {font-size: 1.35em;}
h2 {font-size: 1.25em;}
h3 {font-size: 1.1em;}
h4 {font-size: 1em;}
h5 {font-size: .9em;}

hr {
height: 1px;
}

a {
text-decoration: none;
}

dt {font-weight: bold;}

ol { list-style-type: decimal }
ol ol { list-style-type: lower-alpha }
ol ol ol { list-style-type: lower-roman }
ol ol ol ol { list-style-type: decimal }
ol ol ol ol ol { list-style-type: lower-alpha }
ol ol ol ol ol ol { list-style-type: lower-roman }
ol ol ol ol ol ol ol { list-style-type: decimal }

.txtOptionInput {
width: 11em;
}

#contentWrapper .chkOptionInput {
border: 0;
}

.externalLink {
text-decoration: none;
font-weight: bold;
}

.indent {
margin-left: 0.5em;
padding-left: 1.5em;
}

.outdent {
margin-left:3em;
text-indent:-3em;
}

code.escaped {
white-space:nowrap;
}

.tiddlyLinkExisting {
font-weight: bold;
}

.tiddlyLinkNonExisting {
font-style: italic;
}

/* the 'a' is required for IE, otherwise it renders the whole tiddler a bold */
a.tiddlyLinkNonExisting.shadow {
font-weight: bold;
}

.header {
position: relative;
}

.header a:hover {
	background: transparent;
}

.headerShadow {
	position: relative;
	padding: 1.5em 0em 1em 1em;
	left: -1px;
	top: -1px;
}

.headerForeground {
position: absolute;
padding: 1.5em 0em 1em 1em;
left: 0px;
top: 0px;
}

.siteTitle {
font-size: 3em;
}

.siteSubtitle {
font-size: 1.2em;
}

.wizard {
padding: 0.1em 0em 0em 2em;
}

.wizard h1 {
font-size: 2em;
font-weight: bold;
background: none;
padding: 0em 0em 0em 0em;
margin: 0.4em 0em 0.2em 0em;
}

.wizard h2 {
font-size: 1.2em;
font-weight: bold;
background: none;
padding: 0em 0em 0em 0em;
margin: 0.2em 0em 0.2em 0em;
}

.wizardStep {
padding: 1em 1em 1em 1em;
}

.wizard .button {
margin: 0.5em 0em 0em 0em;
font-size: 1.2em;
}

#messageArea {
position:absolute; top:0; right:0; margin: 0.5em; padding: 0.5em;
}

*[id='messageArea'] {
position:fixed !important; z-index:99;}

.messageToolbar {
display: block;
text-align: right;
}

#messageArea a{
text-decoration: underline;
}

.popup {
font-size: .9em;
padding: 0.2em;
list-style: none;
margin: 0;
}

.popup hr {
display: block;
height: 1px;
width: auto;
padding: 0;
margin: 0.2em 0em;
}

.listBreak {
font-size: 1px;
line-height: 1px;
}

.listBreak div {
margin: 2px 0;
}

.popup li.disabled {
padding: 0.2em;
}

.popup li a{
display: block;
padding: 0.2em;
}

.tabset {
padding: 1em 0em 0em 0.5em;
}

.tab {
margin: 0em 0em 0em 0.25em;
padding: 2px;
}

.tabContents {
padding: 0.5em;
}

.tabContents ul, .tabContents ol {
margin: 0;
padding: 0;
}

.txtMainTab .tabContents li {
list-style: none;
}

.tabContents li.listLink {
 margin-left: .75em;
}

.toolbar {
text-align: right;
font-size: .9em;
visibility: hidden;
}

.selected .toolbar {
visibility: visible;
}

.tiddler {
padding: 1em 1em 0em 1em;
}

.missing .viewer,.missing .title {
font-style: italic;
}

.title {
font-size: 1.6em;
font-weight: bold;
padding-left: 1px;
}

.missing .subtitle {
display: none;
}

.subtitle {
font-size: 1.1em;
padding-left: 2px;
}

.tiddler .button {
padding: 0.2em 0.4em;
}

.tagging {
margin: 0.5em 0.5em 0.5em 0;
float: right;
display: none;
}

.isTag .tagging {
display: block;
}

.tagged {
margin: 0.5em;
}

.tagging, .tagged {
font-size: 0.9em;
padding: 0.25em;
}

.tagging ul, .tagged ul {
list-style: none;margin: 0.25em;
padding: 0;
}

.tagClear {
clear: both;
}

.footer {
font-size: .9em;
}

.footer li {
display: inline;
}

* html .viewer pre {
width: 99%;
padding: 0 0 1em 0;
}

.viewer {
line-height: 1.4em;
padding-left: 1em;
}

.viewer .button {
margin: 0em 0.25em;
padding: 0em 0.25em;
}

.viewer blockquote {
margin-left: 0.5em;
padding-left: 1.5em;
}

.viewer ul, .viewer ol{
margin-left: 0.5em;
padding-left: 1.5em;
}

.viewer li {
margin-top: 0.8em;
}

.viewer table {
border-collapse: collapse;
margin: 0.5em 0.5em;
}

.viewer th, .viewer td, .viewer tr,.viewer caption{
vertical-align: top;
padding: 1px;
}

.viewer table.listView {
font-size: 0.85em;
margin: 0.8em 1.0em;
}

.viewer table.listView th, .viewer table.listView td, .viewer table.listView tr {
padding: 0px 2px 0px 2px;
}

.viewer pre {
padding: 0.2em;
font-size: 0.9em;
line-height: 110%;
overflow: auto;
}

.viewer code {
font-size: 90%;
}

.editor {
font-size: 1.1em;
}

.editor input, .editor textarea {
display: block;
width: 100%;
font: inherit;
}

.editorFooter {
padding: 0.25em 0em;
font-size: .9em;
}

.editorFooter .button {
padding-top: 0px; padding-bottom: 0px;}

.fieldsetFix {border: 0;
padding: 0;
margin: 1px 0px 1px 0px;
}

.sparkline {
line-height: 1em;
}

.sparktick {
outline: 0;
}

.zoomer {
font-size: 1.1em;
position: absolute;
padding: 1em;
}

.cascade {
font-size: 1.1em;
position: absolute;
overflow: hidden;
}