Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

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

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.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::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background::[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

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

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

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

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.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]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

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

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable 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:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.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]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity:60)';}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
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:underline;}

.indent {margin-left:3em;}
.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 in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

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

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 1em 1em; left:0px; top:0px;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0em 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 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.4em 0em 0.2em 0em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0em 0em 0em; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0em;}
.wizardFooter .status {padding:0em 0.4em 0em 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em 0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0em; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em 0.2em 0.2em 0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0em;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.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;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0em 14em;}

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

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

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

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

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

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.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;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0em 0.25em; padding:0em 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.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; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which use a logographic writing system and need larger font sizes.
***/

/*{{{*/
body {font-size:0.8em;}

#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}

.subtitle {font-size:0.8em;}

.viewer table.listView {font-size:0.95em;}

.htmlarea .toolbarHA table {border:1px solid ButtonFace; margin:0em 0em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton {display: none ! important;}
#displayArea {margin: 1em 1em 0em 1em;}
/* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
noscript {display:none;}
}
/*}}}*/
<!--{{{-->
<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='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler > fields syncing permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></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>
<!--}}}-->
To get started with this blank TiddlyWiki, you'll need to modify the following tiddlers:
* SiteTitle & SiteSubtitle: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* MainMenu: The menu (usually on the left)
* DefaultTiddlers: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
These InterfaceOptions for customising TiddlyWiki are saved in your browser

Your username for signing your edits. Write it as a WikiWord (eg JoeBloggs)

<<option txtUserName>>
<<option chkSaveBackups>> SaveBackups
<<option chkAutoSave>> AutoSave
<<option chkRegExpSearch>> RegExpSearch
<<option chkCaseSensitiveSearch>> CaseSensitiveSearch
<<option chkAnimate>> EnableAnimations

----
Also see AdvancedOptions
[[Welcome]]
My first step was to understand the file setup of a theme. It is quite simple:
Create a directory with the name of your theme under the SilverStripe subdirectory //themes// with the following subdirectories:
*css
*images
*templates
I called this first theme mow001 (my initials).

I then created a file names //Page.ss// in the templates directory with the following content:
/*{{{*/
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<% base_tag %>
		$MetaTags
		<!--[if IE 6]>
			<style type="text/css">
				@import url(themes/mow001/css/ie6.css);
			</style> 
		<![endif]-->
		<!--[if IE 7]>
			<style type="text/css">
				@import url(themes/mow001/css/ie7.css);
			</style> 
		<![endif]-->
	</head>
/*}}}*/
The beginning of the file is defined by Silverstripe until the end of the <head> block. It takes care of the high compatibility of microsoft products and Silverstripe fills in the right variables for your site when rendering the page.
It becomes interesting when the <body> tag starts. The page is split in certain container. The nesting of the containers is shown in the following drawing:
[img[framework.png]]
You will find all the containers as <div id="name of the square"> in the Page.ss file. 
/*{{{*/
	<body>
		<div id="Main">
/*}}}*/
Within the main container, the header is the first container with two subcontainers 
/*{{{*/
			<div id="Header">
				<div id="HeaderLeft">
					<h1>Theme MOW001</h1>
					<p>Theme from scratch</p>
				</div>
				<div id="HeaderRight">
					<% include Animation1 %>
				</div>
			</div>
/*}}}*/
The next is the container holding the navigation
/*{{{*/
			<div id="Navigation">
				<% include Navigation %>
			</div>
			<div class="clear"></div>
/*}}}*/
And here comes the page content. This is speciality I wanted to have. You can find a directive <% if Menu(2) %> that checks, if the current page has sub-pages linked to it. In that case, the Page.ss file reders two squares, one to hold the page content and one to hold the submenu. If there are no sub-pages, I want to use the full width of the box (ContainerWide).
/*{{{*/
			<% if Menu(2) %>
				<div id="SideBar">
					<% include SideBar %>
				</div>
				<div id="ContainerSmall">
					<div class="breadcrumbs">
						$Breadcrumbs
					</div>
					$Content
					$Form
				</div>
			<% else %>
				<div id="ContainerWide">
					<div class="breadcrumbs">
						$Breadcrumbs
					</div>
					$Content
					$Form
				</div>
			<% end_if %>
			<div class="clear"></div>
/*}}}*/
Finally the footer container
/*{{{*/
			<div id="Footer">
				<% include Footer %>
			</div>
/*}}}*/
And we close the main container
/*{{{*/
		</div>
	</body>
</html>
/*}}}*/

So far, this looks ugly but we are only at the start.

The look of these squares on the web browser is controled via [[css]]. This is explained in the [[Second Step]]. 
The little details come in [[Third Step]]
Dr. Mathias Wilhelm
Neuweg 3/1
79 415 Bad Bellingen
Telefon/ Telefax: +49 7635 821561
E-Mail: mathias.wilhelm@freenet.de
Internet: www.mathias-wilhelm.de

Inhaltlich Verantwortlicher gemäß § 55 Abs. 2 RStV: Dr. Mathias Wilhelm (Anschrift wie oben)

Haftungshinweis: Trotz sorgfältiger inhaltlicher Kontrolle übernehme ich keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.

Der [[Märklin-Schriftzug|http://www.maerklin.de/de/produkte/spur_h0/gleismaterial/cgleis/produkte.html]] und das [[Märklin-Logo|http://www.maerklin.de/de/produkte/spur_h0/gleismaterial/cgleis/produkte.html]] sind eingetragene Marken der [[Gebr.Märklin & Cie.GmbH|http://www.maerklin.de/de/produkte/spur_h0/gleismaterial/cgleis/produkte.html]].
[[Welcome]]
[[SilverStripe]]
[[First Step]]
[[Second Step]]
[[Third Step]]
[[Summary]]
[[Impressum]]
<<closeAll>><<permaview>><<newTiddler>><<newJournal 'DD MMM YYYY'>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel 'options »' 'Change TiddlyWiki advanced options'>>
Last Change: 25.02.2009
Copyright © M. Wilhelm
<!--{{{-->
<div id='header' class='header'>
<div class='headerShadow'>
<span class='searchBar' macro='search'></span>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>

</div>
<div id='mainMenu'>
<span refresh='content' tiddler='MainMenu'></span>
<span id='noticeBoard' refresh='content' tiddler='NoticeBoard'></span>

</div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='MochaSideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<div id='contentFooter' refresh='content' tiddler='contentFooter'></div>
<!--}}}-->
In the second step I now address each of the <div> elements and their formatting via CSS
All CSS files are located in the subdirectory css of the themes directory. SilverStripe looks for a file called layout.css to find your directives for the elemnts. If nothing is found, then it reverts back to its defaults or simply does nothing. This has led to the ugly appearence of the outcome of the [[First Step]].

As a start I took a look at the file layout.css, that comes with the default installation of Silverstripe and changed it to the following
Let´s go through it from the top
/*{{{*/
*{
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
/*}}}*/
This sets the overall padding and margin to 0px for any element. So we are not fighting with inherited margins and padding that screws up our layout.
/*{{{*/
html{
	background:#ffffff;
	background-image: url(../images/fract0.png);

}
/*}}}*/
This statement defines the whiole page settings, in our case a white background with a background image I generated using a fractal generator (xeos)
/*{{{*/
.clear{
	clear:both;
	font-size:0px;
	line-height:0px;
	height:0px;
}
/*}}}*/
This statement I inherited from the default layout.css. It is used to force IE and Firefox to render the page the same way. If you want to see the impact, remove the <div class="clear"></div> lines in Page.ss and whatch how IE and Firefox render the page...
/*{{{*/
#Main{
	width:800px;
	margin-left:auto;
	margin-right:auto;
	background:#dddddd;
	filter: alpha(opacity=90);
	opacity: 0.9;
	-moz-opacity: 0.9;
}
/*}}}*/
This is the formatting of the main container (see [[First Step]]). I decided to make it 800px wide and give it a gray background. In the following I will give all elements a different gray background so that you can see where the elemnts show up on the page. This is not beautiful but illustrative. We come to better colors later ([[Third Step]]). 
In addition, I have added three lines that introduce a thing called opacity. This will make the background shine through, a feature I want to use later. If you do not want anything to shine through, set the values to 1.0 (resp. 100)
/*{{{*/
#ContainerSmall{
	width:600px;
	float:left;
	background:#bbbbbb;
}
/*}}}*/
As mentioned before, I want to render the main page content depending on the existance of subpages. This is the small container that will be only 600 pixel wide, leaving 200 pixel for the submenu. I decided to have this container on the left side.
/*{{{*/
#ContainerWide{
	width:800px;
	float:left;
	background:#999999;
}
/*}}}*/
And now the wide container spanning the full 800 pixel of the main container
/*{{{*/
#Header{
	height:100px;
	background:#777777;
}
/*}}}*/
The header is simply defined to be 100 pixel high
/*{{{*/
#HeaderLeft{
	height:100px;
	width:450px;
	float:left;
	background:#ababab;
}
/*}}}*/
The left container of the header I decided to be a bit off balance with the right one, making it 450 pixel wide
/*{{{*/
#HeaderRight{
	height:100px;
	width:350px;
	float:right;
	background:#cfcfcf;
}
/*}}}*/
leaving only 350 pixel for the right container
/*{{{*/
#SideBar{
	width:200px;
	float:right;
	padding-top:10px;
	background:#a5a5a5;
}
/*}}}*/
This is the sidebar container with the remaining 200 pixel width from the ContainerSmall above. The padding takes care, that the menu items are slightly shifted away from the edge of the container
/*{{{*/
#Navigation{
	height:34px;
	background:#333333;
	overflow:hidden;
}
/*}}}*/
Navigation is essentially a horizontan bar of 34 pixel height
/*{{{*/
#Footer{
	margin:0px 0px;
	background:#a0a0a0;
	height:20px;
	padding:5px;
	bottom:0px;
}
/*}}}*/
Finally the definition of the footer container and the page layout is done. Now for Navigation and Sidebar, I want to add some formatting for the list items that are used to display the navigation items and subpages:
/*{{{*/
#Navigation ul{
	list-style:none;
	list-style-type:none;
}
#Navigation ul li{
	float:left;
	padding:5px;
	border-right:#7c7b7b 2px solid;
}
#Navigation ul li:hover{
	background:#441415;
}

#SideBar ul{
	list-style:none;
	list-style-type:none;
}
/*}}}*/
And we are done. The page is still not a real beauty but it show nicely where the containers lie and what sizes they have. 

As a final item in this step, I want to add an animated picture and a SMF based animation. The SMF animation is a bit tricky, as the browsers treat the statements slightly different. For tidyness I have written the SMF statements into a file called "animation1.ss" that I placed in the subdirectory "includes".
/*{{{*/
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000" width="133" height="100" 
	codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0">
	<param name="movie" value="themes/mow001/images/test2.swf"></param>
	<param name="quality" value="high"></param>
	<param name="scale" value="exactfit"></param>
	<param name="menu" value="true"></param>
	<param name="bgcolor" value="#000040"></param>
	<embed src="themes/mow001/images/test2.swf" quality="high" scale="exactfit" menu="false"
		   bgcolor="#000000" width="133" height="100" swLiveConnect="false"
		   type="application/x-shockwave-flash"
		   pluginspage="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">
	</embed>
</object>
/*}}}*/
The path to the file appears twice but it has to be that way or IE will have trouble. In the file Page.ss I added the following two lines to display the SWF file and an animated gif in the right header container
/*{{{*/
	<div id="HeaderRight">
		<p><% include Animation1 %>
		<img src="themes/mow002/images/test.gif" width="170" height="100"></p>
	</div>
/*}}}*/

Now in the [[Third Step]] we add pictures and style to our page.
Visit http://www.silverstripe.org for more
A simple approach to setup a theme
Tutorial for SilverStripe
/*{{{*/
/*Mocha TiddlyWiki Theme*/
/*Version 1.0*/
/*Design and CSS originally by Anthonyy, ported to TiddlyWiki by Saq Imtiaz.*/
/*}}}*/
/*{{{*/
 #contentWrapper{
margin: 0 3.4em;

			font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11px;
			line-height: 1.6em;
			color: #666;
}

.header {
 background: #fff; 
			padding-top: 10px;
			clear: both;

border-bottom: 4px solid #948979;
}

.headerShadow {	padding: 2.6em 0em 0.5em 0em; }

.siteTitle {
			font-family: 'Trebuchet MS' sans-serif;
			font-weight: bold;
			font-size: 32px;
			color: #CC6633;
			margin-bottom: 30px;
			background-color: #FFF;
}

.siteTitle a{color:#CC6633; border-bottom:1px dotted #cc6633;}

.siteSubtitle {
	font-size: 1.0em;
        display: block;
        margin: .5em 3em; color: #999999;
}

#mainMenu {
position:relative;
float:left;
margin-bottom:1em;
display:inline;
text-align:left;
padding: 2em 0.5em 0.5em 0em;
width:13em;
font-size:1em;
}

#sidebar{
position:relative;
float:right;
margin-bottom:1em;
padding-top:2em;
display:inline;

}

#displayArea {
	margin: 0em 17em 0em 15em;
}

.tagClear {clear:none;}

#contentFooter {background:#575352; color:#BFB6B3; clear: both; padding: 0.5em 1em;}

		
		#contentFooter a {
			color: #BFB6B3;
			border-bottom: 1px dotted #BFB6B3;
		}
		
		#contentFooter a:hover {
			color: #FFFFFF;
			background-color:#575352;
		}

		a,#sidebarOptions .sliderPanel a{
			color:#CC6714;
			text-decoration: none;
		}

		a:hover,#sidebarOptions .sliderPanel a:hover {
			color:#CC6714;
			background-color: #F5F5F5; 
		}

.viewer .button, .editorFooter .button{
	color: #666;
	border: 1px solid #CC6714;
}

.viewer .button:hover, 
.editorFooter .button:hover{
	color: #fff;
	background: #CC6714;
	border-color: #CC6714;
}

.viewer .button:active, .viewer .highlight,.editorFooter .button:active, .editorFooter .highlight{color:#fff; background:#575352;border-color:#575352;}


		#mainMenu a {
			display: block;
			padding: 5px;
			border-bottom: 1px solid #CCC;
		}

		#mainMenu a:link, #navlist a:visited {
			color:#CC6714;
			text-decoration: none;
		}
		
		#mainMenu a:hover {
			background: #000000 url(arrow.gif) 96% 50% no-repeat;
			background-color: #F5F5F5;
			color:#CC6714;
		}
		
		#mainMenu a:hover, #mainMenu a:active, #mainMenu .highlight, #mainMenu .marked {
			background: #000000 url(arrow.gif) 96% 50% no-repeat;
			background-color: #F5F5F5;
			color:#CC6714;
		}

#mainMenu span {position:relative;}

#mainMenu br {display:none;}

#sidebarOptions a {
			color:#999;
			text-decoration: none;
		}

#sidebarOptions	a:hover {
			color:#4F4B45;
			background-color: #F5F5F5;border:1px solid #fff;
		}

#sidebarOptions {line-height:1.4em;}

		.tiddler {
			padding-bottom: 40px;
			border-bottom: 1px solid #DDDDDD; 
		}
.title {color:#CC6633;}
.subtitle, .subtitle a { color: #999999; font-size: 1.0em;margin:0.2em;}
.shadow .title{color:#948979;}

.selected .toolbar a {color:#999999;}
.selected .toolbar a:hover {color:#4F4B45; background:transparent;border:1px solid #fff;}

.toolbar .button:hover, .toolbar .highlight, .toolbar .marked, .toolbar a.button:active{color:#4F4B45; background:transparent;border:1px solid #fff;}

 .listLink,#sidebarTabs .tabContents {line-height:1.5em;}
 .listTitle {color:#888;}

#sidebarTabs .tabContents {background:#fff;}
#sidebarTabs .tabContents .tiddlyLink, #sidebarTabs .tabContents .button{color:#999;}
#sidebarTabs .tabContents .tiddlyLink:hover,#sidebarTabs .tabContents .button:hover{color:#4F4B45;background:#fff}

#sidebarTabs .tabContents .button:hover, #sidebarTabs .tabContents .highlight, #sidebarTabs .tabContents .marked, #sidebarTabs .tabContents a.button:active{color:#4F4B45;background:#fff}

.tabSelected{color:#fff; background:#948979;}

.tabUnselected {
 background: #ccc;
}

 .tabSelected, .tabSelected:hover {
 color: #fff;
 background: #948979;
 border: solid 1px #948979;
padding-bottom:1px;
}

 .tabUnselected {
 color: #999;
 background: #eee;
 border: solid 1px #ccc;
padding-bottom:1px;
}

#sidebarTabs .tabUnselected { border-bottom: none;padding-bottom:3px;}
#sidebarTabs .tabSelected{padding-bottom:3px;}


#sidebarTabs .tabUnselected:hover { border-bottom: none;padding-bottom:3px;color:#4F4B45}

#sidebarOptions .sliderPanel {
	background: #fff; border:none;
	font-size: .9em;
}
#sidebarOptions .sliderPanel a {font-weight:normal;}
#sidebarOptions .sliderPanel input {border:1px solid #999;}

.viewer blockquote {
	border-left: 3px solid #948979;
}

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

.viewer th, thead td {
	background: #948979;
	border: 1px solid #948979;
	color: #fff;
}
.viewer pre {
	border: 1px solid #948979;
	background: #f5f5f5;
}

.viewer code {
	color: #2F2A29;
}

.viewer hr {
	border-top: 1px solid #cccccc;
}

.editor input {
	border: 1px solid #948979;
}

.editor textarea {
	border: 1px solid #948979;
}

.popup {
	background: #948979;
	border: 1px solid #948979;
}

.popup li.disabled {
	color: #000;
}

.popup li a, .popup li a:visited {
	color: #eee;
	border: none;
}

.popup li a:hover {
	background: #575352;
	color: #fff;
	border: none;
}

.tagging, .tagged {
	border: 1px solid #eee;
	background-color: #F7F7F7;
}

.selected .tagging, .selected .tagged {
	background-color: #eee;
	border: 1px solid #BFBAB3;
}

 .tagging .listTitle, .tagged .listTitle {
	color: #bbb;
}

.selected .tagging .listTitle, .selected .tagged .listTitle {
	color: #666; 
}

.tagging .button, .tagged .button {
		color:#aaa;
}
.selected .tagging .button, .selected .tagged .button {
		color:#4F4B45;
}

.highlight, .marked {background:transparent; color:#111; border:none; text-decoration:underline;}

.tagging .button:hover, .tagged .button:hover, .tagging .button:active, .tagged .button:active {
		border: none; background:transparent; text-decoration:underline; color:#000;
}

h1,h2,h3,h4,h5 { color: #666; background: transparent; padding-bottom:2px; font-family: Arial, Helvetica, sans-serif; }
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size: 14px;}

#messageArea {
	border: 4px solid #948979;
	background: #f5f5f5;
	color: #999;
        font-size:90%;
}

#messageArea a:hover { background:#f5f5f5;}

#messageArea .button{
	color: #666;
	border: 1px solid #CC6714;
}

#messageArea .button:hover {
	color: #fff;
	background: #948979;
	border-color: #948979;
}


* html .viewer pre {
	margin-left: 0em;
}

* html .editor textarea, * html .editor input {
	width: 98%;
}

.searchBar {float:right;font-size: 1.0em;}
.searchBar .button {color:#999;display:block;}
.searchBar .button:hover {border:1px solid #fff;color:#4F4B45;}
.searchBar input {			
                        background-color: #FFF;
			color: #999999;
			border: 1px solid #CCC;		margin-right:3px;
}

#sidebarOptions .button:active, #sidebarOptions .highlight {background:#F5F5F5;}

*html #contentFooter { padding:0.25em 1em 0.5em 1em;}

#noticeBoard {font-size: 0.9em; color:#999; position:relative;display:block;background:#fff; clear: both; margin-right:0.5em; margin-top:60px; padding:5px; border-bottom: 1px dotted #CCC; border-top: 1px dotted #CCC;}
#mainMenu #noticeBoard a,#mainMenu #noticeBoard .tiddlyLink {display:inline;border:none;padding:5px 2px;color:#DF9153 }
#noticeBoard a:hover {border:none;}	

#noticeBoard br {display:inline;}

#mainMenu #noticeBoard  .button{
	color: #666;
	border: 1px solid #DF9153;padding:2px;
}

#mainMenu #noticeBoard  .button:hover{
	color: #fff;
	background: #DF9153;
	border-color: #DF9153;
}

.searchbar {position:relative; width:11em;}
.searchbar .button{margin:0; width:11em;}
#header {display:inline-block;}
/*}}}*/
Now after these three steps, the tutorial is complete. At the end, you have a simple theme that you can use as start for your own theme. It took me about a day to convert this theme into a new theme for a friend of mine.

The complete theme is located here: http://www.mathias-wilhelm.de/silverstripe_tutorial/mow002.tar.gz

Have fun using it
When moving to add graphics to the theme, I use the CSS feature, that each container can load an image as background. 
But before I start, I design the look of the page in a graphic program like Xara:
[img[design.jpg]]
The design is intentionally kept simple because I want to show the way to convert this design to a theme and not elaborate on artwork. This is left in your capable hands.

This design is now cut in peaces:
Header left and right:
[img[hl.jpg]] [img[hr.jpg]]
Navigation:
[img[nav.jpg]]
Center Top, middle and bottom
[img[ct.jpg]]
[img[cm.jpg]]
[img[cb.jpg]]
As the middle picture is filling the page depending on the size repetitively, small artifacts may show up. 
For the Page with a sub-menu, I have to create the same triplet for the center left container and the sidebar container:
[img[cslt.jpg]]
[img[cslm.jpg]]
[img[cslb.jpg]]
The files for the Sidebar are:
[img[csrt.jpg]]
[img[csrm.jpg]]
[img[csrb.jpg]]

Now to assign these images to the containers, we have to add lines to the layout.css file we worked on in [[Step Two]]
For each center container that has a top and bottom image I had to add a <div> section before and after the container to place the top and bottom page. I used the name of the container followed by a T or B.

The important line to look for is the //background-image: url(../images/imagename.jpg);// statement that points to the image file. I also has to play a bit with padding and margin to position the text nicely.

/*{{{*/
*{
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
html{
	background:#fdfaf3;
}
.clear{
	clear:both;
	font-size:0px;
	line-height:0px;
	height:0px;
}

#Main{
	width:800px;
	margin-left:auto;
	margin-right:auto;
	background:#fdfaf3;
	filter: alpha(opacity=100);
	opacity: 1.0;
	-moz-opacity: 1.0;
}

#ContainerSmallT{
	width:590px;
	height:17px;
	float:left;
	background:#bbbbbb;
	background-image: url(../images/cslt.jpg);	
}
#ContainerSmall{
	width:590px;
	float:left;
	background:#bbbbbb;
	background-image: url(../images/cslm.jpg);	
}
#ContainerSmall *{
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 0px 10px;
}
#ContainerSmallB{
	width:590px;
	height:17px;
	float:left;
	background:#bbbbbb;
	background-image: url(../images/cslb.jpg);	
}
#ContainerWideT{
	width:800px;
	height:15px;
	float:left;
	background:#990099;
	background-image: url(../images/ct.jpg);	
}
#ContainerWide{
	width:800px;
	float:left;
	background:#999999;
	background-image: url(../images/cm.jpg);	
}
#ContainerWide *{
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 0px 10px;
}
#ContainerWideB{
	width:800px;
	height:15px;
	float:left;
	background:#999900;
	background-image: url(../images/cb.jpg);	
}

#Banner{
	width:800px;
	float:left;
	background:#999999;
	background-image: url(../images/cm.jpg);	
}
#Banner *{
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 0px 10px;

}

#Header{
	height:127px;
	background:#777777;
}
#HeaderLeft{
	height:127px;
	width:400px;
	float:left;
	background:#ababab;
	background-image: url(../images/hl.jpg);	
}
#HeaderLeft h1{
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
}
#HeaderLeft p{
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
}
#HeaderRight{
	height:127px;
	width:400px;
	float:right;
	background:#cfcfcf;
	background-image: url(../images/hr.jpg);
}
#HeaderRight h1{
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
}
#HeaderRight p{
	padding: 0px 0px 0px 25px;
	margin: 15px 0px 0px 25px;
}

#Navigation{
	width:800;
	height:53px;
	background:#333333;
	overflow:hidden;
	background-image: url(../images/nav.jpg);	
}
#Navigation ul{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 10px;
	list-style:none;
	list-style-type:none;
}
#Navigation ul li{
	float:left;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 0px;
	margin-right: 0px;
	border-right:#edeae3 2px solid;
}
#Navigation ul li:hover{
	background:#edeae3;
}

#SideBarC{
	width:210px;
	height:17px;
	float:right;
	background:#bbbbbb;
}
#SideBarT{
	width:210px;
	height:17px;
	float:right;
	background:#bbbbbb;
	background-image: url(../images/csrt.jpg);	
}
#SideBar{
	width:210px;
	float:right;
	padding-top:10px;
	background-image: url(../images/csrm.jpg);
}
#SideBar *{
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 0px 10px;
}
#SideBarB{
	width:210px;
	height:17px;
	float:right;
	background-image: url(../images/csrb.jpg);
}
#SideBar ul{
	list-style:none;
	list-style-type:none;
}

#Footer{
	background:#a0a0a0;
	height:57px;
	background-image: url(../images/ft.jpg);	
}

#Footer p {
	padding-top: 15px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
/*}}}*/
Welcome to my simple tutorial to setup SilverStripe

I was quite amazed when I saw the SilverStripe homepage and the possibilities that came to my hand with SilverStripe. So I downloaded it and installed it pn my PC to test. All went well and I retrieved some themes.

Then I looked at the tutorial and found it hard to follow for someone new to the concept. After some hard hours I now have a framework that allows me to create themes in an easy way without compromizing the capabilities of SilverStripe.

As SilverStripe is shared for free I want to share this framework with others
[[TiddlyWiki|http://www.tiddlywiki.com]] © Osmosoft
http://de.selfhtml.org/navigation/css.htm
//{{{
//This ensures that the footer sticks to the bottom of the screen when there are no tiddlers open. If that is not desirable, it can be deleted.
function setFooter() {
         if (document.getElementById && document.getElementById("contentFooter") ) {
            var windowHeight=findWindowHeight();
         if (windowHeight>0) {
            var contentHeight= document.getElementById('mainMenu').offsetHeight + document.getElementById("header").offsetHeight + document.getElementById("contentFooter").offsetHeight;
            var menu= document.getElementById('mainMenu');
            if (windowHeight-(contentHeight)>=0) {
               menu.style.position='relative';
               menu.style.marginBottom=(windowHeight-(contentHeight))+'px';
               }
            else {
                 menu.style.position='';
                 menu.style.marginBottom='';
                 }
            }
         }
}
window.onresize = function() {
  setFooter();
}

Story.prototype.refreshTiddler_footerhack=Story.prototype.refreshTiddler;
Story.prototype.refreshTiddler = function (title,template,force)
{    
var theTiddler = Story.prototype.refreshTiddler_footerhack.apply(this,arguments);
setFooter();
   return theTiddler;}

//}}}