Heather Solomon is the acknowledged “Queen of Theme” in the SharePoint world. Her site, SharePoint Design, does for SharePoint interface designers what EndUserSharePoint.com does for Power Users. SharePoint Design is filled with tips, tricks, traps and help in decyphering the underlying HTML and CSS driving the SharePoint interface.

A while back, Heather created a CSS Reference Chart for SharePoint 2007. When I first saw that, I thought it was pretty cool. I could quick go in and isolate various classes on a SharePoint page and hide them at will by placing a little CSS in a Content Editor Web Part. Using that technique, I created a SharePoint Calendar Interface Manager that hides the entire interface surrounding a SharePoint Calendar so that only the calendar is exposed, taking up 100% of the space in the browser window. I can then display the calendar through LyteBox, exposing a specific view as if it were a sub-calendar.

The black around the screenshot is the area surrounding the calendar when LyteBox fires off. I also left the Site Actions button visible so that I have quick access to the page if I need it. Only Site Admins can see that button, so it doesn’t affect the basic End User using the calendar.

I find Heather’s chart very handy, but there are other techniques for discovering the underlying interface elements. Todd Bleeker from MindSharp has a simple content editor web part you can drop on your page called Style Under Cursor, which does exactly what it says: when you mouse over anything on the page, it tells you the class associated with that object.

Paul Grenier, jQuery for Everyone, and Waldek Mastykarz, Innovation Matters, use FireFox with the FireBug plugin for a more heavy duty environment to discover underlying structure. If you’re serious about really digging into the interface, this combination of tools is what has been recommended to me by virtually everyone doing jQuery solutions for SharePoint.

Discovering the underlying structure of the SharePoint page puts and enormous amount of power at your fingertips. Don’t want people to see the “View All Site Content” link on the top of the Quick Launch? Hide it. Same goes for the recycle bin, the entire Quick Launch, that humongous header at the top of the page. Don’t like them? Hide them.

Now that you know, isn’t it liberating?

EUSP – Calander Display Manager
Create a new view in a SharePoint calendar. Insert a Content Editor Web Part into the page for that view. Cut and paste the code below into the CEWP. All interface elements will be hidden, displaying only the calendar on the page.

<!--

Author: Mark Miller, Founder and Editor, EndUserSharePoint.com
Original Creation Date: 2009-01-28
Last Modified: 2009-01-28

Special thanks to Todd Bleeker at MindSharp for the original idea.

For a list of many other objects that can be manipulated at the client level,
view Heather Solomon's CSS Reference Chart for SharePoint 2007:
http://www.heathersolomon.com/content/sp07cssreference.htm 

USAGE:
By default, all components of the Quick Launch are visible. By changing the
display type from 'block' to 'none', specific areas of the interface can be turned
on and off.

As an example, setting the .ms-quicklaunchheader to 'display:none', will hide
the display of the 'View All Site Content' header.

-->

<style>

.ms-globalbreadcrumb {
  display: none;
}

.ms-pagetitleareaframe {
  display: none;
}

.ms-globaltitlearea {
  display: none;
}

.ms-listheaderlabel {
  display: none;
}

.ms-viewselector {
  display: none;
}

.ms-viewselectorhover {
  display: none;
}

.ms-listdescription {
  display: none;
}

.ms-menubuttonactive {
  display: none;
}

.ms-menubuttonactivehover {
  display: none;
}

<!-- Entire quick launch bar, including the space it resides in -->
.ms-leftareacell, .ms-titlearealeft {
  display: none;
}

</style>