Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Style guide for share point 2013 branding

609 views

Published on

Branding SharePoint 2013 with Bootstrap or Table less designing and component level customization for Designer and Developers handy book

Published in: Technology
  • Be the first to comment

Style guide for share point 2013 branding

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×