Graphicguru.in

Style Guide for SharePoint Customization SharePoint Branding Guideline

VINOD DANGUDUBIYYAPU July 11, 2016

Style Guide for SharePoint 2010 Branding

About ........................................................................................................................................................................3

Who’s for ...................................................................................................................................................................3

Versions ....................................................................................................................................................................3

Author .......................................................................................................................................................................3

SharePoint Themes ....................................................................................................................................................4

Custom Styles for Rich HTML fields .............................................................................................................................5

Customization of Master Page ....................................................................................................................................5

Top Navigation Customization ....................................................................................................................................7

Adding Footer in Master Page ....................................................................................................................................9

Fixed width Master Page .......................................................................................................................................... 10

Height :100% ........................................................................................................................................................... 10

Site Action and Welcome User Control: .................................................................................................................... 12

Create Page Layout .................................................................................................................................................. 12

Customization of Popup Dialog box .......................................................................................................................... 14

Customize Web Part Look and Feel ........................................................................................................................... 15

Webpart Customization: ................................................................................................................................................... 15

UI fix to the OOB Forms............................................................................................................................................ 15

Editing SharePoint Site ............................................................................................................................................. 16

Search Control Customization: ................................................................................................................................. 19

Left navigation or Quick Launch Customization: ........................................................................................................ 20

SP2010 Fix ............................................................................................................................................................... 21

IE 11 issues ........................................................................................................................................................................ 21

Scrollbar issue in Chrome – Resolution ............................................................................................................................ 21

SP2013 v/s SP2010 ................................................................................................................................................... 21

Register the SP2013 Core15 CSS in SP2010 Master Page ................................................................................................. 21

Change in Path URL’s: ....................................................................................................................................................... 22

Ribbon Bar ......................................................................................................................................................................... 22

Do’s and Don’ts ....................................................................................................................................................... 23

Resource.................................................................................................................................................................. 24

About This guide mainly focuses on SharePoint Portal Branding - Look and Feel for Internet and Intranet facing sites.

Using the resources that are goggled and partially faced issues are consolidated in one area for quick and easy

implementation. This guide also covers the administrative tasks for beginner or developer like creating page layouts,

webpart customizations with tips and reference links.

IMAGES and Solution code are reference from Google image view and some of practically experienced

screenshots with code is been used.

Who’s for This is a handbook for User Interface Designers or SharePoint Developers for starting design implementation on

SharePoint Web Applications and Portals.

Versions

Author

Author VINOD DANGUDUBIYYAPU

Version 2.5

Last updated 11 July 2016

I, UX/UI designer and Front-end web developer with 11+yrs of experience in IT Industries on various Microsoft

applications customization.

SharePoint Themes

» Site Actions» Look and Feel » Theme » PowerPoint Office Theme (.thmx) file

Custom Styles for Rich HTML fields Custom styles for Rich text edit fields from Ribbon Style Tab

.ms-rteStyle-BodyTextNormal { -ms-name: "Normal"; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #3e3e3e; } .ms-rteStyle-RegularArrowLink {

-ms-name: "Regular Arrow Link"; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #1c3f95; background:url('/Style Library/Images/arrow.png') no-repeat left center; padding-left: 15px; }

<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" PrefixStyleSheet="my-rte" runat="server" />

Customization of Master Page Follow below steps:

1. Go to Site settings > Galleries > Master page and Page layout

2. Download “v4.master”

3. Rename to project/client name Ex: projectv4.master

4. Link CSS and JS path using SharePoint objects

5. Modify the structure as per your design template

Identify the existing structure by help of developer toolbar.

Top Navigation Customization

» To Have Links on Top Navigation Create Pages (web part, announcement page etc.,) or Sub sites » Top Navigation Menu resides under Title Header id “s4-topheader2” with class name “s4-toplinks” » Top Navigation Link menus have the same class names to the child link list » Parent Navigation link class name “menu-item” which is an anchor tag <a> » Sub Pages and Sub Sites link are placed inside the Parent Navigation <LI>

CSS: .s4-tn li.static > .menu-item{ background:transparent url("") no-repeat right top; color:#585856; padding:0 10px 0 0; margin:0 2px; border:0px solid #27ae00; height:auto; font-size:22px; font-weight:normal; } .menu .menu-item SPAN.additional-background{ margin:0; padding:5px 0 5px 10px; background:transparent url("") no-repeat right top; } .menu li.static > .menu-item:hover SPAN.additional-background{ background:transparent url("/_layouts/images/bg-top-nav-lft.png") no-repeat left top; } .s4-tn li.static > a:hover { color:#fff;

text-decoration:none; border:0px solid #2bc100; background:transparent url("/_layouts/images/bg-top-nav-rgt.png") no-repeat right top; } .s4-toplinks .s4-tn a.selected { background:transparent url("/_layouts/images/bg-top-nav-rgt.png") no-repeat right top; color:#fff; font-weight:bold; border:0px solid #27ae00; } .s4-toplinks .s4-tn a.selected SPAN.additional-background{ background:transparent url("/_layouts/images/bg-top-nav-lft.png") no-repeat left top; } .s4-toplinks .s4-tn a.selected:hover{ color:#fff; text-decoration:none; border:0px solid #2bc100; }

Examples on Top Navigation Customization Look and Feel

Left Navigation Customization To make the Left Navigation with Second Level navigation appears Change the value of StaticDisplayLevels to 1

and MaximumDynamicDisplayLevels to 1

<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server"

EnableViewState="false"

DataSourceId="QuickLaunchSiteMap"

UseSimpleRendering="true"

UseSeparateCss="false"

Orientation="Vertical"

StaticDisplayLevels="2"

MaximumDynamicDisplayLevels="0"

SkipLinkText=""

CssClass="s4-ql" />

Adding Footer in Master Page Add Before the <SharePoint:DeveloperDashboard runat="server" /> SharePoint Control. Add CSS class="s4-

notdlg" to avoid visibility of Custom Controls in Popup Dialog boxes.

<div id="footer" class="s4-notdlg" > &copy; Copy rights reserved </div>

<SharePoint:DeveloperDashboard runat="server" />

Align Footer to bottom of the browser window when content is less on screen with CSS or jQuery

.footer{position: absolute; bottom: 0; } #s4-bodyContainer{ position: relative; min-height: 100%;} $(function () { function stickFooter() {

var footer = $(".footer"), pos = footer.position(), 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();}); });

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. 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; }

HTML: <div id="s4-workspace" class="s4-nosetwidth">

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

Tip: (Logo, Title, TopNavigation) Header area hides when Ribbon Tabs are Selected for this fix add any letter at the end of the id and the class.

Like id=”s4-titlerow” to id=”s4-titlerows” and class=”s4-titlerowhidetitle” to class=”s4-titlerowhidetietitles”

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;

/*this property fails in 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;}

Height :100% CSS:

body #s4-bodyContainer {

height: 100%;

display:table;

position:relative;

}

html.ms-dialog body #s4-bodyContainer {

height: auto!important; }

footer {

display:table-row;

height: 30px;

}

Tip: <div style=’clear:both;’></div> at end and inside of the div .s4-bodycontainer tag

Site Action and Welcome User 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;

}

Create Page Layout Page layout is the model for the site look and feel with design consistency. Page layout defines the site structure the way

content should position. The Better way I could suggest is make a layout for all needs from an existing web part layout.

Below example: add more web part zones and replace attributes title & id to identify the zone area.

1. Download the BlankWebPartPage.aspx from Master Page and Page layout

2. Convert the Table structure to Div (Table less) structure

3. Modify the structure as per the bootstrap or custom requirement

4. Add the Web Part Zone with Custom title and ID <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_LeftColumn%>"

ID="LeftColumn" />

To <WebPartPages:WebPartZone runat="server" Title="TopLeftColumn" ID="TopLeftColumn" />

5. Change the Title="<%$Resources:cms,WebPartZoneTitle_LeftColumn%>" these will get errors as these

resources are defined in SharePoint .

6. Upload the Custom Page layout

7. SharePoint 2010 is Complete Table structure so the web parts can’t be modified to Table less structure these will

push the zones and overlaps on other zones.

8. Site master applied to only custom pages Created under “Page”

Customization of Popup Dialog box » Class name .ms-dlgOverlay ( grayed out with transparency)

» Class name .ms-dlgContent ( dialog box container )

» Each Popup Dialog box class name starts with .ms-dlg*****

» Inside Dialog box container the form controls are placed under iframe

» the same master page controls, classes and id’s will repeat again

» There is an issue when custom controls added in master page will appear in Popup, To avoid such issues add

CSS class ‘s4-notdlg’ to the controls.

» Open Developer Tool bar find the class or id’s and apply the custom CSS

» To target the control for customization in CSS style sheet as below

Example: To give background color to the popup container area

.ms-dialog .ms-bodyareacell{ background: #0fd none;}

CSS:

.ms-dialog body #s4-bodyContainer,.ms-dialog body #s4-

workspace{

background-color:#58585a!important;

}

.ms-dialog body #s4-bodyContainer

{

/*Fix width issue when layout has fixed width*/

width:auto!important;

min-width:700px!important;

}

.ms-dialog .s4-ba {

background-color:#fff;

margin:5px 10px!important;

}

.ms-dialog body, .ms-dialog body #s4-workspace {

background:transparent none!important;

}

.ms-dialog #s4-titlerow {

min-height:0!important;

}

.ms-dialog #s4-bodyContainer {

background:#fff none!important;

height:auto!important;

display:block!important;

}

.ms-dialog .ms-bodyareacell {

padding-top:0px!important;

}

.ms-dialog .mso_contarea {

padding-bottom:10px!important;

}

.ms-dlgContent, .ms-dlgBorder {

border:1px solid #fff;

}

.ms-dlgTitle {

background:#58585a

url(/_layouts/images/bgximg.png) repeat-x 0px -

565px!important;

}

.ms-sectionline, .ms-authoringcontrols {

background:transparent;

}

.ms-ButtonHeightWidth {

border:0px; background:#58585a;

color:#fff; width:8em;

margin-bottom:5px; margin-right:5px;

font-weight:bold; border:1px solid #fff;

}

.ms-descriptiontext {

background:transparent;

}

Customize Web Part Look and Feel

Webpart Customization:

CSS:

.ms-WPBorder, .ms-WPBorderBorderOnly {

border:none!important;}

.ms-WPHeader td.ms-wpTdSpace{

background:transparent url('../Images/strip-lt-corner.png')

left top no-repeat;}

.ms-WPHeader td + td +td + td +td.ms-wpTdSpace{

background:transparent url('../Images/strip-rt-corner.png')

right top no-repeat;}

.ms-WPHeaderTd, .ms-WPHeaderTdMenu, .ms-

WPHeaderTdSelection{

background:#ff8f29 none;

}

.ms-WPTitle{

font-weight:bold; font-size:15px; color:#fff; line-

height:27px;

}

.ms-vh2, span.ms-imnSpan{white-space:normal;}

.ms-listviewtable td.ms-vb2 a{word-break: break-all;}

UI fix to the OOB Forms Forms were created from OOB feature, when require any customization to a particular form a common reference CSS or

jQuery snippet won’t work. For this Adding a HTML form webpart to the OOB Forms can give the result as expected.

By going to the List/PageName/Forms/AllItems.aspx.

» Under ribbon Select Library Tab » Form Web Parts drop-down » Select Default Edit Form

» Select Add Webpart » Add HTML form Web Part » Add customization code (CSS or jQuery) for UI fix

http://epmsource.com/2011/05/09/showing-the-risk-or-issue-ids-in-the-workspace-edit-and-display-forms/

Editing SharePoint Site » Select the Page Tab from Ribbon » click on Edit tab button (or) Edit Icon button (or) Site Action Dropdown

» To empty the page area or removing the existing content by doing in the both ways

» As same as Editing the WORD document or

» Select the HTML » Edit HTML Source

» Add Custom HTML Tags, CSS inline Style sheet, JS SCRIPT Code to the Page

» There is a Layout Option for making Layout which helps in splitting the page into columns this is known as Text Layout

» These columns having the width in percentage

» Select Text Layout and choose One Column - by default the site page shows two columns

» The Columns having fixed width in percentage to edit the changes and to make change of fixed width in consistency

across the Portal through CSS by referring the CSS class name.

» To avoid such cases as in word insert a TABLE in the site page.

» Insert a TABLE with require Columns, place the cursor in the cell, change Column width.

» Insert a WEBPART, place the cursor in the cell .

» Select Insert tab » Select WEBPART tab.

» Select a WEBPART from the list » Select a webpart ex: Content editor for Media and Content section » click Add

» Web part will be placed where cursor located.

» Edit the Web Part, Modify the Settings or Delete the Web Part at End Click Save & Close to Publish the Page

Search Control Customization:

.ms-sbplain {

font-size:8pt;

font-weight:bold;

border:0px solid transparent !important;

color:#fff;

background:transparent none !important;

}

td.ms-sbcell, td.ms-sbcell input {

background:transparent

url("/Style%20Library/images/srch_lft.png") no-

repeat 0% 50%;

padding:0px;

padding-right:14px;

padding-left:10px;

white-space:nowrap;

border:0!important;

}

td.ms-sbcell {

width:200px!important;

padding:0px;

}

.ms-sbtable {

height:35px;

margin-top:5px!important;

}

.s4-search INPUT.ms-sbplain {

border:0!important;

margin-top: 0px;

width:160px!important;

color:#fff;

}

TD.ms-sbcell.ms-sbgo {

width:50px!important;

}

td.ms-sbgo {

background: transparent

url("/Style%20Library/images/srch_btn.png") no-repeat

100% 50%!important;

}

img.srch-gosearchimg {

visibility:hidden;

}

/*Search Styles Begins*/

INPUT.ms-sbplain{

font-size:8pt!important;

border:0px solid transparent !important;

color:#7E7E7E;

background-color:transparent !important;

width:80px !important;

}

table.ms-sbtable {

background:transparent url("Images/search.jpg")

no-repeat left top !important;

padding:0px;

white-space:nowrap;

border:thin 0px transparent!important;

height:23px!important;

}

td.ms-sbcell{

padding:0px 8px 0px 10px;

}

td.ms-sbgo{

background:transparent url("Images/search.jpg") 100%

100% !important;

}

img.srch-gosearchimg{

visibility: hidden;

}

.s4-search INPUT.ms-sbplain {

BORDER: solid 0px transparent!important;

}

Left navigation or Quick Launch Customization:

/*Left Nav Styles Begins*/

BODY #s4-leftpanel {

width:193px!important;

margin-left:4px;

}

.ms-quickLaunch {

background:transparent

url("Images/navigation.jpg") no-repeat 0% 0%

!important;

}

.ms-quicklaunch-navmgr{

margin-top:36px;

border-bottom:1px #e1e1e1

solid!important;

border-right:1px #e1e1e1 solid!important;

border-left:1px #e1e1e1 solid!important;

background:#f6f6f6;

}

#s4-leftpanel, #s4-leftpanel-content, .s4-ca, BODY

#s4-topheader2, .s4-title, .s4-widecontentarea,

#s4-mainarea{

background:transparent!important;

border:0px !important;

}

.s4-ql {MARGIN: 0px 3px ;}

.s4-ql UL.root > LI{border-top:1px solid #ccc;}

.s4-ql UL.root > LI > .menu-item {

background: transparent

url("/Images/navarrow.png") no-repeat center

left!important;

padding:5px 0px 5px 10px;

color:#000;

font-weight:bold;

font-size:1.1em;

margin-left:3px;

}

.s4-ql ul.root li.static ul li{padding:0px 0px;}

.s4-ql UL > LI > A:hover {text-decoration:none;}

.s4-ql UL.root > LI > .menu-item:hover {

background: #e2e2e2 ;

text-decoration:none;

font-weight:bold;

color:#000;

}

.s4-ql UL.root UL {margin-bottom:5px!important;

margin-left:10px;}

.s4-ql ul.root ul > li > a{

padding:0px 0px 0px 18px;

height:25px;

line-height:25px;

color:#000;

font-size:11px!important;

background:url('Images/leftnav-arrow.png') no-

repeat 5px center;

}

.s4-ql UL.root UL > LI > A:hover {

text-decoration:none;

color:#000;

background:#e2e2e2 url('Images/leftnav-

arrow.png') no-repeat 5px center;

}

.s4-ql A.selected {

background: #e2e2e2 url("")!important;

border:0px!important;

font-weight:bold;

padding-left:4px!important;

color:#000!important;

}

.s4-ql ul.root li.static ul li.selected{

background:#e2e2e2 url('Images/leftnav-

arrow.png') no-repeat 5px center;padding:0px 0px 0px

15px;

}

.s4-specialNavLinkList {

border:0px;

padding:0px 10px!important;

}

.s4-specialNavLinkList li{

border-top:1px #104600 dotted;

padding:3px 0px;

}

.s4-specialNavLinkList a{

color:#000!important;}

.s4-specialNavLinkList a:hover > span.ms-splinkbutton-

text{color:#000;text-decoration:none;}

ul.dynamic{

width:169px;

background-color:#fff;

border-top:1px #ccc solid;

border-right:1px #ccc solid;

}

li.dynamic{border-bottom:1px #ccc solid;}

.menu-vertical A.dynamic-children SPAN.additional-

background {BACKGROUND-POSITION: 140px center;}

.collapser{padding-right:6px;} /*Left Nav Styles Ends*/

SP2010 Fix

IE 11 issues

1. Compatibility Settings to IE8

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

2. Add URL to Security -> local intranet -> site

Scrollbar issue in Chrome – Resolution

In the Master page, look for this:

<body scroll=”no” onload=”javascript:_spBodyOnLoadWrapper();”> and replace with this: <body scroll=”no”>

Add the script to inside the body tag

<script type="text/javascript"> $(function () { // chrome scroll fix – moved from body tag and after page load

//onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" if (typeof (_spBodyOnLoadWrapper) != 'undefined') { _spBodyOnLoadWrapper(); } }); </script>

SP2013 v/s SP2010 As this is not recommend for SharePoint 2010 project migration on SP2013 environment

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.

Do’s and Don’ts 1. Master page customization requires only for controls alignment, Linking External resource files and Custom

layout integration require with SharePoint controls. 2. Define a layout either fixed or fluid by a specific note on content structure. 3. Never Edit the Corev4.css and duplicate the same or renaming 4. Using a master CSS file and @import to link multiple CSS files in main CSS file and Link the Main CSS in Master

page 5. Create a comment for each main section, base, layout, modules, and state. 6. Style-sheet should be less and shorthand coded 7. Logo can be update from Site Settings > Look and Feel > Title and description, not recommend for custom

element in master page 8. Moving controls in master page: wrapped parent elements are not requiring while positioning controls to other

area. 9. Images and Style-sheet should configure as a separate site Collection and upload files in Site Assets directory or

14 hive layouts folder is recommended. 10. Rounded corner and shadows won’t support in lower IE < 9 browsers, possible workaround with CSS3 PIE.htc

file. 11. Before start design suggestions must know the SharePoint design limitations. 12. Don't copy the entire properties of Classes or Id's. 13. Pseudo codes for lower IE9 browsers has limited functioning 14. Know the limitations OUT-OF-BOX Web-parts customization (can't be highly customized). 15. Footer control at the bottom of screen is possible with CSS and placing the control with in “s4-bodycontainer”. 16. Re-naming the class names of title headers “s4-titlerow” and “s4-titlerowhidetitle” won’t be disappear on toggle

between the ribbon tab items. 17. Ribbon control fixing width, height and moving to body area is not recommended and suggests binding with the

SharePoint trimmed control for hiding from non-administration users. 18. Form elements aren't customizable (like Select, options with lengthy text content, File input, radio buttons,

checkbox etc.,) 19. Top-navigation links text should not be lengthy or not more than two lines 20. Icon representation for Top-navigation or Left-navigation thorough CSS can't be possible.

Resource

Ribbon Styles and Visibility base on Permission

http://thechriskent.com/tag/spsecuritytrimmedcontrol/

http://sympmarc.com/2008/12/31/spsecuritytrimmedcontrol-possible-values-for-permissionsstring/

http://blog.sharepointexperience.com/2012/08/sharepoint-ribbon-css-tips-tricks/

v5 Responsive Master Page : http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/

Questions and Answers: http://sharepoint.stackexchange.com/

References: 1. http://social.technet.microsoft.com/wiki/contents/articles/8666.sharepoint-2010-best-practices.aspx

2. http://www.synteractiveingenuity.com/wordpress/2012/05/07/sharepoint-2010-customizations-and-modal-dialog-

boxes/

3. http://kyleschaeffer.com/sharepoint/sharepoint-2010-pop-up-dialogs/

4. http://chakkaradeep.com/index.php/using-the-sharepoint-2010-modal-dialog

5. http://www.tcscblog.com/2011/06/30/creating-a-fixed-width-sharepoint-2010-masterpage-updated/

http://www.sharepointpromag.com/

6. http://blogs.technet.com/b/seanearp/archive/2011/03/09/how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigation.aspx

7. http://techmikael.blogspot.in/2011/08/adding-left-navigation-menu-to-web-part.html

8. http://xtrmdevtips.blogspot.in/2011/03/custom-web-part-pages-with-navigation.html

SharePoint 2007: http://office.microsoft.com/en-in/sharepoint-designer-help/modify-the-default-master-page-HA010100906.aspx

Apps for SharePoint UX guideline

http://msdn.microsoft.com/en-us/library/office/jj220046.aspx

General Front end coding standards

http://isobar-idev.github.io/code-standards/

CSS standard refer the site:

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

http://make.wordpress.org/core/handbook/coding-standards/css/

http://coding.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

Scrollbar issue in Chrome:

http://blog.creative-sharepoint.com/2012/02/sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome/

http://brainlava.com/fix-for-sharepoint-2010-scrolling-for-chrome-ios4-android/