This document provides guidelines for branding SharePoint web application portals and sites. It discusses customizing the master page, linking CSS and JavaScript, favicon styling, ribbon bar styling, breadcrumbs, top navigation, header styling, left navigation, footer, and fixing issues when using a SharePoint 2013 master page in SharePoint 2010. It also provides resources for downloading and learning more about SharePoint requirements and features.

1. TIPS FOR
SHAREPOINT
BRANDING
Branding SharePoint web application portals and sites. Easy and stable
version for SharePoint designer and developers
[Type the document
subtitle]

2. Style Guide for SharePoint Branding Page 1
Style Guide for SharePoint 2013 Branding
TIPS FOR SHAREPOINT BRANDING............................................................................................................................0
About.................................................................................................................................................................................2
Who’s for...........................................................................................................................................................................2
Versions.............................................................................................................................................................................2
Author ...............................................................................................................................................................................2
Customization of Master Page..........................................................................................................................................3
About Master Page .......................................................................................................................................................3
Linking CSS & JS.............................................................................................................................................................3
Favicon..........................................................................................................................................................................3
Ribbon Bar.....................................................................................................................................................................3
Breadcrumb ..................................................................................................................................................................3
Top Navigation..............................................................................................................................................................4
Top Header Styling........................................................................................................................................................4
Search Control Styling...................................................................................................................................................5
Styling Left-side Navigation ..........................................................................................................................................5
Footer in Master Page...................................................................................................................................................5
Fixed width Master Page...............................................................................................................................................7
1. First Approach:..................................................................................................................................................7
2. Second Approach:.............................................................................................................................................7
Site Action and Welcome User Control: .......................................................................................................................7
Login as another User ...................................................................................................................................................8
Design Manger..............................................................................................................................................................8
SP2010 Fix on SP2013 .......................................................................................................................................................9
Register the SP2013 Core15 CSS in SP2010 Master Page.............................................................................................9
Change in Path URL’s: ...................................................................................................................................................9
Ribbon Bar.....................................................................................................................................................................9
Resource..........................................................................................................................................................................10

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 1.0
Modified On 1 August 2016

4. Style Guide for SharePoint Branding Page 3
Customization of Master Page
About Master Page
Default Master Page: “seattle.master”[2013], “v4.master”[2010], “default.master”[2007]
System Master Page: “osol.master” [2013], “v4.master”[2010], “default.master”[2007
The best practice is to duplicate the master page and rename to project specific title and not try to remove controls
from master page. Hide using “ms-hide” default SharePoint class to the element that is not require or from CSS.
Example: v4.master to projectv4.master
More to know: Link
Linking CSS & JS
<!-- CSS
==================================================
<link rel="stylesheet" href="/SiteAssets/shAssets/css/shcss.css" />-->
<SharePoint:CssRegistration ID="CustomCSS" Name="<%
$SPUrl:~SiteCollection/SiteAssets/shAssets/css/shcss.css%>" runat="server" After="corev4.css"/>
<!-- JS Library
================================================== -->
<SharePoint:ScriptLink language="javascript"
name="~SiteCollection/SiteAssets/shAssets/js/jquery-min.js" runat="server" />
<SharePoint:ScriptLink language="javascript"
name="~SiteCollection/SiteAssets/shAssets/js/bootstrap.min.js" LoadAfterUI="True"
Localizable="false" OnDemand="false" Defer="false" runat="server" />
Favicon
<SharePoint:SPShortcutIcon runat="server" IconUrl="_layouts/images/favicon.ico" />
<link type="image/vnd.microsoft.icon" href="<%
$SPUrl:~sitecollection/SiteAssets/shAssets/images/favicon.ico %>" rel="shortcut icon" />
<asp:Literal ID="faviconlit1" runat="server" Text="&lt;link rel='shortcut icon' href='"
/><asp:Literal ID="faviconlit2" runat="server" Text="<%
$SPUrl:~sitecollection/SiteAssets/shAssets/images/favicon.ico %>" /><asp:Literal ID="faviconlit3"
runat="server" Text="' type='image/vnd.microsoft.icon' /&gt;" />
Ribbon Bar
SharePoint 2013 has two Ribbon bars
1. suite Bar
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. Add a Welcome title in front of the user name using CSS
.ms-welcomeMenu:before
{
content: 'Welcome ';
color: #333;
}
Instead of moving welcome control from ribbon and placing in Title row, better solution would be manipulating
with custom approach
//Logged in User Name Custom placement
var userInfo = $($('.ms-welcome-root > a.ms-core-menu-root').contents()[0]).text().trim();
$('.userName').append(userInfo);
2. s4-ribbonrow
Ribbon row contains full screen, share to network, edit page button etc. We can hide as these drive user to interact
unnecessarily.
Breadcrumb
As in SharePoint 2010 Title Section can be used as Breadcrumb and same as in SharePoint 2013

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.
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”
1. titleAreaBox is a parent container for logo, Navigation and search control

6. Style Guide for SharePoint Branding Page 5
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;
}
Footer in Master Page
Find the id= “WSSDesignConsole” ContentPlaceHolder next a div and Add the footer. After
footer ends there are two div’s (</div></div>) with Control </SharePoint:SharePointForm> ends
Add CSS class="s4-notdlg" to avoid visibility of Custom Controls in Popup Dialog boxes.
<asp:ContentPlaceHolder id="WSSDesignConsole" runat="server" Visible="false" />
</div>
<div id="footer" class="s4-notdlg">
<div class="container">
<div class="col-md-6">
&copy; All Rights Reserved.
</div>
<div class="col-md-6">
<div class="pull-right">
</div>
</div>
</div>
</div>
</SharePoint:SharePointForm>

7. Style Guide for SharePoint Branding Page 6
Align Footer to bottom of the window refer the below approach’s
CSS
body #s4-bodyContainer
{
position:relative;
min-height:100%;
}
#footer{
color:#fff;
position:absolute;
bottom:0;
width:100%;
}
jQuery remedy
$(document).ready(function () {
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();});
});
Tip: <div style=’clear:both;’></div> at end and inside of the div .s4-bodycontainer tag
Hide SharePoint Controls:
Add “ms-hide” to the Controls that are not required to be display in SharePoint site.
Example :
<div id="s4-titlerows" class="s4-pr s4-titlerowhidetitles s4-nosetwidth ms-hide">
Hide Custom controls in SharePoint Dialog box:
Add Class “s4-nodlg”
Example :
<div id="s4-titlerows" class="s4-pr s4-notdlg s4-titlerowhidetitles s4-nosetwidth">

8. Style Guide for SharePoint Branding Page 7
Fixed width Master Page
1. First Approach:
» By adding the s4-nosetwidth class in SharePoint, This will avoid the inline style property for s4-
workspace and the design stay centered. Applying the custom CSS properties to the existing CLASS
and ID’s in SharePoint Master Page
CSS:
div.s4-title.s4-lp, body #s4-mainarea, #s4-topheader2, #s4-statusbarcontainer {
width: 960px; margin: auto; padding: 0px; float: none;
background-image: none; background-color: white; }
/*Fix width issue when layout has fixed width*/
.ms-dialog body #s4-bodyContainer{ width:auto!important; min-width:700px!important;}
HTML:
<div id="s4-workspace" class="s4-nosetwidth">
<div id="s4-titlerows" class="s4-pr s4-notdlg s4-titlerowhidetitles s4-nosetwidth">
2. Second Approach:
CSS:
#s4-workspace > div,#s4-bodyContainer > div,body #s4-
titlerow > div{
width:980px;
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;}
Site Action and Welcome User Control:
Welcom 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;
}

9. Style Guide for SharePoint Branding Page 8
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=
Design Manger
http://chrisstahl.wordpress.com/2013/07/20/design-manager-in-sharepoint-2013-parti/
http://sharepointbrian.com/2012/07/intro-to-sharepoint-2013-design-manager/
Remove Title Column and Field from the custom forms @:
1) Go to List settings-->Click on Advanced Settings-->Select Allow Management of Content Types=Yes radio button
2) Click on particular content type where title field exists--->click on Title column--->Select Hidden(Will not appear in
forms) radio button ---> click on "OK" button
3) Now go to your list and check (by click on new ---Title will not visible) and similarly you uncheck the Title column
from Default view(It won't appear in View)

10. Style Guide for SharePoint Branding Page 9
SP2010 Fix on SP2013
As this is not recommend for existing project migration while Customization SP2013 related JS and CSS registration
related files to be placed in SP2010 Master Page.
Register the SP2013 Core15 CSS in SP2010 Master Page
<SharePoint:CssRegistration ID="SP2013CSSCore" Name="Themable/corev15.css" runat="server"/>
After applying the Core15 css file in SP2010 Master Page any error comes remove the any registration at top
of Master Page make sure it looks same as this <%@Master language="C#" %>
Another Approach of linking css file in master page Instead of link tag
<SharePoint:CssRegistration ID="SP2013CSSCore" Name="/_layouts/Styles/Projfldr/css/styles.css" After=”
Themable/corev15.css” runat="server"/>
Change in Path URL’s:
Refer the image or Js or CSS with “/15/” is prior in SP2013
/_layouts/15/
Ribbon Bar
Ribbon in Seattle.master having Two Row’s with Two Controls, There is CSS Class names Changes are
effected, so the SP2010 Class’s and reference ID’s won’t be applied and get conflict issues.
Note: Replace the SP2010 Ribbon with SP2013 Ribbon is mandatory if SP2010 Master Page is using in
SP2013 Environment every control like Welcome control, Bread Crumb, Site Settings, Help Control will be
repeated remove the same in SP2010 Master Page.

11. Style Guide for SharePoint Branding Page 10
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
v5 Responsive Master Page :
 http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/
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.