Master Pages
There are many master pages available in SharePoint Foundation Server. SharePoint provides a variety of master pages
1. v4.master
2. default.master
3. minimal.master
4. simple.master
5. MWSDefaultv4.master
6. nightandday.master
The v4.master is the default master page for most non-publishing sites in SharePoint 2010. It is also the default system master page in both SharePoint Foundation and SharePoint Server.
The v4.master page is included in every site in both SharePoint Foundation and SharePoint Server 2010. It can be used with publishing sites and non-publishing sites. You learned earlier that master pages contain HTML, CSS, SharePoint controls, and ContentPlaceholder controls.
The default.master page in SharePoint 2010 should look familiar to you if you worked with SharePoint 2007.
The minimal.master page is best suited for pages with minimal branding and navigation. The minimal.master is used with search pages and Office web applications. Because this master page does not include the ribbon or navigation, you should use it for pages that require a lot of real estate.
The simple.master is the master page used for error and login pages. It lives in the fi le system and is not available in the master page gallery. If you are creating a custom login or error page, you will want to use the simple.master page.
The MWSDefaultv4.master is found in the master page gallery of meeting workspace sites. It is almost identical to the v4.master with the exception of a couple of content placeholders such as the MeetingNavigator.
The nightandday.master page, is only available in SharePoint Server 2010. It contains controls specialized for publishing web content management.
Importing and Exporting Master Pages
1. Open the site in SPD 2010
2. Under site objects Select Master Pages
3. Select the v4.master so that it is highlighted by clicking once on it.
4. Click the Export File button on the ribbon, A Save dialog box appears, save the file as v4Test.master in physical location.
5. Now click on Import file on ribbon, click on Add file, Browse, select v4Test.master, click on Ok.
Applying a New Master Page
6. Click Master Pages in Site Objects.
7. Locate the Master Page you want to use (v4Test.master)
8. Right-click the Master Page and select Set as Default Master Page on the context menu.
Fix the Width of a Master Page
1. Open a team site in SharePoint Designer.
2. Select the Master Pages section of Site Objects.
3. Create a new master page by following the steps you used to create v4Test.master.
4. Instead of naming the fi le v4Test.master, name it FixedWidthv4.master.
5. Right-click on the fi le and select “Set as Default Master Page.”
6. Right click on the fi le and select “Edit File in Advanced Mode.” Add the following embedded style sheet into the master page just before the closing </head> tag
<style type=”text/css”>
/*fixed width */
#s4-workspace > div,#s4-bodyContainer > div,body #s4-titlerow > div{
width:1000px;
margin:0 auto;
float:none;
padding:0;
}
body #s4-mainarea{
/*make main area have background of white and add a border */
background:#fff;
border:1px solid #ddd;
border-top:0px;
min-height:580px;
/*contain content in all browsers but IE7 */
display:table;
}
/*add padding back to title table*/
.s4-title-inner{
padding:0 0 0 5px;
}
/*background color of site*/
#s4-workspace {
background:#efefef /*none*/;
}
/*body container */
#s4-bodyContainer{
position:relative;
width:100%;
}
/*fix overhanging tables*/
.ms-v4propertysheetspacing
{margin:0;}
</style>
7. Save and check in your changes.
8. Navigate to your browser and preview your changes in the browser to see your site is fi xed-width
Changing the Location of the Search Box
1. Open site in SharePoint Designer
2. Select Master Pages from the Site Objects.
3. Copy and paste the v4.master, Name it as Search.master.
4. Right-click the fi le and select Edit File in Advanced Mode.
5. Locate <td class=”s4-titletext”>.
6. Add the following code after the closing tag of <td class=”s4-titletext”>:
<td class=”customSearch” valign=”middle” style=”padding:0 5px;”> </td>
7. To find the search content control (Use the shortcut key Ctrl+F to open the Find and Replace dialog) type the word “search” in the “Find What” field and click the Find All button.
8. The results of your search are displayed below the page editor in the Find1 window.
9. Double-click on the ContentPlaceHolder control whose ID attribute is set to PlaceholderSearchArea in the Find1 box and your cursor will jump to the location of the search control in the code window
10. Select the following code and copy with Ctrl+C.
<asp:ContentPlaceHolder id=”PlaceHolderSearchArea” runat=”server”>
<SharePoint:DelegateControl runat=”server” ControlId=”SmallSearchInputBox” Version=”4”/> </asp:ContentPlaceHolder>
11. Paste the copied code inside the <td class=”customSearch”> tag
12. Save and Check in the file.
13. Navigate to the site’s URL and preview your changes in the browser.
Registering External CSS
Add CSS Registration to a Master Page
1. Open the site in SPD 2010
2. Select the master pages from site objects
3. Create the master page (copy and paste the existing master page) , Name it as style.master
4. Edit in advanced mode, add the following code at the end of <head> tag.
<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/MyDemo/css/mynav.css %>” After=”corev4.css” runat=”server”/>
5. Save, set as default master page.
6. Open the top-level site in SPD 2010, in Site Objects , select All files, Click on Style Library.
7. Add New folder (MyDemo), With in this, Create another folder(css), in this create a new mynav.css file and add the following code.
/*----Top Nav---------------- */
.s4-tn {min-height:34px;}
/*allow nav item to be taller than 15px*/
.s4-tn LI.static > .menu-item{height:auto;}
/*Transform top nav links to uppercase
and give top links bg color */
body #s4-topheader2{
background:#fff repeat-x left 0px;
border-bottom:transparent;border-top:transparent;
}
/*bottom border of nav bar*/
.s4-tn {border-bottom: 5px solid #016c9b;}
.s4-tn > .horizontal {
/*move horizontal nav to the right by 20 px*/
margin-left:20px;
}
/*keep nav from wrapping */
.menu-horizontal{min-width:790px;}
/*If you define nav styles and don’t define them
in dynamic children selectors,
dynamic will inherit the style */
.s4-tn li.static > .menu-item{
border:0;
border:none;
color:#efefef;
display:inline-block;
min-width:70px;
height:36px;
padding:0px;
margin:0px;
vertical-align:middle;
white-space:nowrap;
text-align:center;
font-size:19px;
white-space:nowrap;
padding-top:12px;
}
.s4-toplinks .s4-tn > .menu-item.text {
padding:6px 24px 0 24px;}
/*nav link hover and nav header hover*/
.s4-tn li.static > a:hover,
.s4-tn li.static > .dynamic-children:hover{
display:block;
background:transparent none;
color:#fff;
text-decoration:none;
}
/*rounded nav*/
.s4-toplinks .s4-tn .static > li {
background:url(“../images/tl.png”)
no-repeat scroll 0 0 #79BBEC;
color:#efefef
}
.s4-toplinks .s4-tn .static > li > .menu-item{
background:url(“../images/tr.png”)
no-repeat scroll top right ;
}
/*Rounded nav selected (left) background color goes here*/
.s4-toplinks .s4-tn .static > li.selected {
background:url(“../images/tl.png”)
no-repeat scroll 0 0 #efefef;
color:#5893CF
}
/*Rounded nav selected (right)*/
.s4-toplinks .s4-tn .static > li.selected > .menu-item{
background:url(“../images/tr.png”)
no-repeat scroll top right ;
color:#5893CF
}
.s4-toplinks .s4-tn .static > li.selected > a:hover {
color:#fff;
}
.s4-toplinks .s4-tn ul.static >
li.dynamic-children .menu-item-text ,
.s4-toplinks .s4-tn ul.static >
li.static .menu-item-text{
padding: 0 33px;
}
/*arrows in tabs with dynamic children*/
.menu-horizontal span.dynamic-children
SPAN.additional-background {
background-position:90% ;
}
.menu-horizontal a.dynamic-children
SPAN.additional-background {
background-position:90%;
}
/*flyout navigation */
.s4-tn ul.dynamic{
background:#A2CFEC;
margin:5px 0 0 10px;
background-color:#A2CFEC;
border:1px solid #44A0E5;
}
.s4-tn li.dynamic a{padding:5px;color:#1987DC;}
.s4-toplinks .s4-tn ul.dynamic .menu-item .menu-item-text {
padding: 5px 8px!important;
}
.s4-tn li.dynamic > .menu-item{
padding:3px 12px;
font-size:12px;
white-space:nowrap;
border-bottom:none;
font-weight:normal;
color:#003B55;
font-family:Verdana;
min-width:150px;
}
.s4-tn li.dynamic {border-bottom:1px #88C7F0 solid;}
.s4-tn li.dynamic > a:hover{
font-weight:400;
display:block;
background-color:#C7E2F3;
color:#1E6592;
}
8. Save, Check in, Publish.
9. Now refresh the browser.
