SP2010 Branding Tip #12 – Hiding the Quick Launch at the Page Level 6

A question I get asked almost every week. Randy, how do I hide the Quick Launch for just one page in SharePoint 2010. The answer is simple my friends: Content Editor Web Part with some specialized CSS. Note, this code is written specifically to work with v4.master, any other master page may need different CSS code to hide the Quick Launch.

  1. Edit a page, Site Actions > Edit Page
  2. Click in a wiki text or rich text area and from the ribbon click Insert > Web Part (or add a Web Part to a Web Part zone)
  3. Under Media and Content select Content Editor and click Addimage
  4. With the new Web Part selected, from the ribbon click Format Text > HTML > Edit HTML Sourceimage
  5. Enter the following HTML / CSS and click OK
  6.      
    <style type="text/css">           
     body #s4-leftpanel { display: none; }             
     .s4-ca { margin-left: 0px; }            
    </style>
    
  7. Hide the Web Part chrome by selecting the Web Part and on the ribbon click Web Part Tools Options > Web Part Properties and on the right click Appearance > Chrome Type > None  and then click Ok.
  8. Save and close your page and you are done… no Quick Launch!

image

6 thoughts on “SP2010 Branding Tip #12 – Hiding the Quick Launch at the Page Level

  1. Reply Randy Drisgill Sep 3,2010 12:35 am

    Well, you beat me to the punch! I promise I didn’t copy you though. Someone really did ask me this both this Tuesday and today as well!

  2. Reply David Sep 3,2010 6:28 pm

    Funny, I was actually looking at different pages today for a POC and saw the wiki, then choose something else because it was there. Thanks for this.. Both of you! 🙂

  3. Reply iHeartDucks Sep 7,2010 2:47 pm

    Hi Randy,

    Thanks for the articles. They have saved my skin many times.

    Any plans to write an article about branding My Sites in SharePoint 2010? Do you have any links that you can share?

    Thanks

  4. Reply Dean Nov 25,2011 11:04 am

    Hi Randy,

    A slight modification to the style I have used is :

    < style type="text/css">
    .s4-recentchanges
    {
    display:none;
    }
    < /style>

    This hides just the recent modification section and not the whole panel (as I use the Quicklaunch functiosn as well and need the panel).

    Note – extra spaces as posting of HTML got upset with me…

    Cheers

    Dean

  5. Pingback: SP2010 Branding Tip #13 – Hiding the Recently Modified on Team Sites | jettitechnotes

Leave a Reply