Customisations on hairyraho.com

20100131 Silverstripe 2.3.5 but template running since 2.2.2

navigation.ss with dynamic menus, breadcrumbs & child links, + search menu on page named Search

themes/vista//templates/page.ss
<?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" lang="en" >

<head>
<% base_tag %>
$MetaTags

<!--[if IE 6]>
<style type="text/css">
@import url(themes/Vista/css/ie6.css);
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
@import url(themes/Vista/css/ie7.css);
</style>
<![endif]-->
</head>
<body>
<div id="BgContainer">
<div id="Container">
<div id="Header">
<h1>HairyRaho.com</h1>
<p>A personal repository of random information in compensation for a fatigued biological computer</p>
</div>

<div class="clear"><!-- --></div>
<br />

<div id="Navigation">
<% include Navigation %>
</div>

<div id="Layout">
$Layout
</div>

<% if Title = "Search" %>

<hr />
$SearchForm
<% end_if %>

<div class="clear"><!-- --></div>
</div>

</div>

</body>
</html>
themes/vista/templates/includes/Breadcrumbs.ss
<% if Level(2) %>
<div id="Breadcrumbs">
<p>$Breadcrumbs</p>
</div>
<% end_if %>
themes/vista/templates/includes/children.ss
<ul id="MenuChildren">
<% control children %>
<li>
<a href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
</li>
<% end_control %>
</ul>
themes/vista/templates/includes/navigation.ss
<ul id="skelnav">
<% control Menu(1) %>
<li>
<a href="$Link" title="Go to the $Title.XML page">$MenuTitle
<% if Children %>
&#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle
<% if Children %>&#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle
<% if Children %>&#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle
<% if Children %>&#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle
<% if Children %>&#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle
<% if Children %>&#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle
<% if Children %>&#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>



<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle</a></li>
<% end_control %>



</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--><% else %></a>
<% end_if %>
</li>
<% end_control %>


</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--><% else %></a>
<% end_if %>
</li>
<% end_control %>



</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--><% else %></a>
<% end_if %>
</li>
<% end_control %>



</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--><% else %></a>
<% end_if %>
</li>
<% end_control %>



</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--><% else %></a>
<% end_if %>
</li>
<% end_control %>


</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--><% else %></a>
<% end_if %>
</li>
<% end_control %>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<% else %>
</a>
<% end_if %>
</li>
<% end_control %>
</ul>

<% include BreadCrumbs %>

<% if Children %>
<% include Children %>
<% end_if %>
themes/vista/css/layoutg.css
/*
Started from SilverStripe Windows Vista Theme
http://www.silverstripe.com

Modified layout & menuing
*/

/************
* Misc Styles and defaults
*/

* {
margin: 0;
padding: 0;
}
body {
color: #444444;
font-size: 64.5%;
margin-bottom: 40px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}

a {color:#000;}
a:visited {color:#111;}
a:active {color:#222;}
a:hover {text-decoration:none;}

table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}

html {
background-attachment: fixed;
background-color: #FFFFFF;
background-image: url(../images/background.jpg);

}
.clear{
clear: both;
}
img {
border: 4px solid #E9E9E9;
}

/**************
Site Container Box
*/

#BgContainer {
background-color: #FFFFFF;
border: solid #444444;
border-width: 0px 1px 1px 1px;
/* width: 960px; */
width: 100%
margin: 0 auto;
filter: alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;
}
#Container {
/* width: 960px; */
width: 100%
padding-bottom: 15px;
}

#Layout {
/* width: 920px; */
width: 99%;
clear: both;
overflow: hidden;
margin: 1% auto;
}
#Content {
/* width: 698px; */
width: 30%
float: right;
margin: 0;
text-align: left;
}
/** Header **/
#Header {
/* width: 928px; */
width: 100%
margin: 0 auto;
overflow: hidden;
}

#Header h1 {
color: #3E91C4;
font-size: 3.2em;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: 300;
padding: 20px 0 0 30px;
}
#Header p {
font-size: 1.4em;
color: #444444;
clear: left;
margin: 0 0 0 100px;
}



/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/skeleton.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#skelnav,
#skelnav ul {padding:0 0 5px 0; margin:0; list-style:none; font: bold 10px verdana, sans-serif; border:1px solid #000; border-color:#eca #b97 #a86 #edb; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#skelnav {height:25px; padding:0;margin:1% auto;}

#skelnav table {border-collapse:collapse;}
/*#skelnav li {float:left; padding:0 20px 0 10px;}*/
#skelnav li {float:left; padding:0 10px 0 5px;}
#skelnav li li {float:none;}
/* a hack for IE5.x and IE6 */
#skelnav li a li {float:left;}

#skelnav li a {display:block; float:left; color:#888; height:25px; padding-right:5px; line-height:25px; text-decoration:none; white-space:nowrap;}
#skelnav li li a {height:20px; line-height:20px; float:none;}

#skelnav li:hover {position:relative; z-index:300; background:#fff;}
#skelnav a:hover {position:relative; z-index:300; text-decoration:underline; color:#b75;}

#skelnav :hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
#skelnav a:hover ul {left:-10px;}

#skelnav ul {position:absolute; left:-9999px; top:-9999px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#skelnav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#skelnav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#skelnav li:hover > a {text-decoration:underline; color:#b75;}


/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
#skelnav a:hover a:hover ul,
#skelnav a:hover a:hover a:hover ul,
#skelnav a:hover a:hover a:hover a:hover ul,
#skelnav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:-1px;}

/* keep further levels hidden */
#skelnav a:hover ul ul,
#skelnav a:hover a:hover ul ul,
#skelnav a:hover a:hover a:hover ul ul,
#skelnav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}


/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */

/*.menu {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(../images/button1.gif); position:relative; margin: 15px 0px 0px 0px;} */
.menu {padding:0 0 0 32px; margin:0; list-style:none; background:#fff url(../images/button1.gif); position:relative; margin: 15px 0px 0px 0px;}
.menu li {float:left;}
.menu li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:12px; font-family:Verdana, Helvetica, Arial, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu li a b {float:left; display:block; padding:0 16px 0 8px; color:#aaa;}
.menu li.current a {color:#fff; background:url(../images/button3.gif);}
.menu li.current a b {background:url(../images/button3.gif) no-repeat right top; color:#fff;}
.menu li a:hover {color:#fff; background:#000 url(../images/button2.gif);}
.menu li a:hover b {background:url(../images/button2.gif) no-repeat right top; color:#fff;}
.menu li.current a:hover {color:#fff; background:#000 url(../images/button3.gif); cursor:default;}
.menu li.current a:hover b {background:url(../images/button3.gif) no-repeat right top;}

/** Breadcrumbs **/
#Breadcrumbs {
color: #444444;
text-align: left;
font-size: 10px;
margin: 0px 5px 10px 0;
}
#Breadcrumbs p {
color: #444444;
margin: 0;
}

#Breadcrumbs a {
color: #999999;
margin: 0;
}

/*** Message Boxs ***/

.message {
margin: 15px;
padding: 5px;
width: 92%;
color: #979908;
border: 4px solid #F7F8B4;
background: #FFFFEA;
}
span.middleColumn .message {
margin: 4px 0 0 3px;
}
.required {
margin: 4px 0 0 3px;
padding: 5px;
width: 92%;
color: #DC1313;
border: 4px solid #FF7373;
background: #FED0D0;
}

p#Remember label {
margin: -24px 0 0 20px;
text-align: left;
}
.entry {
border-bottom: 1px solid #eee;
}
/* Sidebar
***********************************/
#Sidebar {
color: #444444;
float: left;
font-size: 10px;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* width: 200px; */
width: 21%
}

#Sidebar div.sidebarBox {
border: solid #444444;
border-width: 0px 1px 1px 1px;
margin: 0px 0px 15px 0px;
padding: 0px 0px 5px 0px;
}

#Sidebar ul {
margin: 2px 0px 5px 8px;
}

#Sidebar li {
list-style: none;
margin: 8px 2px 8px 2px;
}

#Sidebar h3 {
background-image: url(../images/menu-background.gif);
background-repeat: repeat-x;
clear: both;
color: #FFFFFF;
font-size: 12px;
font-weight: 700;
height: 35px;
line-height: 35px;
margin: 0px 0px 10px 0px;
padding: 1px 0px 0px 10px;
}

#Sidebar a em {
font-style: normal;
font-size: 12px;
}

ul#Menu2 {
margin: 0px 0px 0px 0px;
}

ul#Menu2 li {
font-size: 10px;
list-style: none;
margin: 1px 0px 5px 4px;
}

ul#Menu2 li a {
color: #444444;
display: block;
text-indent: 4px;
font-size: 10px;
height: 18px;
line-height: 18px;
}

ul#Menu2 li a:hover {
text-decoration: none;
}

ul#Menu2 li a.current {
font-weight: 700;
}

ul#Menu2 li a:hover.current {
text-decoration: none;
}

ul#Menu2 li ul li {
display: inline;
font-size: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 160px;
}

ul#Menu2 li li a.current,
ul#Menu2 li li a.section,
ul#Menu2 li li a.section:hover,
ul#Menu2 li li a.current:hover {
font-weight: 700;
}

/* Sub Menu */

ul#Menu2 li a.levelb {
margin-left: 2px;
text-indent: 2px;
}

ul#Menu2 li a.levelb:hover,
ul#Menu2 li li a.current,
ul#Menu2 li li a.current:hover,
ul#Menu2 li li a.section,
ul#Menu2 li li a.section:hover {
text-decoration: none;
color: #444444;
}

/* Comments
******************************************/

#CommentHolder ul {
list-style: none;
margin: 20px 0;
}

#PageComments li {
margin: 5px 0;
padding: 1px;
width: 88%;
}
#PageComments li.odd {
background: #E8F6FF url(../images/commentBg.png) no-repeat 1% 10%;
padding-left: 40px;
padding-right: 10px;
border-bottom: 2px solid #BCE4FE;
}

#PageComments li.even {
background: #fff url(../images/commentBgAlt.png) no-repeat 99% 10%;
padding-right: 40px;
padding-left: 10px;
}

#PageComments li.odd p.info {
color: #3AA0C3;
}

.actionLinks li a {
padding-right: 3px;
font-size: 10px;
}
.actionLinks li {
display: inline;
border-right: 1px solid;
}
.actionLinks li.last {
border-right: none;
}

.commentrss {
background: transparent url(../images/feed-icon-14x14.png) no-repeat;
padding-left: 20px;
font-size: 1.1em;
line-height: 1.6em;
}
#PageCommentsPagination p {
text-align: center;
font-size: 1.2em;
}
#PageComments p {
font-size: 1em;
}
#PageComments p.info {
color: #999;
margin: 0px;
padding: 0;
line-height: 1em;
font-size: 0.9em;
}

/* Search Results
*****************************************/
ul#SearchResults {
margin: 10px 0;
}
ul#SearchResults li {
list-style: none;
margin: 5px 0;
font-size: 1em;
}
/* Footer
*****************************************/

#Footer {
background-image:url(../images/menu-background.gif);
clear: both;
/* width: 960px; */
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
}
#Footer p {
color: #FFFFFF;
font-size: 10px;
text-align: center;
}
#Footer a {
color: #FFFFFF;
text-decoration: none;
}
#Footer a:hover {
color: #FFFFFF;
text-decoration: underline;
}