Contact Us
Please fill out the form below and we will get in touch within four business hours.

*
*
*
*
*
*
*Interested In:
(Check all that apply)



 
 
Synergy Corporate Technologies
Synergyonline > Blog > Posts > SharePoint 2010 - Custom Branding Internet facing sites
February 28

SharePoint 2010 - Custom Branding Internet facing sites

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.

Figure 1:

Figure1.png

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.

Figure 2:

  Figure2.png


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!

Figure 3:

  Figure3.png


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

By default SharePoint has a scroll=”No” attribute added to all OOB “Master Pages Body” element that allows SharePoint to control both scrollbars. There are a lot of articles out on the Internet that talk about removing or changing the scroll=”” attribute to allow the “Browser” to regain control of the scroll bars and this approach used in conjunction with JavaScript and CSS to allow the ribbon to still function properly is fine, however the writers assume you either fully understand JavaScript and the Ribbon or you don’t really mind taking the risk of the down stream impacts any change to the OOB Master Page may have on other areas of the SharePoint Site in an attempt to get the site working.

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.

That’s aside I assumed I could find a CSS fix alone and much to my disappointment no amount of playing around with the overflow CSS classes as defined in coreV4.css against the “Body” element and the “s4-workflow” DIV puts the scroll bars back where they need to be for all browsers and removing or changing the scroll =”” attribute on the Body element without additional JavaScript also bears no real fruit.

 

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.

Figure 4:

Figure4.png


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.

Figure 5:

Figure5.png


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!

Figure 6:

 Figure6.png


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.

Figure 7:

  Figure7.png


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.

Figure 8:

  Figure8.png


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.

Figure 9:

  Figure9.png


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:

    1. The s4-ribbonrow container and all its content: Then hidden by CSS.
    2. The security trimmed control then loads determining the user’s access level.
    3. The rest of the ribbon containers content would then either be removed by the security trimmed control or the next set of mark-up or code would run. In this case its additional JavaScript set to put a “display:block” back on the s4-ribbonrow container allowing the ribbon to be visible again.

Figure 10 below shows the correct JavaScript to override the “display:none” on the s4-ribbonrow DIV.

Figure 10:

  Figure10.png


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.

<!--<script type=”text/javascript”> document.getElementById(“s4-ribbonrow”).style.display = “block”;</script>—>

 

In conclusion

There are many blog articles out there on this subject and all use various methods to resolve this issue of hiding the ribbon and keeping scroll bars where they need to be, some are heavily reliant on JavaScript to mimic the way the ribbon scripts actually work, some are fairly straight forward but do not work on all browsers. Synergy’s approach is to take the simplest approach with as little change to the OOB workings for the Ribbon and Scroll bars as possible in delivering the required result.

 

Testing

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.

 

References

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


Comments

Thanks!

Hi Tim,
Thank you .. Thank you.. Thank you!  I have been struggling with this issue for such a long time and have tried solutions from all over the web.  Your simple solution seems to have fixed the scrolling on all the browsers!
Viresh
 on 10/29/2012 10:35 AM

Thank you

So simple. I can't thank you enough!
 on 3/22/2013 5:57 PM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Body *


Attachments


United States
518 Riverside Ave
Westport, CT 06880
 
1050 Bishop St.
Suite 176
Honolulu, HI 96813
United Kingdom
Unit 13 Elder Way Waterside Drive Langley Berkshire SL3 6EP
United Kingdom
Singapore
Level 37
Ocean Financial Centre
10 Collyer Quay
Singapore 049315
Asia Pacific
Level 6
115 Pitt Street
Sydney NSW 2000
Australia 
+1800-930-4771
+44 (0)1753 541 000
+(65) 6232 2329
+61 2 9113 7243
United States
United Kingdom
Singapore
Australia
This web page conforms to W3C's "Web Content Accessibility Guidelines 1.0" Level "A" © 2014 Synergy Corporate Technologies
This site is best viewed in IE8 or above. Some features may not render properly if you are using an older browser.