In this post I will show you step-by-step how to build your own minimal publishing masterpage for SharePoint 2010. I will not modify existing CSS or SP2010 masterpages. Instead I will show you how to make your own clean cross browser layout and how to add the right SharePoint controls and placeholders. I have built-in enough detail so that even beginners should be able to do it themselves. This post will not include a final downloadable masterpage as I reflect that doesn’t make sense. Each layout is unique and the objective of this post is only to make you aware of a number of steps that are involved.
Preparation
Making the web attention and site collection
First we will need to make a web attention and a root site collection that will host our publishing site. For that purpose you will go to the Central Administration site. There you will make a new web attention by choosing Manage web applications. At the ribbon you click the New button. In the dialog that follows you can just click OK as this will only be our test site for designing the masterpage. Feel free to exchange the port number or add your own URL if you have something available. In the dialog that tells you that the creation of the web attention has succeeded you will need to click the link that says Make site collection. Choose the Title of your site and select the Publishing tab to show the available publishing templates. Choose the Publishing Portal template, fill out your name as the primary site collection administrator and click OK. This is all extremely undemanding but I thought to include these steps for the newbies. 
Now, let us go towards the more fascinating part.
Tableless design
For our Masterpage we will rely on DIV tags only to make the layout. What I want to suggest is that you make your master page as a clean HTML page in notepad, by a couple of images and after that fire up SharePoint designer to place in all of the SharePoint controls and placeholders.
Now, let us reflect about the design. Our layout should have a fixed width of 1000px and centered in the middle of the page. It should have a header, a main body and a footer. The main body should consist of a left navigation and a right main page section. To center everything we will define a container that is responsible for centering the make pleased. The html for our master page may possibly look like this:
<HTML>
<HEAD>
<TITLE>Test master page</TITLE>
<STYLE>
/* we will place style definitions here */
</STYLE>
</HEAD>
<BODY>
<DIV ID=”mycontainer”>
<DIV ID=”myheader”>…</DIV>
<DIV ID=”mymaincontent”>
<DIV ID=”myleftnav”>…</DIV>
<DIV ID=”mymainpage”>…</DIV>
</DIV>
<DIV ID=”myfooter”>…</DIV>
</DIV>
</BODY>
</HTML>
If you would try this it wouldn’t work as DIV’s per classification will force a line break. See the image not more than:
I have outlined the DIVs by the IE Developer Toolbar
Our design will follow the principle of floating layouts. So we need to add style definitions that tell us how wide our layout is and secondly which DIV needs to float to the left. The concept is reasonably similar to word wrapping. If you make the page smaller, words start to wrap to the next line. If you make the container a point width and reflect about DIVs as if they would be words, then you will know the concept of a floating design.
So let us add some style definitions:
<STYLE>
body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align:center; }
div { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: none; }
#mycontainer { height:100%; width:1000px; padding: 0; margin: 0px auto; position:relation; text-align:left; }
#myheader { width:1000px; height:30px; float:left }
#mymaincontent { width:1000px; float:left }
#myleftnav { width:300px; float:left }
#mymainpage { width:700px; float:left }
#myheader { width:1000px; float:left }
</STYLE>
Now our page looks reasonably different. The DIVs are nicely centered. In the middle we have a floating block for the left nav and a block for the main page make pleased. You can add background images here as well. Try not to add paddings or margins here as you will have to exchange widths as well. If you don’t add them, your cross browser experience will become much more seamless.
SP2010 Components and placeholders
Now let us have a quick look at the homepage of your newly made site. Realistically, a large number of components and placeholders are not applicable if you are going to redesign the look and feel (including new page layouts). But, a number of blocks are reasonably elemental like the Ribbon. But did you also reflect about for instance the notification area, the developer dashboard and so on? In this post I will show you a very minimalistic deal with that will eventually work with this homepage. The homepage we are seeing not more than is by the NIGHTANDDAY.MASTER masterpage and a page layout called WELCOMESPLASH.ASPX. The masterpage is by a stylesheet called …. NIGHTANDDAY.CSS which is located at the style library core folder. Have a look at some of the components that I want to use:
Things to keep in mind
- The Ribbon container is a piece of HTML that contains everything that is contained in the blue box you can see above. So that includes the Site logo, the notification area, the user menu, the dev dashboard, search, the ribbon menu, button row etc.
- Some area’s are hidden but will be used at runtime. Take for instance the notification area or the area where the performance information will be showed.
- Most of the main page make pleased is part of the PlaceHolderMain
The WelcomeSplash page layout
The welcome splash page layout is by a number of make pleased placeholders that have been defined in the master page:
- PlaceHolderPageTitle
- PlaceHolderPageTitleInArea
- PlaceHolderMain
- PlaceHolderTitleBreadCrumb
- PlaceHolderPageImage
- PlaceHolderNavSpacer
Not much needed to show this home page right? Now, as to our new master page we need to go some of the placeholders into our masterpage and at the same time, make sure we go around some of the HTML to make sure that hidden DIV areas can be used at runtime. And finally we will add only a tiny small piece of CSS to have the links follow the theme. The excellent news is we will completely skip the nightanddaymaster.css.
Make your own master page
Follow the steps not more than to make your own master page, by the HTML we have made at the commencement of this post, and make it work on your newly made publishing site. For readability I have left out the navigation controls. You can always copy paste the controls from the night and day master to your leftnav DIV and it should work instantly.
- Start SharePoint Designer, open your site collection that is your publishing site
- If you have images, upload them to the Site assets folder
- Make a new CSS file at the Style library and add your CSS
- Make a new master page
- Add a CSS registration to your new master page
- After your body tag add some HTML for accessibility (copy from Nightandday.master)
- Enter your own HTML that is your new master page with the DIVs as described above
- Go the ribbon to your header DIV
- Go the Placeholder main to your mainpage div
- Switch the masterpage setting on the site to your new masterpage
Upload images to Site assets folder
Make a new CSS file and add your own CSS
Click on the All Files item in the Site Objects overview. From the All Files overview, click Style Library. Next at the Ribbon choose File –> CSS.
Add the CSS we have defined above:
Make a new master page
Choose Master Pages from the Site Objects menu. From the Ribbon choose Blank Master Page. I have named my master Mymaster.master.
Choose Edit file from the Ribbon.
Add your CSS Registration
Before we are going to do that I want to make sure the references to the SharePoint libraries are built-in. So I copy lines 3-12 from the NightAndDay.master.
It may also be wise to copy the head section of the NightAndDay.master as you will probably need them anyhow:
You can safely delete the last line that is referencing the NightAndDay.CSS. Replace that with your reference:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/mycss.css %>" After="corev4.css" runat="server"/>
Perhaps you have noticed that I did not include the language selector here as my style page will be language independent. (Probably will exchange that for countries with a different reading order and or navigation on a different spot).
After your body tag add some HTML for accessibility
Furthermore you will have to copy the few lines at the top of your document starting at line 38 with the BODY tag up to line 58 the A tag called HiddenAnchor.
The next line is the DIV that contains the ribbon.
Enter your own HTML that is your new master page with the DIVs as described above
Go the ribbon to your header DIV
In this step you have some freedom. Like I showed earlier, the ribbon contains several components. They don’t need to be part of the ribbon div. Keep that in mind. So take for instance the Site image. If your design has a predefined site image, just delete the first div that says site-image-title. If your search should be at the right top corner. Take the DIV that is called s4-searcharea and go it to another place in your HTML. Same for notification area, page status bar, developer dashboard and user menu. The choice is yours!
It doesn’t make sense to include an image here as the HTML you have to copy is reasonably large.
Go the Placeholder main to your mainpage div
The most vital DIV that follows your ribbon is called the s4-workspace. That DIV contains the navigation menu’s and the main page body, but also the area that will contain the contents of the developer dashboard. Where in the ribbon we had only the button classification for the developers dashboard, the contents is in another div!
In this step just copy the placeholder for the PlaceHolderMain to your mainpage DIV:
All of the placeholders that you are not going to use can be went to the ASP panel that is at the bottom and has the property set to invisible.
Save your master page, optionally check in and approve and switch to the site settings of your site collection.
Exchange the master page on your site
Under your site settings menu –> Look and Feel –> Master page. You will see a drop down list of master pages. Just switch the top one to your master page and your done. Browse to the home of your site to see the result.
Your final HTML should have a syntax similar to this:
<% references go here %>
<html>
<head>
… copy from nightandday.master
… <SharePoint:CssRegistration ….. />
</head>
<body ….>
… accessibility scripts go here, copy from nightandday.master
<DIV ID="mycontainer">
<DIV ID="myheader">
… copy ribbon DIV here, remove components from Ribbon that need repositioning
</DIV>
<DIV ID="mymaincontent">
<DIV ID="myleftnav">… Left Nav controls go here ….</DIV>
<DIV ID="mymainpage">
…. <asp:ContentPlaceHolder id=”PlaceHolderMain” runat …… />
</DIV>
</DIV>
<DIV ID="myfooter">FOOTER</DIV>
</DIV>
Check it out:Serve’s Sharepoint Blog
Answers Rating