Search This Blog

Tuesday, June 14, 2011

Customizing Master Pages using SharePoint Designer 2010

SharePoint Designer 2010 is a great tool for many tasks which are not possible using only the SharePoint on-site tools. One of the best features of SharePoint Designer is the ability to modify SharePoint master pages. In this post I will cover how to modify SharePoint master pages for some basic purposes such as branding and also change the standard SP 2010 design.

SharePoint 2010 comes with three out-of-box Master Pages  – v4.master (the default SP2010 design), default.master (the old MOSS2007 look) and minimal.master (used in SP2010 Search Center). In this tutorial we will create a new masterpage using the v4.master as a template and then connect the newly created custom Master Page to our site.

First we need to clone the v4.master file. Open SharePoint Designer 2010, and from the Sites tab select the Open Site icon and enter your site URL.



SharePoint Designer 2010 – Open Site window

The site root will be opened in SharePoint Designer 2010. Now select Master Pages from the left menu, click on the v4.master file and press CTRL+C and CTRL+V to create a
copy of the .master file.



SharePoint Designer 2010 with copy of the v4.master file
 Now name your master page – click on the Rename icon in the ribbon and enter your custom name (for example myCustom.master).
Now using the newly created master page we are now ready to make the modifications. Users of your SharePoint site will not notice that we are changing anything, and if you will break something – you will break custom master page, not the one users are seeing.

Create a Custom CSS to Add Branding

Next we need a CSS file which overrides the default core4.css style definitions. To see some changes to our
customizations, we will include the fixed width style for our new master page.
Open SharePoint Designer 2010, select All files from the left menu and then enter the Style library.
To create a new css file, right click on the Style Library and select New > CSS  from menu.


New CSS file menu in Style Library
 Name this file myCustom.css, just to keep the naming schema consistent with our custom Master Page.
Right click the newly created .css file and select the Edit file in Advanced Mode option.



SharePoint Designer menu available on the CSS file
Now to enter some code in the css file. One thing we will do in this tutorial is to render the SharePoint site with a fixed width of 1024 pixels (making a site fixed width is actually a very difficult task using just SharePoint 2010). Additionally, we will also change the ribbon background color and the site background color.

Enter the following code in your css file :

#s4-bodyContainer {
                width: 1024px !important;
                margin-left:auto;
                margin-right:auto;
}
body #s4-ribbonrow {
                background-color:#865102;
}
body.v4master {
                overflow: visible;
                background-color:black;
}
.ms-cui-ribbonTopBars {
                width: 1024px !important;
                margin-left:auto;
                margin-right:auto;
}
.ms-cui-ribbonTopBars > div {
                border-bottom:1px solid transparent !important;
}




SharePoint Designer file editor – custom css file with example code


Connecting All the Pieces

We now have a custom CSS in the Style Library and a custom Master Page and we now need to associate the css file with the custom Master Page.
Open the myCustom.master file with SharePoint Designer (in advanced editing mode). You will see the site preview, because by default it will open your Master Page on the Design tab.



SharePoint Designer 2010 Master Page view – Design tab
 Click the Code tab on the bottom of the editor. You will see the entire Master Page code and content, with many placeholders, Server Ribbon code etc. Fortunately, you don’t have to learn all of these to do some serious branding and modification.
First, we need to connect our Master Page with the css file. Within the <head> tag, we need to add a link to our custom CSS file:
<link href=”/Style%20Library/myCustom.css” rel=”stylesheet” type=”text/css” />
Now we need to modify the s4-workspace area so it will read our css file properly:
Find the line:
<div id=”s4-workspace”>
and replace it with:
<DIV id=”s4-workspace” class=”s4-nosetwidth”>
This would add the class attribute to s4-workspace tag. Without this, our fixed size setting in CSS file will be overridden by the default inline CSS.


Master Page editor with the custom code highlighted
 Now we can test our Master Page, before we link it to our production site. The best way is to create a new test page from the selected Master Page. Go back to the Master Pages item in the left menu, and right-click our myCustom.master file, then select the New from Master Page option.



SharePoint Designer 2010 Master Page menu
 Give the site a name such as myCustom_Site and select where it should be created – the default Site Pages is fine.


Add new Page window in SharePoint Designer 2010
After a while new page will be created and the SharePoint Designer will open it for editing (in code view). Click the Preview icon on the ribbon to see your changes.


Custom Page preview window


Going Live with Your Custom SharePoint Master Page

Now, if we have ensured that the newly created Master Page looks fine we can connect it with our live production SharePoint site.

Open SharePoint Designer 2010, navigate to the Master
Pages
option in the left menu, right click the myCustom.master file and select Set as default Master Page


SharePoint Designer Master Page menu

Now, if you go to your main site (in my SP farm it’s http://sps) you should see the changed layout


Browser window with the main site with changed Master Page
 there are numerous possiblities once you get used to the process – you can include a custom logo in the CSS file, replace the black background with some background images, change the fonts and alignments of menus, content and webparts, etc.

4 comments:

  1. very similar to this: https://www.nothingbutsharepoint.com/sites/eusp/pages/create-custom-css-and-master-page-in-sharepoint-2010.aspx

    ReplyDelete
  2. Hi, Placeing CSS and images and JS files in Style Library will get into issues for JS, so Keep your Files in Site Assets.
    Style Library render the Path Style%20Library where Site Assets will render the path as SiteAssets so no %20 or Space for folder.

    ReplyDelete
  3. Really Nice Information,Thank You Very Much For Sharing.
    Wordpress Development Company

    ReplyDelete
  4. It can be almost impossible to find well-qualified users on this matter, however, you look like you be aware of exactly what you’re covering! sharepoint 2013 training course

    ReplyDelete