A stylesheet to hide the top bar and some Javascript to toggle the left bar (try clicking on the little arrows icon in the upper-left). Include the following line on any page to add this behavior:
%INCLUDE{"CmsHi.EAWHideBarsCSS"}%
CSS Code:
<style type="text/css">
/* Hide the top bar */
/* copy the styles from viewtopbar.pattern.tmpl */
#patternTopBar,
#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter {
height:0;
}
#patternTopBar,
#patternTopBarContents {
display:hidden;
}
/* move the left bar contents down to show the logo */
#patternLeftBarContents {
margin-top:64px; /* top bar height */
}
#patternLeftBar {
/* dynamic background image set in topic */
/* or write a hard coded image location here */
background-image:url("http://www.cmsaf.mit.edu/twiki/pub/TWiki/TWikiLogos/T-logo-140x40-t.gif");
background-attachment:relative;
background-position:1em 11px;
background-repeat:no-repeat;
border-top:0px;
}
/* Hide the left bar by default*/
#patternOuter {
margin-left:0;
}
#patternLeftBar {
display:none;
}
/* for the content left margin use a bit smaller margin */
#patternMainContents {
padding-left:2em; /*S6*/
}
</style>
Javascript Code:
<script type="text/javascript" src="%PUBURL%/Sandbox/CSSTestPage/javascript_cookies.js"></script>
<script language="Javascript">
var img_hide = '<img src="%ATTACHURL%/hide.png" onclick="hideLeftBar();"/>';
var img_show = '<img src="%ATTACHURL%/show.png" onclick="showLeftBar();"/>';
var div_inside = document.getElementById("patternMain");
var div_before = document.getElementById("patternMainContents");
var mydiv = document.createElement("div");
mydiv.style.display = "inline";
mydiv.style.float = "left";
mydiv.innerHTML = img_show;
div_inside.insertBefore(mydiv, div_before);
function hideLeftBar(){
document.getElementById('patternLeftBar').style.display = 'none';
document.getElementById('patternOuter').style.marginLeft = '0px';
document.getElementById('patternMainContents').style.paddingLeft = '2em';
mydiv.innerHTML = img_show;
//Set_Cookie( 'leftbarhidden', 'true', '', '/', '', '' );
}
function showLeftBar(){
document.getElementById('patternLeftBar').style.display = 'block';
document.getElementById('patternOuter').style.marginLeft = '12em';
document.getElementById('patternMainContents').style.paddingLeft = '3em';
mydiv.innerHTML = img_hide;
//Set_Cookie( 'leftbarhidden', 'false', '', '/', '', '' );
}
/*
function checkCookies() {
if(Get_Cookie('leftbarhidden') == 'true') //remember the last state of the left bar
{
hideLeftBar();
}
else if(Get_Cookie('leftbarhidden') == 'false')
{
showLeftBar();
}
}
*/
</script>