Ribbon visibility using CSS

This is the fourth post in a SharePoint 2010 ribbon series.  Be sure to check out posts 1through 3 as well:
1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs
3) The Docked Ribbon

The ribbon doesn’t have to be big and scary.  SharePoint ribbon customization can be completed with just a little CSS and tweaks to your master page. In this post we are going to focus hiding the ribbon when it is not in use.

Not editing?  Then no ribbon

If you want the ribbon hidden when it isn’t being actively used, there is a simple CSS style statement that you can add to your custom CSS file to do the trick:

.s4-ribbonrowhidetitle {
	display: none;
}

You don’t need to add this class to anything in the master page; this class is already built into the out-of-the-box master pages and all of my “Just the Essentials” master pages. Here is a screenshot comparison of before and after applying the style:

Ribbon compare with CSS hide

What happens when you use this style statement

There is an element in the master page that is assigned the s4-titlerow ID. This element is also assigned the s4-pr and s4-ribbonrowhidetitle classes.  This element wraps all of the ribbon components. When the ribbon is active, the s4-ribbonrowhidetitle class is removed from the element while the ID and other class stays intact (the ECMAScript handles this).  The new style statement is only in affect while the ribbon is inactive.

The missing bits

(The following issues may or may not happen on your site depending on the master page in use and the level of customization completed on the site already.)

The first problem created by adding this style is the Site Actions, pop-up global breadcrumb (the up folder icon) and the Welcome user menu has all disappeared.  This is because these elements are placed in the peripheral content areas of the ribbon.  You can move these elements outside of the peripheral content areas and solve this problem very easily. See the first post in this series, Boil it down to the basics… the SharePoint 2010 ribbon, for more information and instructions. You will definitely want to move the Site Actions to another location in your master page.

Getting to Edit mode

The next issue is how do you edit the web page? For publishing and non-publishing content pages it is still straightforward. You use the Site Actions menu and select Edit Page. Once you do that the ribbon appears and it is business as usual.

Where things get weird is list and libraries. If you click into a list or library view, the ribbon won’t appear.  It makes sense, you haven’t done anything to trigger a page edit.  However your end users may be used to SharePoint and are expecting the ribbon to appear when looking at a list or library. There are four different ways you can address this problem.

Precise clicking

If you click in the web part area (remember that a list or library view is just a web part) the ribbon will appear. Here is a screenshot showing the issue. I added a gray header area just to help set off the top of the web page from the title area and ribbon.
Activate the ribbon when clicking web part

This is not an ideal solution because it isn’t intuitive and telling your users to click the web part (that they likely don’t even recognize as being a web part) isn’t a user friendly method for adding or editing content.

Treat it like a web page

You can tell your users to select Site Actions -> Edit Page just as they would for web pages. It isn’t super intuitive but it can piggy back on other end user training that tells people how to edit web pages.  At least you have minimized the actions the end users have to learn.

There is one fix you need to do for this method, and if you are hiding the ribbon I suggest doing this anyways.

When you activate the ribbon in a list/library, the title area components may disappear.  This is because of a class left on the element that has (or originally had) the s4-titlerow ID.  For more information about the s4-titlerow ID, please see “Keeping your site header visible at all times” in the first post in this series, Boil it down to the basics… the SharePoint 2010 ribbon.  Here is a screenshot showing the missing title area components.
TItle elements disappear upon edit page

To fix this problem locate the s4-titlerowhidetitle class in your master page and delete it.

<div class="s4-pr s4-notdlg s4-titlerowhidetitle">

Add a toggle

Another option is to introduce a toggle for the ribbon. By using JavaScript or jQuery you can add a link or button on the site that when clicked, shows or hides the ribbon.   Here is an example that Dustin Miller wrote:

<!-- Place this in your master page where you want the link to appear -->
<a href="#" onclick="speToggleRibbon()">[Toggle Ribbon]</a>

<!-- Add this to the bottom of your master page, before the closing BODY tag -->
<script type="text/javascript">
	function speToggleRibbon() {
		try {
			theribbon = document.getElementById("s4-ribbonrow");
			thewp = document.getElementById("MSOZoneCell_WebPartWPQ2");
			ribbon.SelectWp(thewp);
			theribbon.className = (theribbon.className == 's4-pr s4-ribbonrowhidetitle') ? 's4-pr' : 's4-pr s4-ribbonrowhidetitle';
			FixRibbonAndWorkspaceDimensions();
			if (_spPageContextInfo.pageItemId) {
				_ribbonStartInit("Ribbon.WikiPageTab", false, null);
			}
		} catch (err) {}
		return false;
	}
</script>

You can use CSS to style the text to look like a button if desired.

Selectively hide the ribbon

Hiding the ribbon doesn’t have to be an all or nothing action. You can hide the ribbon from web pages, and then show it for lists and library views. To do this, use the following style statements:

/* Hide the ribbon when not in use */
	.s4-ribbonrowhidetitle {
		display: none;
	}

	/* Show the ribbon on list and library view pages at all times */
	form[action*="/Lists/"] .s4-ribbonrowhidetitle,
	form[action*="/Forms/"] .s4-ribbonrowhidetitle {
		display: inherit;
	}

To wrap up…

Using this style statement is a great little technique, but will possibly require some tweaking of your master page. This all loops back to gathering site and ribbon requirements.  When you start hiding SharePoint elements, you will have to think through how users will interact with the site and the data and ways to ensure that they will continue to be happy users who heart their SharePoint site.

More ribbon CSS tips and tricks to follow in the next post in this series.