Customize SharePoint 2013 Master Page

 

Create a new master page

Create a new master page by copying seattle.master as the template and modify the layout as what you want to

1.      Register your code and user control at the top, such as: <%@Register TagPrefix="KProject" Namespace="MyCompany.KProject.Controls" Assembly=" MyCompany.KProject, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4a7c12c823d6aab8" %> or/and <%@ Register Src="~/_controltemplates/KProject/KProjectControl.ascx" TagName="KProjectControl" TagPrefix="KProjectr" %>

2.      Add new css file at header, such as: <SharePoint:CssRegistration ID="CssRegistration2" Name="/Style Library/css/KProject.css" runat="server" After="corev15.css" />

3.      Add your extra div tag needs, remember to use the class="ms-dialogHidden" if you do not want it shows in the dialog window. And use “.ms-hidden” to visually hide that tag from the page, but keeps it available to accessibility devices such as screen readers; use “.ms-hide” Applies display: none CSS.

4.      Add footer div always at the bottom with wrapper class between s4-workspace and s4-bodayContainer:
<div id="s4-workspace" class="ms-core-overlay"> <div class="wrapper">< div id="s4-bodyContainer"> and footer class at the end, such as <div class="footer ms-pagebottommargin ms-dialogHidden"><span><KProject:Placeholder ID="plhFooter" runat="server" TextKey="Footer.Content"/></span></div>

5.      Wrapper and Footer class:

.wrapper {

  min-height: 100%;

  height: auto !important;

  height: 100%;

  margin: 0 auto -30px;

  overflow: visible !important;

}

.footer, .push {

  height: 30px;

  clear: both;

}

.footer {

   background-color:transparent;

   line-height: 30px;

   text-align: center;

}

6.      Add the old version Breadcrumb back by finding the class="ms-breadcrumb-dropdownBox" and remove the display:none style and add the following:

<SharePoint:AjaxDelta ID="deltabreadcrumbnav" runat="server">

   <div id="breadcrumbnavigation">

   <span class="breadcrumb-nav">

     <asp:ContentPlaceHolder ID="ContentPlaceHolder"runat="server" >

<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap"SkipLinkText="" runat="server"/>

       </asp:ContentPlaceHolder>

     </span>

  </div>

</SharePoint:AjaxDelta>

7.      Top Navigation data source can be changed to other XML source, like:

<SharePoint:DelegateControl runat="server" 

    ControlId="KProjectTopNavigationDataSource"  

    Id="KProjectTopNavigationDelegate">

    <Template_Controls>                 

       <KProject:KProjectSiteMapDataSource ShowStartingNode="True"

          SiteMapProvider="KProjectXmlContentMapProvider" id="KProjectTopSiteMap"runat="server"/>

    </Template_Controls>

</SharePoint:DelegateControl>

And web.config siteMapshould add this new KProjectXmlContentMapProvider, like:

<add name="KProjectXmlContentMapProvider" siteMapFile="_layouts/15/KProject.sitemap" type="Microsoft.SharePoint.Navigation.SPXmlContentMapProvider, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />

8.       Top Navigation styles:

.ms-core-listMenuhorizontalBox > ul.root > li.static {

    background-color:transparent;

    width: 150px !important;

    max-width: 160px;   

}

.ms-core-listMenuhorizontalBox > ul.root > li.static > a.static > .ms-core-listMenu-item {

    background-color:transparent;

}

.ms-core-listMenuhorizontalBox > ul.root > li.static > a.static > .ms-core-listMenu-item > .menu-item-text{

    background-color:transparent;

    color:#ffffff;

    font-weight:bold;

}

.ms-core-listMenuhorizontalBox li.static  > .ms-core-listMenu-item {

    background-color:transparent;

    color:#ffffff;

    font-weight:bold;

}

ul.dynamic {

    background-color:#3764a0;

    padding-left:2px;

    padding-right:2px;

    padding-bottom: 0px;

    padding-top:0px;

    width: 150px !important;

    list-style-type: none;

}

ul.dynamic .ms-core-listMenu-item {

    background-image:none;

    background-color:#3764a0;

    border-bottom-color:#c0c0c0; 

    border-bottom-style:solid; 

    border-bottom-width:1px; 

    min-height:15px; 

    padding-top:5px; 

    padding-left:5px;

    width:100%;

    color:#ffffff !important;

}

ul.dynamic .ms-core-listMenu-item:hover {

    background-color:#34597f !important;

    color:#ffffff !important;

    text-decoration:none !important;

    border-bottom-color:#c0c0c0; 

    border-bottom-style:solid; 

    border-bottom-width:1px; 

    min-height:15px; 

    padding-top:5px; 

    padding-left:5px;

    width:100%;

    color:#ffffff !important;

}

9.      Side Navigation (quick launch) style:

.ms-core-listMenuverticalBox UL.root > LI > .menu-item{ 

  font-weight:bold; 

  background-color:#3764a0; 

  color:#ffffff; 

  border-bottom-color:#c0c0c0; 

  border-bottom-style:solid; 

  border-bottom-width:1px; 

  min-height:25px; 

  padding-top:5px; 

  padding-left:10px; 

  font-size:12px; 

  font-family:Arial, Helvetica, Sans-Serif !important; 

 } 

.ms-core-listMenuverticalBox UL.root > LI > ul.dynamic > li.dynamic > .menu-item{ 

  font-weight:bold; 

  background-color:#3764a0; 

  color:#ffffff; 

  border-bottom-color:#c0c0c0; 

  border-bottom-style:solid; 

  border-bottom-width:1px; 

  min-height:25px; 

  padding-top:5px; 

  padding-left:10px; 

  font-size:12px; 

  font-family:Arial, Helvetica, Sans-Serif !important; 

 } 

.ms-core-listMenuverticalBox > ul.root > li.static > ul.static >  

   li.static > a:hover { 

   color: #ffffff !important; 

   background-color:#34597f !important; 

   text-decoration:none; 

 } 

.ms-core-listMenuverticalBox > ul.root > li.static > ul.dynamic >

   li.dynamic > a:hover { 

   color: #ffffff !important; 

   background-color:#34597f !important; 

   text-decoration:none; 

 } 

 .ms-core-listMenuverticalBox > ul.root > li.selected > a { 

    background-image:none; 

    background-color:#34597f; 

    color:#ffffff !important; 

 } 

 .ms-core-listMenuverticalBox > ul.root > li.selected > ul.dynamic >

    li.dynamic > a { 

    background-image:none; 

    background-color:#34597f; 

   color:#ffffff !important; 

 } 

 .ms-core-listMenuverticalBox > ul.root > li > a:hover { 

    background-image:none; 

    background-color:#34597f; 

   color:#ffffff !important; 

   text-decoration:underline; 

 } 

 .ms-core-listMenuverticalBox > ul.root > li > ul.dynamic > li.dynamic >

    a:hover { 

    background-image:none; 

    background-color:#34597f; 

    color:#ffffff !important; 

    text-decoration:underline; 

 } 

 .ms-core-listMenuverticalBox > ul.root > li.static > ul.static > li > a { 

    font-size:12px; 

    padding-left:10px; 

    font-family:Arial, Helvetica, Sans-Serif !important; 

 } 

 .ms-core-listMenuverticalBox > ul.root > li.dynamic > ul.dynamic > li > a

 { 

    font-size:12px; 

    padding-left:10px; 

    font-family:Arial, Helvetica, Sans-Serif !important; 

 }

 .ms-core-listMenuverticalBox > ul.root > li.static > ul.static > li >

  a.selected { 

    background:none; 

    color: #D95E00 !important; 

    background-color:#ffffff !important; 

    text-decoration: none; 

    border: 1px #fff solid; 

    font-weight:bold; 

 } 

 .ms-core-listMenuverticalBox > ul.root > li.dynamic > ul.dynamic > li > a.selected { 

    background:none; 

    color: #D95E00 !important; 

    background-color:#ffffff !important; 

    text-decoration: none; 

    border: 1px #fff solid; 

    font-weight:bold; 

 } 

 .ms-core-listMenuverticalBox a.selected { 

    border: 1px #c0c0c0 solid !important; 

 } 

 .ms-core-listMenuverticalBox UL.root UL { 

    margin:0px 0px 10px 0px !important; 

 } 

 .ms-core-listMenuverticalBox UL.root li ul.dynamic { 

    margin:0px 0px 10px 0px !important; 

    padding:0px;

    width:170px;

 }

 

SharePoint 2013 Composed Look

The master page preview file need to be created that your Composed Look will show up in the design gallery (Change the Look) when the user tries to switch designs. SharePoint color scheme file, also referred to as a theme need to be created if it is not the same as OOTB files. An easy way for modify the master preview file is only to show the background image if your customized master page layout has a much more difference with the OOTB. i.e. only leave the following in the HTML section:

[SECTION]

<div id="dgp-pageContainer">

<div class="dgp-background"></div>

<div class="dgp-background-ie8"></div>

 <div class="dgp-pageContent"></div>

</div>

By the way, do not use the SharePoint designer HTML editor to edit this preview file, use the text editor instead.

Create a Feature

Create a feature receiver with FeatureActived and FeatureDeactived override method

1.      Remember use the SPwebServerRelativeUrl

2.      SPWeb MasterUrl and CustomMasterUrl  reset from “/_catalogs/masterpage/”

3.      Remember set master pages Elements.xml  file tag Type="GhostableInLibrary"

 

Reference

1.  https://startermasterpages.codeplex.com/

2.  https://msdn.microsoft.com/en-us/library/office/jj927173.aspx

3.  https://kogzee.wordpress.com/2013/08/07/style-sharepoint-2013-top-navigation-global-navigation-menu/

4.  http://akashkarda.blogspot.ca/2014/05/quick-launch-styles-in-sharepoint-2013.html

 

Advertisements

One thought on “Customize SharePoint 2013 Master Page

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s