How to hide chrome (ribbon bar, left menu and add new item) in Microsoft SharePoint MOSS 2010 conditionally

With migration to SharePoint 2010 at our company, I have been given task to fix my old solution of hiding the chrome (menu and ribbon on 2010) that I described in my old blog post here :

that was broken when migrated. Something changed, obviously.

At first, what we need to achieve :

We are using MOSS document library to store files, that are attached via key to some entity in CRM (this funcionality is now built in in CRM 2011). We need to display library “untouched” when accessed from normal URL but when accessed from IFRAME, CRM list should detect this and hide his chrome what we get more space and users see only what the need to see.

So, the solution is simple. You need to :

  1. Insert content editor webpart to the desired list. This built in webpart can insert desired text as markup into the list (js, css, anything you need).
  2. Click on the place where you can edit/insert text into the webpart and in the ribbon you should be able to edit the HTML of the webpart. This will cause modal window to open and you can edit markup that will be inserted.
  3. Because we need some logic when to hide chrome and when not, I’m inserting JS here, but you can insert the CSS here, but be aware that this will hide controls that you need to change something in the list. This could be fixed with tool like FireBug or IE Development Tools and hacking CSS properties in memory (same approach I used to find out what to write in the CSS to hide chrome).
    The JS I used to dynamically insert my custom CSS file (no changes from MOSS 2007). Please note the http://yourserver/yourcssfile.css – this must be changed to link where you can access the CSS file, for example documents library or so and every user must be able to access this file as well. :
  4. Upload this CSS somewhere, where you can access it (as stated in previous point) :
    #s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle, .s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow, #s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content {display:none !important;}
    .s4-ca{margin-left:0px !important; margin-right:0px !important;}
    table#Hero-WPQ2 {display:none !important;}
    This will hide what we need to hide, you maybe want to hide something else.

So, that’s it. I’m attaching both files so you don’t need to copy&paste both things. Smile

Enjoy and if you have any questions, just mail me / ask me in the discussion.



Similar blog posts :


This site uses Akismet to reduce spam. Learn how your comment data is processed.