Branding SharePoint web application

portals and sites. Easy and stable version

for SharePoint designer and developers

Style Guide

for

SharePoint

2013

Branding Vinod Dangudubiyyapu

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

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

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.

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”

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*/

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;

}

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/

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.