This document provides a style guide for branding SharePoint 2013 portals and sites. It covers topics such as customizing the master page, styling elements like the ribbon bar, top navigation, search control, and left navigation. It also discusses adding a footer, using fixed widths, sticky footers, and various user controls. The guide is intended for designers and developers and provides code snippets and screenshots for reference. The last section lists additional resources on SharePoint 2013, requirements, installation, and theming.

1. Branding SharePoint web application
portals and sites. Easy and stable version
for SharePoint designer and developers
Style Guide
for
SharePoint
2013
Branding
Vinod Dangudubiyyapu

2. Style Guide for SharePoint Branding Page 1
Style Guide for SharePoint 2013 Branding
About.................................................................................................................................................................................2
Who’s for...........................................................................................................................................................................2
Versions.............................................................................................................................................................................2
Author ...............................................................................................................................................................................2
SharePoint Portal Setup....................................................................................................................................................3
Customization of Master Page..........................................................................................................................................3
About 2013 Master Page ..............................................................................................................................................3
Ribbon Bar.....................................................................................................................................................................3
Breadcrumb ..................................................................................................................................................................3
Top Navigation..............................................................................................................................................................4
Styling Top Navigation ..................................................................................................................................................4
Top Header Styling........................................................................................................................................................4
Search Control Styling...................................................................................................................................................5
Styling Left-side Navigation ..........................................................................................................................................5
Adding Footer in Master Page ......................................................................................................................................5
Fixed width Master Page...............................................................................................................................................5
Height :100%.................................................................................................................................................................6
Sticky Footer .................................................................................................................................................................6
Site Action and Welcome User Control: .......................................................................................................................6
Bootstrap for SharePoint 2013 .......................................................................................... Error! Bookmark not defined.
Custom page Layout .......................................................................................................... Error! Bookmark not defined.
Login as another User ...................................................................................................................................................7
Edit Mode......................................................................................................................................................................7
Design Manger..............................................................................................................................................................7
Resource............................................................................................................................................................................8

3. Style Guide for SharePoint Branding Page 2
About
As this guide line focus on SharePoint Portal Branding means the Look and Feel of a Web
Application for Internet and Intranet facing site. This guide gives brief understanding and provides with
screen shot reference for easy and captivates guidelines. The resource used in this documents preparation
are referred from Google and self-learned implementations are consolidated for easy and understandable
version
Who’s for
This guide give brief understanding in perspective of User Interface Designer and Developer as this
guide also helps for the SharePoint or MOSS developers.
Versions
Author
Author VINOD DANGUDUBIYYAPU
Guide Version 3.0
Modified On 11 July 2016

4. Style Guide for SharePoint Branding Page 3
SharePoint Portal Setup
Create Web Application, Create Site Collection and Activate Publishing feature in Site Settings to enable below
options Master Page and Page layouts (Web Designer Galleries), and Master page (Look and Feel)
Customization of Master Page
About Master Page
Site Master Page: “seattle.master” System Master Page: “seattle.master”
1. SharePoint Site user “seattle.master” Master Page for entire site.
2. Download master page from Site Settings > Web design gallery > Master page and Page Layout >
seattle.master
3. Rename “seattle.master” to Project defined name
4. To apply Custom master page Change in “Site master page”.
Note: changing the custom master page in Site master page won’t affect entire SharePoint site. Applicable only at
/Pages/ folder pages
5.
Ribbon Bar
SharePoint 2013 has two Ribbon bars
1. suite Bar
2. s4-ribbonrow
Suite Bar is new in SharePoint 2013 which is having a Site settings Control, Welcome User Control, and
Office 365 Controls like: SkyDrive, Newsfeed, Sites, Yammer etc., Ribbon is as same as 2010 with additional ease
access links to Edit, Full screen, Share, Sync.
Breadcrumb
SharePoint 2013 Title Section can be used as Breadcrumb.

5. Style Guide for SharePoint Branding Page 4
Top Navigation
As in SharePoint 2010 we have Top Navigation and same is replaced with A Link tag control in SharePoint
2013 where we can create links and redirect to the site pages.
Styling Top Navigation
CSS:
.ms-core-listMenu-horizontalBox{
background:transparent
url("/SiteAssets/images/TopLCurv.png") no-repeat 0%
0%;}
.ms-core-listMenu-horizontalBox ul{
padding:0 90px; background:transparent
url("/SiteAssets/images/TopRCurv.png") no-repeat 100%
0%; }
.ms-core-listMenu-horizontalBox ul ul{
background:none; padding:0;
}
.ms-core-listMenu-horizontalBox ul li{
background:transparent
url("/SiteAssets/images/TopNavBg.jpg") repeat-x 0% 0%;
line-height:44px;
border-left:1px solid #5c5c5c;
/*border-left:1px solid #434343; */
text-align:center;
}
.ms-core-listMenu-horizontalBox ul li a:hover, .ms-core-
listMenu-horizontalBox > .ms-core-listMenu-root
.selected{
background:transparent
url("/SiteAssets/images/TopNavBgHover.jpg") repeat-x
0% 0%;
}
.ms-core-listMenu-horizontalBox .ms-core-listMenu-root
.ms-listMenu-editLink {
padding-right:4px;
}
.ms-core-listMenu-horizontalBox .ms-core-listMenu-root
.ms-listMenu-editLink:hover {
background:transparent
url("/SiteAssets/images/TopNavBgHover.jpg") repeat-x
0% 0% !important;
line-height:44px;
}
.ms-listMenu-editLink a:hover{background:transparent
none!important;}
.ms-core-listMenu-horizontalBox li.static > .ms-core-
listMenu-item, .ms-core-listMenu-horizontalBox > .ms-
core-listMenu-root > .ms-listMenu-editLink {
color:#fff;
margin-left:0;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-
listMenu-item{margin-right:0; width:60px;}
.ms-navedit-editLinksText > span > .ms-metadata, .ms-
core-listMenuEdit > tr > .ms-navedit-linkCell > .ms-core-
listMenu-item {
color:#fff;
}
Top Header Styling
Table structure replaced with div tags and table reconstruction with CSS “titleAreaBox” inside of “s4-titlerow”. Each
div has specific classes for proper alignment “ms-table”, “ms-tableRow”, “ms-tableCell” & “ms-verticalAlignTop”

6. Style Guide for SharePoint Branding Page 5
1. titleAreaBox is a parent container for logo, Navigation and search control
2. siteIcon is Logo Container
3. ms-breadcrumb-box is Navigation Link control container
4. next div is for Search control and Social control
Search Control Styling
ms-mpSearchBox inside of “ms-srch-sb” which has “searchInputBox” style with properties and search icon
was “ms-srch-sb-searchLink”.
CSS:
.ms-mpSearchBox{width:auto;}
.ms-srch-sb{background:#fff none;}
#searchInputBox{margin-top:5px;margin-
bottom:0;margin-right:5px;}
.ms-srch-sb-searchLink
{
background:
url('/_layouts/15/Images/MCPS.ParentPortal.Branding/Im
ages/icon_searchGlobl.png') no-repeat;
width: 24px !important;
height: 24px !important;
padding: 0px !important;
}
.ms-srch-sb-searchImg
{
visibility: hidden;
}
Styling Left-side Navigation
CSS:
.ms-core-listMenu-verticalBox ul{
/*background:#5f7078;*/
background:#878787;
color:#fff;
}
.ms-core-listMenu-item, .ms-core-
listMenu-item:link, .ms-core-listMenu-
item:visited, .ms-tv-item:link, .ms-tv-
item:visited, .ms-tv-header:link, .ms-tv-
header:visited{
color:#fff;
}
.ms-core-listMenu-verticalBox ul li {border-
bottom:1px solid #fff;
color:#fff;
}
.ms-core-listMenu-verticalBox ul li{
border-top:#FFCC00 !important;
}
.ms-core-listMenu-verticalBox ul li:hover,
.ms-core-listMenu-verticalBox .ms-core-
listMenu-item:hover{
background-color:#a50032;
}
Adding Footer in Master Page
Add CSS class="ms-dialogHidden" to avoid visibility of Custom Controls in Popup Dialog boxes.
Fixed width Master Page
CSS:
body #s4-bodyContainer {
width:1003px;
margin:0 auto;
}
#contentRow:after{clear:both;}
/*add padding back to title table*/

7. Style Guide for SharePoint Branding Page 6
.s4-title-inner{padding:0 0 0 5px;}
/*background color of site*/
#s4-workspace {background: #efefef none;}
Height :100%
CSS:
body, body #s4-bodyContainer {
height: 100%;
position:relative;
}
#footerContainer {
position: absolute; bottom: 0px;
height: 30px;
}
Sticky Footer
Align Footer to bottom of the browser window when content is less on screen for this refer the CSS or jQuery remedy
jQuery:
function stickFooter() {
var footer = $(".footer");
var pos = footer.position();
var height = $(window).height();
height = height - pos.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({ 'margin-top': height + 'px' });
}
} stickFooter();
$(window).resize (function () {stickFooter();});
);
_spBodyOnLoadFunctionNames.push("stickFooter "); //Execute the script after SharePoint site load
Site Action and Welcome User Control:
Welcome Control : SiteAction Control:
CSS:
.ms-siteactionsmenuinner, .ms-welcomeMenu {
background:transparent url(“") repeat-x left top!important;
border:0px!important;
}
div.edbg{
background:transparent url("") repeat-x left top!important;
padding:6px 0px;
}
.ms-welcomeMenu {
margin:0px!important;
}
.ms-siteactionsmenuhover, .ms-SpLinkButtonActive.ms-
welcomeMenu {
background:transparent url("") repeat-x left
top!important;font-weight:bold;
border:0px!important;
}
.ms-siteactionsmenu > SPAN > A, .ms-cui-tt-span, .ms-
welcomeMenu A: link { COLOR: #000!important;}
.ms-welcomeMenu{
padding:6px 6px!important;
}
.ms-siteactionsmenuinner, .ms-siteactionsmenuhover{
padding:3px 6px!important;
}

8. Style Guide for SharePoint Branding Page 7
Login as another User
If credentials won’t be given to the Site Collection it will ask to login as Another User. In SharePoint 2013 this feature
is missing so for this fix below link will fix the problem for the time been
http://spsite2013:2013/_layouts/15/closeConnection.aspx?loginasanotheruser=true&source=
Edit Mode
Add this code at end of the URL address if Edit mode is not working.
?ControlMode=Edit&DisplayMode=Design
Design Manger
http://www.sharepointempower.com/Blog/Post/3/SharePoint-2013-branding-step-by-step
https://samlman.wordpress.com/2015/03/01/using-dreamweaver-and-design-manager-with-sharepoint-2013/
http://chrisstahl.wordpress.com/2013/07/20/design-manager-in-sharepoint-2013-parti/
http://sharepointbrian.com/2012/07/intro-to-sharepoint-2013-design-manager/

9. Style Guide for SharePoint Branding Page 8
Resource
SharePoint 2013:
Requirement
 http://sharepoint.microsoft.com/en-us/preview/sharepoint-requirements.aspx
Download
1. http://technet.microsoft.com/en-us/evalcenter/hh973397.aspx?wt.mc_id=TEC_121_1_33
2. http://technet.microsoft.com/en-us/library/cc303422.aspx
3. http://technet.microsoft.com/en-us/library/cc262749(v=office.15)
Installation on WS2008R2
 http://www.shailwx.com/2012/07/sharepoint-2013-installation-on-windows-server-2008-r2/
Installation on WS2012
 http://virtualizesharepoint.com/2012/07/23/install-sharepoint-2013-in-virtual-machine/
VM Setup
 http://www.shailwx.com/2012/07/sharepoint-2013-development-image-part-1-creating-a-virtual-machine/
Ready VM
 http://gauravmahajan.net/2012/07/22/sharepoint-2013-virtual-machine/
SP 2013 Resource
1. http://tomvangaever.be/blogv2/2012/08/how-do-i-create-tiles-in-sharepoint-2013/
2. http://www.howtosp.com/blog/2012/10/14/sharepoint-2013-create-a-metro-live-tile-programmatically/
3. http://msscorner.de/en/2013/01/14/erstellen-einer-modern-ui-tile-app-fur-sharepoint-2013/
4. http://blogs.microsoft.co.il/blogs/choroshin/archive/2012/08/11/sharepoint-2013-create-a-metro-live-tile-using-
metrojs-jsrender-and-the-new-rest-api.aspx
http://yuriburger.net/2013/03/24/deploying-and-activating-sharepoint-2013-themes-using-visual-studio/
http://farhanfaiz.wordpress.com/2011/05/23/powershell-script-change-site-theme/
http://www.c-sharpcorner.com/blogs/4844/change-the-sharepoint-site-theme-using-powershell.aspx
Please rate the document and like if it helps you.