In this series of blog articles I am going to guide you through some of the more annoying and time consuming problems I encountered on a recent project involving the design and development of 8 Internet Facing sites for one client. I have extensive experience in designing 2007 Internet facing sites and 2010 intranets but this project was my first real venture away from them and I was expecting it to be a lot easier than I discovered to not be the case.
This week I take the lid of hiding the ribbon, in future weeks I will be showing just how easy it is to center a 2010 design with one line of CSS, how to correctly add the full page title back in for browser windows (without the Pages context present) and how to add IE conditional styles to the HTML tag of a Master page to allow the use of .IE ID classes – very important if you want backwards compatibility when writing in CSS3 and HTML5 and finally a everything you need to know about branding the Search Control.
Part 1: Hide the Ribbon.
You would think that hiding the ribbon would be a simple well documented task involving a few changes to a master page and then you’re done.
Well it is fairly simple once you know what you’re doing, unfortunately if you make one small mistake small issues will start to appear when trying to get it to behave cross browser and platform.
So what’s the issue? Some browsers and devices have a hard time rendering scrollbars once the Ribbon has been hidden from the page, the end result is a page with no vertical scroll bars displaying at all. Why should we care, well as designers it is our job to make sure what we deliver works everywhere, no point getting it to work on Firefox if it does not work on IE7 and Chrome?
SharePoint Master Pages, page layouts and their associated Content Place Holders are complex and they need any custom HTML Mark-up to be formatted in a precise way for a site to work perfectly across all browsers. If you wrap a control or element incorrectly or remove or move an OOB HTML element then it may work fine in IE8 or 9 but there is no guarantee it will work on Chrome or Safari. In fact it is so easy to break something you would think Microsoft would have documented the pitfalls better.
Hiding the ribbon – The problem!
The method for hiding any control or element based on a user’s access rights in SharePoint is fairly straight forward and involves the use of a standard Microsoft control called a Security Trimmed Control. The issue however is the developer knowing exactly where to place the control around the element you want to hide.
Adding the Security trimmed control to the master page
Figure 1 shows the start of the ribbon code. Note that the security trimmed control is wrapping around the entire ribbon related mark-up – This was the most obvious place to start the trimmed control.
The closing statement for the Security trimmed control is at place at the bottom of the ribbon markup just above the s4-workspace ID as shown in Figure 2.
This works fine for IE9, for Opera the scroll bars are missing or doubled up or both depending on how the browser window is sized and all other browser have no X or Y scroll bars at all. Awesome!
Figure 3 below shows Chrome after the Security control has been added and an anonymous user accessing the site, note there are no scroll bars present on the resized window but the ribbon is hidden so it’s a start!
Where did the scroll bars go and how do you get the scroll bars back?
By adding the Security trimmed Control around the entire Ribbon container and then removing it for anonymous users we are breaking the way the Master Page the Ribbon and and its own capabilities handle scroll bars. The exact technical reasons are beyond the scope of this blog but needless to say it would be a very long read.
There are a number of paths you can take in trying to come up with a solution to the scroll bar issue and as Synergy found out the hard way the simplest approach is normally the best.
Overly complicated and risky approaches
Synergy recommends that you leave the OOB capabilities well alone if you are not 100 certain of the impact the changes you are making will have as it will reduce risk and probably cost.
The correct placement of the Security trimmed control on the master page
The correct placement of the trimmed control is shown in Figure 4 below. Note that its just one line down from its previous location and now wraps around the <div id="s4-ribboncont"> tag.
The correct closing statement placement for the Security trimmed control is shown in Figure 5. Note it is inside the entire <div id="s4-ribbonrow class=s4-pr s4-ribbonrowhidetitle"> tag.
Hiding the Ribbon row completely
Figure 6 below shows Chrome after the Security control has been added to the correct location and an anonymous user is accessing the site, note the scroll bars are present on the resized window but the Ribbon is now back again albeit with all functionality hidden. One step forward 2 steps back!
For any modern browsers this is easy to fix with an alternate CSS file and setting the “s4-ribbonrow” ID to have a minimum height of 0px but it can be quirky to get it working and older browsers will not use the min-height definition.
The simplest and only really reliable approach that will work across all browsers is to use CSS to hide the ribbon and some very simple Java Script to show the Ribbon if you have the correct access rights as determined by the security trimmed control.
Best practice is to add any new CSS definition to an alternate style sheet, Figure 7 below shows the correct syntax and location of a custom Style Sheet.
As shown in Figure 8 the s4-ribbonrow ID now has a “display:none” attribute applied to it which will remove the ribbon from view for all anonymous users.
Again we move 1 step forwards and 2 back as the problem now is the ribbon is hidden from everyone, anonymous and authenticated users alike. Figure 9 below shows the Ribbon is now hidden and the scrollbars are were they should be.
Making the Ribbon visible to authenticated users
In the previous step we hid the “s4-ribbonrow” DIV but only with CSS therefore it is still loaded with the page at runtime. This allows some simple but effective use of smoke and mirrors or CSS magic to hide the Ribbon or show it depending on what the user’s access level is.
The load order for the ribbon would now be:
- The s4-ribbonrow container and all its content: Then hidden by CSS.
- The security trimmed control then loads determining the user’s access level.
The script gets the s4-ribbonrow ID and then sets a style of “display:block”
The full script is commented out below, copy to your master page and remove the <!-- --> sections.
This solution has been tested on an internal Synergy SharePoint 2010 Farm across IE version & and above, Firefox, Chrome, Safari and Opera. And on Safari for IPAD and IPhones with no issues.
This article would not have been fully possible without the trial and efforts of the blogging community in general in particular the below references were key in Synergy arriving at this solution. They are merely references and Synergy makes no claim on the accuracy of the information they contain or the overall validity of their approach and solution.
SharePoint 2010 Scrolling by Kyle Schaeffer
A Better Enhanced SharePoint 2010 Floating Ribbon by Greg Galipeau
Hiding the SharePoint Ribbon from Anonymous Users by Chris Poteet