Tuesday, August 30, 2011

Adding the left navigation menu to web part pages in SharePoint 2010

I taught a SharePoint 2010 super-user class last week, and the students experienced like so many before them that the web part page layouts which come with SharePoint 2010 removes the left hand navigation menu (the quick launch).
image
This is nothing new and it has been blogged about since 2007. But on my 15 minute Google spree this morning I could not find a recipe which worked 100% with SharePoint 2010,  so I will give it a try myself, and hopefully this can help some others in the future. I’m sure someone else has a complete post on this which I missed, but at least I have leveled up myself in the use of SharePoint Designer and modifying existing layouts instead of creating custom ones :)

Step 1 – Create a new web part page

Create a new web part page either via SharePoint or SharePoint Designer

Step 2 – Edit the page in SharePoint Designer

Edit your web part page in “Advanced Mode” in SharePoint Designer

image

Step 3 – Remove custom css

Around line 34 you will find a code block like the one below
<SharePoint:UIVersionedContent ID="WebPartPageHideQLStyles" UIVersion="4" runat="server">
<ContentTemplate>
<style type="text/css">
body #s4-leftpanel {
display:none;
}
.s4-ca {
margin-left:0px;
}
</style>
</ContentTemplate>
</SharePoint:UIVersionedContent>

Delete this code block.


Step 4 – Remove the overrides for the left column

Further down you will find three lines which prevents the left column for rendering.

<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content>

Remove all three lines.


Step 5 –Save the page

Save and publish your page.


Step 6 – Preview your changes


image

37 comments:

  1. Since one year in french http://blog.xvanneste.com/Lists/Billets/Post.aspx?ID=42 :)

    ReplyDelete
  2. I wouldn't doubt you having blogged about it :)

    And there are probably posts in English as well which I didn't manged to find. Anyways, it was a good exercise :D

    ReplyDelete
  3. Thanks! The instructions I had for SP2007 did not work, but this did.

    ReplyDelete
  4. How do I do the same thing if I don't have SharePoint Designer? Pls help...

    ReplyDelete
  5. Hi Naren,

    You can add a Content Editor Web Part to the page, and add CSS to override the default behavior.

    If you use the CSS below it should override the CSS defined in the page.

    <style type="text/css">
    body #s4-leftpanel {
    display:block;
    }
    </style>

    ReplyDelete
    Replies
    1. Can you elaborate on how to do this? I'm facing the same problem, but when I copy and paste that code into the empty "HTML Source" box for my Content Editor webpart, nothing happens.

      Delete
    2. When you do view source on your page after adding this, can you spot the added css?

      Delete
    3. Yes, it's in there.

      Delete
    4. If using IE 8 or 9, click F12, and you can start analyzing the CSS in use and what overrides certain settings. This might help you figure out if CSS declared further down or loaded later in the markup overwrite your changes.

      You may also try to write it as:
      display:block !important;

      Adding "!important" will override other settings.

      Delete
    5. Hmm, the !important tag didn't change anything, and I don't know any HTML or CSS code, so I guess I'm out of luck.

      Thanks anyway!

      Delete
    6. I know this is old but css is case-sensitive. Also, the same class can be defined multiple times and can also appear in a heirarchy like .class1 > .class2 where .class2 is what you want to override. SharePoint has lots of that, unfortunately.

      Delete
    7. Hi,
      Thanks for pointing out the casing if people write it off wrong manually. As for hierarchies, the id and class used above should be unique for a SP page and not cause issues.

      Thanks
      -mikael

      Delete
  6. Just curious why those changes cannot be done in the template files located here:
    \TEMPLATE\1033\STS\DOCTEMP\SMARTPGS ?

    Manually updating every page in SPD seems not to be a practical solution...

    ReplyDelete
    Replies
    1. Of course you can edit the original templates or a copy of them. But power-users seldom have access to the templates themselves and the file system.

      A typical scenario for a power-user/site owner is to create a new template site, and once configured, add it to the template library. Using this approach works just fine for this scenario.

      The way you go about changing things in SharePoint depends largely on your use-case and deployment scenario :)

      Delete
  7. Thanks!!! exactly what i needed after our SharePoint Migration to 2010 some pages had the left menu option missing.

    ReplyDelete
  8. the layouts missing the left nav have a certain style in them:
    .v4master #s4-leftpanel { display: none; }
    .v4master .s4-ca { margin-left: 0px; }
    these hide the left nav. in your masterpage put:
    .v4master #s4-leftpanel { display: block; }
    .v4master .s4-ca { margin-left: 155px; }
    .s4-specialNavLinkList { display: block; }#this fixes the recycle bin and view all site content missing.

    Happy sharepoint hacking!

    Jaymeson Beck

    ReplyDelete
  9. You have to put the second set of css style lines within a script block and near the end of your masterpage.

    ReplyDelete
  10. Brilliant! Thank you.

    ReplyDelete
  11. awesome article. worked :)

    ReplyDelete
  12. Thanx..........Its working fine

    ReplyDelete
  13. Thanks. Great help, great content, great delivery. 1c1cle

    ReplyDelete
  14. Followed your instructions exactly and it worked like a charm!!!

    Thanks sooooo much!!

    ReplyDelete
  15. Awesome! Works like a charm. Don´t get it why MS handles blogs so differently...

    ReplyDelete
  16. Re: Content Web Editor


    style type="text/css">
    body #s4-leftpanel {
    display:block;
    }
    /style>

    Can someone please suggest a working solution here? The above does NOT work.

    I'm not a developer and have no access to Sharepoint Designer. The sites have gone through 2007-2010 migration and now all new pages I create are lacking the left hand menu.

    Is there no simple way of adding the left menu to new pages without having to "hack" through sharepoint designer and/or being a programmer?

    TIA

    ReplyDelete
    Replies
    1. Hi,
      I haven't actually tried this on upgraded sites, but it might be that the html markup is different compared to 2010. Would be easier to suggest a solution if I could see the actual markup of the page in question.

      Thanks,
      -m

      Delete
  17. wow thanks, that actually worked - so many things don't, really, when find them online

    ReplyDelete
  18. I have custom branding masterpage, your method didn't work with it. but it worked with the default masterpage.

    How i apply it on the custom branding masterpage?

    thanks

    ReplyDelete
    Replies
    1. If it's your own master page, then you should know the HTML in it and should be pretty easy to hide the part which hosts the quick launch :) Without seen the markup it's hard to know what to hide.

      Thanks,
      Mikael

      Delete
  19. Thanks Mikael !!

    Regards,
    Vishawjeet

    ReplyDelete
  20. I am having the same issues. When creating any new page in SharePoint, the left nav bar is missing. The work around does work for individual pages, but I have basic users creating sites/pages and need the nav bar. Do I update SP main .v4master template?

    ReplyDelete
    Replies
    1. You can update the master page with CSS which uses !important to override page settings, and set it to what the default CSS uses. You can also create new page layouts which don't have the CSS part, and have your users use those instead.

      Delete
  21. Funny that commenting the lines alone won't work (page errors out). Had to actually delete them.

    ReplyDelete
  22. It worked! Easy and quick. Thanks a million.

    ReplyDelete
  23. This comment has been removed by a blog administrator.

    ReplyDelete