Tips for share point branding

TIPS FOR SHAREPOINT

BRANDING

Branding SharePoint web application portals and sites. Easy and stable

version for SharePoint designer and developers

[Type the document

subtitle]

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


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


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

 <SharePoint:CssRegistration ID="CustomCSS" Name="<% $SPUrl:~SiteCollection/SiteAssets/shAssets/css/shcss.css%>" runat="server" After="corev4.css"/> 

<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="<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' />" />

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

http://wiki.plexhosted.com/kb/Microsoft_SharePoint_2013:Home_page_and_the_SharePoint_2013_site


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{


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{


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 {


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


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"> © All Rights Reserved. </div> <div class="col-md-6"> <div class="pull-right"> </div> </div> </div> </div> </SharePoint:SharePointForm>


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">


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;

}


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)

http://spsite2013:2013/_layouts/15/closeConnection.aspx?loginasanotheruser=true

http://chrisstahl.wordpress.com/2013/07/20/design-manager-in-sharepoint-2013-parti/

http://sharepointbrian.com/2012/07/intro-to-sharepoint-2013-design-manager/

http://www.qdoscc.com/blog/how-hide-title-column-sharepoint-list-or-library


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.


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.

http://sharepoint.microsoft.com/en-us/preview/sharepoint-requirements.aspx

http://technet.microsoft.com/en-us/evalcenter/hh973397.aspx?wt.mc_id=TEC_121_1_33

http://technet.microsoft.com/en-us/library/cc303422.aspx

http://technet.microsoft.com/en-us/library/cc262749(v=office.15)

http://www.shailwx.com/2012/07/sharepoint-2013-installation-on-windows-server-2008-r2/

http://virtualizesharepoint.com/2012/07/23/install-sharepoint-2013-in-virtual-machine/

http://www.shailwx.com/2012/07/sharepoint-2013-development-image-part-1-creating-a-virtual-machine/

http://gauravmahajan.net/2012/07/22/sharepoint-2013-virtual-machine/

http://tomvangaever.be/blogv2/2012/08/how-do-i-create-tiles-in-sharepoint-2013/

http://www.howtosp.com/blog/2012/10/14/sharepoint-2013-create-a-metro-live-tile-programmatically/

http://msscorner.de/en/2013/01/14/erstellen-einer-modern-ui-tile-app-fur-sharepoint-2013/

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

Education

Tips for share point branding