Wednesday, August 18, 2010

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. "

There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.

image
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>

Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin.

Once you are done, simply modify the web part and hide it on the page.

image

If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Friday, August 6, 2010

SharePoint 2010 Centered Fixed Width Design

I created a blog post about 2 years ago on how to create a centered fixed width design for SharePoint 2007. Well now with a little help from a few other posts (The SharePoint Muse, Elumenotion, Styled Point) we can create a SharePoint 2010 fixed with centered design.

Now this does come with some drawbacks. By default the ribbon is intended to stay static and always be visible to the contributors on the top of the page. However due to the complexity of fixing a site’s width. The ribbon will need to scroll with the body of the page to avoid a vertical scroll in the middle of your page once it is centered…

The trick to get this to work is to do the following:

  1. Open up your master Page and remove scroll="no" from the body.
    • If you do not do this there will be no scroll bars on long pop up modal windows

image

  1. In the Master Page search for “s4-workspace” remove this whole DIV tag and its close Div tag at the bottom of the master page.
    • This ID is tied to a JavaScript file that forces a full width on the page.
  2. Now Open up your CSS file and add the following:
    1. body{
      overflow:auto !important;
      }
      form 
      {
      width:980px;
      margin: auto;
      }
  3. Your Site Should look something like this:

image

If you wanted to add some background color and borders to enhance the centered design replace it with this:

body{
overflow:auto !important;
background-color: #21374c;
}
.s4-widecontentarea{
background-color: #FFF;
}
form
{
width:980px;
margin: auto;
}

The following is how it might look:

image

The last draw back to fixing the width of a SharePoint 2010 site is that the content is within a floating <DIV> tag and if the content gets very wide by either a fixed with image or a list with many columns displayed it will spill off the page. I have no fix for this at the moment but it is something to consider.

image

Enable Small Social Buttons in SharePoint 2010

To convert the large social buttons to smaller ones you simply have to modify the following:

Within your custom Master Page search for: “GlobalSiteLink3

Simply Add “-mini” to the control ID

Original Large Control:
<SharePoint:DelegateControl ControlId="GlobalSiteLink3" Scope="Farm" runat="server"/>
image

New Small Control ID:
<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
imageIf you want to make the small buttons horizontal versus vertical simply add the following to your custom CSS:

.ms-mini-socialNotif-Container{
    white-space: nowrap;
}

image
Enjoy!