Single Master Page and Layout Design Techniques

June 18 2010 12 comments

Having a single master page for all your sites gives you some remarkable benefits. The same master page can also be applied to a system master page in order to give your customer the ultimate branding experience. This, however can lead to a few problems regarding how the system page layouts behave with your public facing master page.

The method I these days prefer is to construct my styles to primarily support wide page layouts that sharepoint lists and views sport. I then provide alternate styles for my public facing sites: usually for the frontpage, one-, two- and three-column page layouts.

This can be done in many ways. You could inline the styles in the page layouts or link to an external stylesheet. Usually the amount of css you need to do this is minimal, and the desired results should be achieved with a few rules here and there. Inlining just isn’t an option and external stylesheets are too clumsy and confusing for this type of style declarations.

This may be a bit dirty for the purifists out there but it does the trick and makes your designers happy.

In the master page, add a content placeholder inside the body tag’s class attribute and remove any runat=”server” attributes that the tag might have, as they are usually unnecessary with SharePoint and will cause an error.

<body scroll="yes" class="<asp:ContentPlaceHolder ID='PlaceHolderAdditionalBodyClass' runat='server' />">

Now in your page layout apply content to the placeholder, say in your frontpage.aspx you would write

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalBodyClass" runat="server">frontpage</asp:Content>

Your page that uses frontpage.aspx as it’s page layout now has the class frontpage on it’s body and you can reference that on your default stylesheet to make any exceptions for the default style declarations.

Assume you have a frontpage sans quick launch and a default layout which has a quick launch, you would do something like this to stretch the frontpage:

#leftNavigationContainer {
  float: left;
  width: 200px;
}
#pageLayoutContainer {
  float: left;
  margin-left: 200px;
}

.frontpage #leftNavigationContainer { display: none; }
.frontpage #pageLayoutContainer { margin-left: 0; }

Popularity: 8% [?]

12 comments to “Single Master Page and Layout Design Techniques”

  1. Lauri Kotilainen says:

    One of the aforementioned purists here, hello! :-)

    For the sake of clarity, I’d use single quotes for the embedded tag:

    <body scroll="yes" class="”>

    Other than that, I agree this solution is a good compromise.

  2. Lauri Kotilainen says:

    Eh, bugger. Of course WP ate the tag. Well, it should have read asp:ContentPlaceHolder ID=’PlaceHolderAdditionalBodyClass’ runat=’server’.

  3. Tuukka Uskali says:

    Lauri: Good point. I edited the double quotes to single ones as that also allowed me to remove the unnecessary white-space before the content placeholder that was required for dom parsing not to go mad :)

  4. [...] Single Master Page and Layout Design Techniques (SharePoint Blues)Having a single master page for all your sites gives you some remarkable benefits. The same master page can also be applied to a system master page in order to give your customer the ultimate branding experience. This, however can lead to a few problems regarding how the system page layouts behave with your public facing master page. [...]

  5. Juha Pitkänen says:

    One disadvantage of this technique I came across is that the page layout no longer is compatible with an Out Of Box -master page or any other master-page that doesn’t have the PlaceHolderAdditionalBodyClass ContentPlaceHolder.

  6. Tuukka Uskali says:

    Juha: You’re right. Using this technique will result to errors upon switching to master pages that don’t have the required content placeholder in place. Then again this method gears towards the use of a single master page for all your site collections and system pages in a single web application where you shouldn’t have the need to any additional master pages.

  7. Juha Pitkänen says:

    No, you’re right. In my case I was developing a page layout which is required to work with different master pages where in most cases the requirement is not there.

  8. cheny says:

    It throws me an error

  9. secret info says:

    I simply had to say thanks all over again. I’m not certain the things that My personal would have implemented without the type of recommendations shown by you relating to that problem. It seemed to be a very terrifying difficulty in my circumstances, nevertheless looking at this skilled fashion you solved that forced my opinion to cry over fulfillment. Extremely thankful for your advice and in addition hope that one find out what a great job that you are carrying out educating others by way of your blog post. I’m certain you haven’t encountered all of us.

  10. Duane says:

    It’s complicated to point palms at them because they also certainly are a business after all, and they are additionally searching for their best
    interest.

  11. Kevin says:

    Thank you for this insightful article. It really cleared things up for me. Your site is as good as http://www.wikipedia.org in my opinion.

  12. I Simply Want To Mention I Am Beginner To Weblog And Honestly Enjoyed This Website. Most Likely I’m Planning To Bookmark Your Blog . You Certainly Have Remarkable Well Written Articles. Bless You For Sharing With Us Your Blog Site.

Leave a Reply