One principle of Web design is the separation between content and presentation. HTML provides the structure of the page, while CSS (Cascading Style Sheets) tells how it should be displayed.

Themes in SharePoint (Site Actions | Site Settings | Site Theme) are a good example. Changing the theme doesn’t modify the structure of your site, it just changes its look by calling a different style sheet.

One key style property is “display”. By setting its value to “none”, we can hide an element, so that our site visitors cannot access it (though the element actually remains in the page structure). “Display=none” is often used to hide buttons or menu options on a page.

The display property can also help optimize space on a Web page. In the following example, I have written a script that allows to hide or show the left menu. This may be useful on dashboard pages for example, where you want to make the best of the available space, but at the same time you don’t want to lose the navigation options.

I am actually publishing two scripts: the first one displays a short text, while the second one is more sober and just shows the +/- icons (Note: your convention for the +/- signs may be different from mine). The screenshots below are from the second script:

You can reuse these scripts for other elements on the page by changing the id of the element (‘LeftNavigationAreaCell’ here). The scripts work in both Internet Explorer and Firefox.

As usual, copy/paste the script in a CEWP.

<script type="text/javascript">
//
// Show/hide left navigation
// Christophe@PathToSharePoint.com
//
document.getElementById('LeftNavigationAreaCell').style.display="none";
function Toggle(thisId)
{
if (document.getElementById(thisId).style.display=="none")
{
document.getElementById(thisId).style.display="";
document.getElementById("ToggleImage").src = "/_layouts/images/plus.gif";
}
else
{
document.getElementById(thisId).style.display="none";
document.getElementById("ToggleImage").src = "/_layouts/images/minus.gif";
}
}
</script>
<DIV onClick="Toggle('LeftNavigationAreaCell');" style="cursor:pointer;"><IMG id="ToggleImage" src="/_layouts/images/minus.gif" /> Left menu</DIV>

<script type="text/javascript">
//
// Show/hide left navigation
// Christophe@PathToSharePoint.com
//
document.getElementById('LeftNavigationAreaCell').style.display="none";
var ExpColl = document.createElement("TD");
ExpColl.innerHTML = '<DIV class="ms-pagemargin" onClick="Toggle(\'LeftNavigationAreaCell\');" style="cursor:pointer;"><IMG alt="Show menu" id="ToggleImage" src="/_layouts/images/plus.gif" /></DIV>';
document.getElementById('LeftNavigationAreaCell').parentNode.insertBefore(ExpColl,document.getElementById('LeftNavigationAreaCell'));
function Toggle(thisId)
{
if (document.getElementById(thisId).style.display=="none")
{
document.getElementById(thisId).style.display="";
document.getElementById("ToggleImage").src = "/_layouts/images/minus.gif";
document.getElementById("ToggleImage").alt="Hide menu";
}
else
{
document.getElementById(thisId).style.display="none";
document.getElementById("ToggleImage").src = "/_layouts/images/plus.gif";
document.getElementById("ToggleImage").alt="Show menu";
}
}
</script>

You’ll notice that such buttons are very responsive, as you don’t make any change to the page structure. Also, another key advantage of using CSS and “display=none” is that it is non-destructive: if later you want your element back, just remove the custom style.

Some helpful tools

When working with styles, one key step is to identify the target element, usually by its id or its class name. In the above example, the left menu is called by its id: ‘LeftNavigationAreaCell’.

From the browser, you can access the source of your Web page by selecting “View source”. A more convenient way is to use a Web editor – SharePoint Designer for example.

Here are two helpful resources on SharePoint CSS:
– the impressive “CSS Reference Chart for SharePoint 2007” compiled by Heather Solomon lists the main class names:
http://www.heathersolomon.com/content/sp07cssreference.htm
– the interactive “Style under cursor” Web Part by Todd Bleeker:
http://www.mindsharpblogs.com/todd/archive/2005/10/25/798.aspx

And here is where you’ll find on your site the style sheet that applies to your SharePoint pages:
http://ThisServer/sites/ThisSite/_layouts/1033/styles/core.css

To conclude, a reference if you want to learn CSS:
http://www.w3schools.com/css/default.asp