Graphicguruin

SharePoint Portal Setup SharePoint Branding Guideline

VINOD DANGUDUBIYYAPU July 11 2016

SharePoint 2010 Portal Setup

About 3

Whorsquos for 3

Versions 3

Author 3

SharePoint Portal Setup 4

Create Web Application 4

Create Site Collection 6

Enable Publishing Features 7

Customization at Site Level 8

Applying Custom Master Page 8

SharePoint Themes 9

Adding web parts to a Page 10

Edit Web Part Properties 10

Link CSS 11

Link SCRIPTS 12

Uploading Images and CSS 13

Customization of Master Page 13

About Master Page 13

Customizing Master Page 14

Publishing Customized Master Page 15

Adding Links in Top Navigation 17

Custom Breadcrumb 20072010 18

Adding Footer in Master Page 19

Create Page Layout 19

UI fix to the OOB Forms 20

Editing SharePoint Site 21

Providing Anonymous Permission 23

Portal Level Permission 23

Site Level Permissions 26

SP2010 Fix 28

IE 11 issues 28

Scrollbar issue in Chrome ndash Resolution 28

SP2013 vs SP2010 29

Resource 29

About This guide is about SharePoint Portal Setup for Internet and Intranet facing sites This guide also covers the

administrative tasks for beginner or developer like creating page layouts webpart customizations with tips and

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

implementation

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

code is been used

Whorsquos 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 30

Last updated 11 July 2016

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

applications customization

SharePoint Portal Setup To Setup SharePoint environment in farm level will be taken care by SharePoint Administrator We need to create a

Site Collection and Sties under a Web Application

Create Web Application

Step 1

Central Administration raquo Application Management raquo Manage web applications

Step 2

Select the New Tab from the Ribbon

raquo Popup Dialog Appears

raquo Change the Website Name and Port Number

raquo You can see the Change of port number in Application Pool as well

SharePoint 2010 Portal Setup

About 3

Whorsquos for 3

Versions 3

Author 3

SharePoint Portal Setup 4

Create Web Application 4

Create Site Collection 6

Enable Publishing Features 7

Customization at Site Level 8

Applying Custom Master Page 8

SharePoint Themes 9

Adding web parts to a Page 10

Edit Web Part Properties 10

Link CSS 11

Link SCRIPTS 12

Uploading Images and CSS 13

Customization of Master Page 13

About Master Page 13

Customizing Master Page 14

Publishing Customized Master Page 15

Adding Links in Top Navigation 17

Custom Breadcrumb 20072010 18

Adding Footer in Master Page 19

Create Page Layout 19

UI fix to the OOB Forms 20

Editing SharePoint Site 21

Providing Anonymous Permission 23

Portal Level Permission 23

Site Level Permissions 26

SP2010 Fix 28

IE 11 issues 28

Scrollbar issue in Chrome ndash Resolution 28

SP2013 vs SP2010 29

Resource 29

About This guide is about SharePoint Portal Setup for Internet and Intranet facing sites This guide also covers the

administrative tasks for beginner or developer like creating page layouts webpart customizations with tips and

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

implementation

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

code is been used

Whorsquos 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 30

Last updated 11 July 2016

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

applications customization

SharePoint Portal Setup To Setup SharePoint environment in farm level will be taken care by SharePoint Administrator We need to create a

Site Collection and Sties under a Web Application

Create Web Application

Step 1

Central Administration raquo Application Management raquo Manage web applications

Step 2

Select the New Tab from the Ribbon

raquo Popup Dialog Appears

raquo Change the Website Name and Port Number

raquo You can see the Change of port number in Application Pool as well

About This guide is about SharePoint Portal Setup for Internet and Intranet facing sites This guide also covers the

administrative tasks for beginner or developer like creating page layouts webpart customizations with tips and

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

implementation

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

code is been used

Whorsquos 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 30

Last updated 11 July 2016

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

applications customization

SharePoint Portal Setup To Setup SharePoint environment in farm level will be taken care by SharePoint Administrator We need to create a

Site Collection and Sties under a Web Application

Create Web Application

Step 1

Central Administration raquo Application Management raquo Manage web applications

Step 2

Select the New Tab from the Ribbon

raquo Popup Dialog Appears

raquo Change the Website Name and Port Number

raquo You can see the Change of port number in Application Pool as well

SharePoint Portal Setup To Setup SharePoint environment in farm level will be taken care by SharePoint Administrator We need to create a

Site Collection and Sties under a Web Application

Create Web Application

Step 1

Central Administration raquo Application Management raquo Manage web applications

Step 2

Select the New Tab from the Ribbon

raquo Popup Dialog Appears

raquo Change the Website Name and Port Number

raquo You can see the Change of port number in Application Pool as well

raquo Change User Name in the Application Pool raquo Configurable

raquo Selecting OK Button

raquo Successful Popup Dialog window with asking to continue Creating Site Collection

raquo Click on Site Collection Link before you select OK button

Create Site Collection Step 3

raquo Central Administration raquo Application Management raquo Create site collections

raquo Choose the Web Application by default it show the last created web application

raquo Fill Title amp Discription

raquo Leave URL as it shows lsquo lsquo (root) as default URL will lead to site if define any site URL will change to sitesdefine

site name

raquo Choose the Template

Example Team Site from Collaboration

raquo Provide Site Collection Administrators it is recommended one should be common to all SharePoint Portals like

(MossAdmin or SPAdmin)

Create Site Collection Step 3

raquo Central Administration raquo Application Management raquo Create site collections

raquo Choose the Web Application by default it show the last created web application

raquo Fill Title amp Discription

raquo Leave URL as it shows lsquo lsquo (root) as default URL will lead to site if define any site URL will change to sitesdefine

site name

raquo Choose the Template

Example Team Site from Collaboration

raquo Provide Site Collection Administrators it is recommended one should be common to all SharePoint Portals like

(MossAdmin or SPAdmin)

Enable Publishing Features Step 4

raquo Enable Publishing Features to link CSS Upload amp Publish Master Pages and Page Layouts

raquo Select Site Actions raquo under Dropdown Select Site Settings raquo Site Collection Administration raquo Site Collection

Features

raquo Select SharePoint Server Publishing Infrastructure raquo Click Activate Button

raquo Select Site Actions raquo under Dropdown Select Site Settings raquo Site Actions raquo Manage Site Features

raquo Select SharePoint Server Publishing raquo Click Activate Button

Customization at Site Level raquo Select Site Actions raquo under Dropdown Select Site Settings raquo Look and Feel

Adding Title and Logo

Welcome page target the page to be a

Landing or Home Page of the Site

Title and Description of the Site add

Logo by providing the URL of Image file

Master page Change the Customize

master page or link the CSS for

Customization

Page Layouts and Site Templates for

different Layout approach

raquo Change Site Title raquo Add Logo URL (14 hive ldquo_layoutsrdquo folder or ldquoSiteAssetsrdquo folder)

Applying Custom Master Page

raquo Select Site Actions raquo under Dropdown Select Site Settings raquo Galleries raquo Master Pages and Page layouts

raquo Select Custom Master Page under Site Master Page amp System Master Page raquo Select the Check Box to apply the

custom master page to entire site portal and sub-sites

Note Feature Look and Feel Galleries is not visible refer the ldquoEnable publishing featuresrdquo steps

SharePoint Themes

raquo Site Actionsraquo Look and Feel raquo Theme raquo PowerPoint Office Theme (thmx) file

Adding web parts to a Page

raquo Click on Page Tab from Ribbon raquo Select Edit Button [ControlMode=EditampDisplayMode=Design] raquo Place the Cursor

where to add the Webpart

raquo Select Insert Tab from ribbon Select Web Part button

raquo Select Webpart from the list and click Add button

Edit Web Part Properties

raquo Hover on Web Part title bar Select drop down arrow raquo Select Edit web Part to change the settings

raquo Expand Appearance raquo Change the Chrome Type to disable the Header Title of the Web part This use to hide the

Titles when not require else leave the Default as Chrome Type

Link CSS

In 3 different ways

1 SharePoint Server Path

The above figure shows the CSS file path from SharePoint Server Path

2 SharePoint Portal Path

raquo Select Site Actions raquo under Dropdown Select View All Site Content raquo Style Library (or) SiteAssets

3 Linking Style sheet inside the Master Page

SharePoint CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 relativecssurl=SiteAssetsCssmystylescss

runat=server After=corev4cssgt

Conditional CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE 7

relativecssurl=SiteAssetsCssmystylescss runat=server After=corev4cssgt

Non IE Browser

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE

RevealToNonIE= True relativecssurl=SiteAssetsCssmystylescss runat=server

After=corev4cssgt

Link

ltlink href=Style20Librarycsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=SiteAssetscsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=_layoutsstylesprojfldrcsscustomstylescss rel=stylesheet type=textcss gt

Note This context is taken from the blog and more elaborated Link

httptommdalywordpresscom20120502sharepoint-cssregistration-or-link

Link SCRIPTS

1 Linking the JavaScript files in Master Page

SharePoint CSSRegistration

ltSharePointScriptLink id=JsLink1 name=SiteAssetsjsmyjsjs runat=server LoadAfterUI=true

Localizable=rdquoFalserdquogt

or

ltscript type=rdquotextjavascriptrdquo src=rdquo_layoutsscriptsprojectfolderjscustomjsjsrdquogtltscriptgt

When using ScriptLink the files need to be relative to the Layouts folder Unlike the CssRegistration ScriptLink

has a property called lsquoLocalizablersquo and lsquoLoadAfterUIrsquo These properties will help load scripts after SharePoint

scripts loaded

2 Linking the JavaScript files through Web-part

a Insert HTML Form Web-part

b Add the Scripts link files and Script Code

3 Linking the JavaScript Libraries

a CDN links from Google and Microsoft

SharePoint Themes

raquo Site Actionsraquo Look and Feel raquo Theme raquo PowerPoint Office Theme (thmx) file

Adding web parts to a Page

raquo Click on Page Tab from Ribbon raquo Select Edit Button [ControlMode=EditampDisplayMode=Design] raquo Place the Cursor

where to add the Webpart

raquo Select Insert Tab from ribbon Select Web Part button

raquo Select Webpart from the list and click Add button

Edit Web Part Properties

raquo Hover on Web Part title bar Select drop down arrow raquo Select Edit web Part to change the settings

raquo Expand Appearance raquo Change the Chrome Type to disable the Header Title of the Web part This use to hide the

Titles when not require else leave the Default as Chrome Type

Link CSS

In 3 different ways

1 SharePoint Server Path

The above figure shows the CSS file path from SharePoint Server Path

2 SharePoint Portal Path

raquo Select Site Actions raquo under Dropdown Select View All Site Content raquo Style Library (or) SiteAssets

3 Linking Style sheet inside the Master Page

SharePoint CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 relativecssurl=SiteAssetsCssmystylescss

runat=server After=corev4cssgt

Conditional CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE 7

relativecssurl=SiteAssetsCssmystylescss runat=server After=corev4cssgt

Non IE Browser

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE

RevealToNonIE= True relativecssurl=SiteAssetsCssmystylescss runat=server

After=corev4cssgt

Link

ltlink href=Style20Librarycsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=SiteAssetscsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=_layoutsstylesprojfldrcsscustomstylescss rel=stylesheet type=textcss gt

Note This context is taken from the blog and more elaborated Link

httptommdalywordpresscom20120502sharepoint-cssregistration-or-link

Link SCRIPTS

1 Linking the JavaScript files in Master Page

SharePoint CSSRegistration

ltSharePointScriptLink id=JsLink1 name=SiteAssetsjsmyjsjs runat=server LoadAfterUI=true

Localizable=rdquoFalserdquogt

or

ltscript type=rdquotextjavascriptrdquo src=rdquo_layoutsscriptsprojectfolderjscustomjsjsrdquogtltscriptgt

When using ScriptLink the files need to be relative to the Layouts folder Unlike the CssRegistration ScriptLink

has a property called lsquoLocalizablersquo and lsquoLoadAfterUIrsquo These properties will help load scripts after SharePoint

scripts loaded

2 Linking the JavaScript files through Web-part

a Insert HTML Form Web-part

b Add the Scripts link files and Script Code

3 Linking the JavaScript Libraries

a CDN links from Google and Microsoft

Adding web parts to a Page

raquo Click on Page Tab from Ribbon raquo Select Edit Button [ControlMode=EditampDisplayMode=Design] raquo Place the Cursor

where to add the Webpart

raquo Select Insert Tab from ribbon Select Web Part button

raquo Select Webpart from the list and click Add button

Edit Web Part Properties

raquo Hover on Web Part title bar Select drop down arrow raquo Select Edit web Part to change the settings

raquo Expand Appearance raquo Change the Chrome Type to disable the Header Title of the Web part This use to hide the

Titles when not require else leave the Default as Chrome Type

Link CSS

In 3 different ways

1 SharePoint Server Path

The above figure shows the CSS file path from SharePoint Server Path

2 SharePoint Portal Path

raquo Select Site Actions raquo under Dropdown Select View All Site Content raquo Style Library (or) SiteAssets

3 Linking Style sheet inside the Master Page

SharePoint CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 relativecssurl=SiteAssetsCssmystylescss

runat=server After=corev4cssgt

Conditional CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE 7

relativecssurl=SiteAssetsCssmystylescss runat=server After=corev4cssgt

Non IE Browser

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE

RevealToNonIE= True relativecssurl=SiteAssetsCssmystylescss runat=server

After=corev4cssgt

Link

ltlink href=Style20Librarycsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=SiteAssetscsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=_layoutsstylesprojfldrcsscustomstylescss rel=stylesheet type=textcss gt

Note This context is taken from the blog and more elaborated Link

httptommdalywordpresscom20120502sharepoint-cssregistration-or-link

Link SCRIPTS

1 Linking the JavaScript files in Master Page

SharePoint CSSRegistration

ltSharePointScriptLink id=JsLink1 name=SiteAssetsjsmyjsjs runat=server LoadAfterUI=true

Localizable=rdquoFalserdquogt

or

ltscript type=rdquotextjavascriptrdquo src=rdquo_layoutsscriptsprojectfolderjscustomjsjsrdquogtltscriptgt

When using ScriptLink the files need to be relative to the Layouts folder Unlike the CssRegistration ScriptLink

has a property called lsquoLocalizablersquo and lsquoLoadAfterUIrsquo These properties will help load scripts after SharePoint

scripts loaded

2 Linking the JavaScript files through Web-part

a Insert HTML Form Web-part

b Add the Scripts link files and Script Code

3 Linking the JavaScript Libraries

a CDN links from Google and Microsoft

Link CSS

In 3 different ways

1 SharePoint Server Path

The above figure shows the CSS file path from SharePoint Server Path

2 SharePoint Portal Path

raquo Select Site Actions raquo under Dropdown Select View All Site Content raquo Style Library (or) SiteAssets

3 Linking Style sheet inside the Master Page

SharePoint CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 relativecssurl=SiteAssetsCssmystylescss

runat=server After=corev4cssgt

Conditional CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE 7

relativecssurl=SiteAssetsCssmystylescss runat=server After=corev4cssgt

Non IE Browser

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE

RevealToNonIE= True relativecssurl=SiteAssetsCssmystylescss runat=server

After=corev4cssgt

Link

ltlink href=Style20Librarycsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=SiteAssetscsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=_layoutsstylesprojfldrcsscustomstylescss rel=stylesheet type=textcss gt

Note This context is taken from the blog and more elaborated Link

httptommdalywordpresscom20120502sharepoint-cssregistration-or-link

Link SCRIPTS

1 Linking the JavaScript files in Master Page

SharePoint CSSRegistration

ltSharePointScriptLink id=JsLink1 name=SiteAssetsjsmyjsjs runat=server LoadAfterUI=true

Localizable=rdquoFalserdquogt

or

ltscript type=rdquotextjavascriptrdquo src=rdquo_layoutsscriptsprojectfolderjscustomjsjsrdquogtltscriptgt

When using ScriptLink the files need to be relative to the Layouts folder Unlike the CssRegistration ScriptLink

has a property called lsquoLocalizablersquo and lsquoLoadAfterUIrsquo These properties will help load scripts after SharePoint

scripts loaded

2 Linking the JavaScript files through Web-part

a Insert HTML Form Web-part

b Add the Scripts link files and Script Code

3 Linking the JavaScript Libraries

a CDN links from Google and Microsoft

3 Linking Style sheet inside the Master Page

SharePoint CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 relativecssurl=SiteAssetsCssmystylescss

runat=server After=corev4cssgt

Conditional CSSRegistration

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE 7

relativecssurl=SiteAssetsCssmystylescss runat=server After=corev4cssgt

Non IE Browser

ltSharePointCssRegistration id=CssRegistration1 ConditionalExpression=IE

RevealToNonIE= True relativecssurl=SiteAssetsCssmystylescss runat=server

After=corev4cssgt

Link

ltlink href=Style20Librarycsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=SiteAssetscsscustomstylescss rel=stylesheet type=textcss gt

or

ltlink href=_layoutsstylesprojfldrcsscustomstylescss rel=stylesheet type=textcss gt

Note This context is taken from the blog and more elaborated Link

httptommdalywordpresscom20120502sharepoint-cssregistration-or-link

Link SCRIPTS

1 Linking the JavaScript files in Master Page

SharePoint CSSRegistration

ltSharePointScriptLink id=JsLink1 name=SiteAssetsjsmyjsjs runat=server LoadAfterUI=true

Localizable=rdquoFalserdquogt

or

ltscript type=rdquotextjavascriptrdquo src=rdquo_layoutsscriptsprojectfolderjscustomjsjsrdquogtltscriptgt

When using ScriptLink the files need to be relative to the Layouts folder Unlike the CssRegistration ScriptLink

has a property called lsquoLocalizablersquo and lsquoLoadAfterUIrsquo These properties will help load scripts after SharePoint

scripts loaded

2 Linking the JavaScript files through Web-part

a Insert HTML Form Web-part

b Add the Scripts link files and Script Code

3 Linking the JavaScript Libraries

a CDN links from Google and Microsoft

i httpwwwaspnetajaxlibrarycdnashx

ii httpsdevelopersgooglecomspeedlibrariesdevguide

b Add fallback and Scripts link files or Script Code

ltscript src=ajaxaspnetcdncomajaxjqueryjqueryminjsgtltscriptgt

ldquo ldquo url (using http or https automatically depending on what the site url is hosted)

ltscriptgt

Fallback to loading jQuery from a local path if the CDN is unavailable

(windowjQuery || documentwrite(ltscript src=scriptsjqueryminjsgtltscriptgt))

ltscriptgt

Uploading Images and CSS

1 14hive SharePoint Server Path

raquo UploadDeploy files for Images and CSS in the below path

cProgram FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATE

raquo Refer Coverv4css for CSS Class and IDrsquos (Note Donrsquot Duplicate or Modify the COREV4css)

2 SharePoint Portal Library Path

raquo Site Actions raquo Under Dropdown select View All Site Content raquo Style Library (or) Site Assets

Change the path as shown in below figure SiteAssetsImagescsssitecsscss

Note Style Library for Script files cause issues as the out-put renders for Style20Library path in browser address bar Sincere recommendation is to upload files in ldquoSiteAssetsrdquo folder with project name

Customization of Master Page

About Master Page Customization of the Master Page is the Meaning of Moving SharePoint Elements or controls and Adding HTML

Tags as per design suggested Converting HTML page to Master Page is not Possible without Replacing the Master Page

Related Elements and Name Space etc later which might cause to bring the issues in entire portal

Tip after editing the master page in SP designer export the page for sharing to development environment for this approach copy the whole content of master page and save in notepad with master extension rather than exporting with bugsissues or Edit the Master page in Visual Studio for minor tweaks

raquo Master Page in SharePoint 2007 is defaultmaster and in 2010 v4master

raquo Best practice duplicate v4master file and rename as per project specific Title

raquo Edit Master Page using SharePoint Designer or Visual Studio

raquo Open SharePoint Designer raquo Open Site raquo Select your Site Collection (httpmachienipportnumber)

Customizing Master Page

raquo Select Master Pages in Left Panel raquo Duplicate the v4master and rename to the project specific name

raquo Hide unwanted controls with ldquostyle=rsquodisplaynonersquordquo or place them in ltaspPanel runnat=rdquoserverrdquo visibility=rdquohiddenrdquo gt or

add class name ldquoms-hiderdquo

raquo Exporting master page cause issues due to Sharepoint designer specific derivatives appended As best practice copy

the master page context and paste in Notepad as save as master extension and encoding type ldquoUTF-8rdquo If editing

master page direct from Site from designer no need to export

Publishing Customized Master Page raquo Site Actions raquo Under dropdown select Site Settings raquo Galleries raquo Master Page and Page Layouts

raquo Click on Upload Button on Library Tool in Ribbon

raquo Choose Modified Master page and click OK to Upload

raquo Choose Content Type as Publishing Master page and click Check In to Publish

raquo Hover on Uploaded Custom Master page raquo Click down arrow under dropdown Select Publish a Major Version

raquo Add comments for changes in master page)

raquo Hover on Uploaded Custom Master page raquo Click dropdown arrow under dropdown Select ApproveReject

raquo Select Approved radio button fill comments raquo Click OK

raquo Site Actions raquo under dropdown Select Site Settings raquo Look And Feel raquo Master Page raquo Select the Custom master page

listed under the dropdown Check the ldquoReset all Subsitesrdquo to apply the same master page to entire SP portal

Adding Links in Top Navigation

raquo Site Actions raquo under dropdown select Site Settings raquo Look and Feel raquo Navigation

raquo Global Navigation raquo Check the Show sub sites amp Show Pages raquo Uncheck the same in Current Navigation (in case no left navigation is not require)

raquo Add Navigations by selecting Add Link or Add Heading Add Heading is to make a Group of Links Add Link is to link pages

raquo Re Order by moving the links up and down edit and delete to modify the navigation links raquo Current Navigation can be set at Sub site levels to get the Left navigations only at current level of the sub sites

Custom Breadcrumb 20072010

1 With text (lsquogtrsquo) as Separator

ltdiv class=BreadCrumbWrap s4-notdlggt

ltaspSiteMapPath runat=server SiteMapProvider=SPContentMapProvider id=ContentMap

CssClass=BreadCrumbStyle PathSeparator=ampgtgt

ltCurrentNodeStyle CssClass=BreadCurrentNode gt

ltPathSeparatorStyle CssClass=BreadPathSeparator gt

ltaspSiteMapPathgt

ltdivgt

2 With Image(lsquo|rsquo) as Separator

ltdiv class=BreadCrumbWrap s4-notdlggt

ltaspSiteMapPath runat=server SiteMapProvider=SPContentMapProvider id=ContentMap

CssClass=BreadCrumbStyle PathSeparator= gt

ltCurrentNodeStyle CssClass=BreadCurrentNode gt

ltPathSeparatorStyle CssClass=BreadPathSeparator gt

ltPathSeparatorTemplategt

ltimg src=sitesQrCargoStyle20Libraryqrcargoimagesseparatorjpg border=0

class=SplitterImagegt

ltPathSeparatorTemplategt

ltaspSiteMapPathgt

ltdivgt

Special Characters (httpwwwascii-codecom) for more Separators

raquo Add comments for changes in master page)

raquo Hover on Uploaded Custom Master page raquo Click dropdown arrow under dropdown Select ApproveReject

raquo Select Approved radio button fill comments raquo Click OK

raquo Site Actions raquo under dropdown Select Site Settings raquo Look And Feel raquo Master Page raquo Select the Custom master page

listed under the dropdown Check the ldquoReset all Subsitesrdquo to apply the same master page to entire SP portal

Adding Links in Top Navigation

raquo Site Actions raquo under dropdown select Site Settings raquo Look and Feel raquo Navigation

raquo Global Navigation raquo Check the Show sub sites amp Show Pages raquo Uncheck the same in Current Navigation (in case no left navigation is not require)

raquo Add Navigations by selecting Add Link or Add Heading Add Heading is to make a Group of Links Add Link is to link pages

raquo Re Order by moving the links up and down edit and delete to modify the navigation links raquo Current Navigation can be set at Sub site levels to get the Left navigations only at current level of the sub sites

Custom Breadcrumb 20072010

1 With text (lsquogtrsquo) as Separator

ltdiv class=BreadCrumbWrap s4-notdlggt

ltaspSiteMapPath runat=server SiteMapProvider=SPContentMapProvider id=ContentMap

CssClass=BreadCrumbStyle PathSeparator=ampgtgt

ltCurrentNodeStyle CssClass=BreadCurrentNode gt

ltPathSeparatorStyle CssClass=BreadPathSeparator gt

ltaspSiteMapPathgt

ltdivgt

2 With Image(lsquo|rsquo) as Separator

ltdiv class=BreadCrumbWrap s4-notdlggt

ltaspSiteMapPath runat=server SiteMapProvider=SPContentMapProvider id=ContentMap

CssClass=BreadCrumbStyle PathSeparator= gt

ltCurrentNodeStyle CssClass=BreadCurrentNode gt

ltPathSeparatorStyle CssClass=BreadPathSeparator gt

ltPathSeparatorTemplategt

ltimg src=sitesQrCargoStyle20Libraryqrcargoimagesseparatorjpg border=0

class=SplitterImagegt

ltPathSeparatorTemplategt

ltaspSiteMapPathgt

ltdivgt

Special Characters (httpwwwascii-codecom) for more Separators

Adding Links in Top Navigation

raquo Site Actions raquo under dropdown select Site Settings raquo Look and Feel raquo Navigation

raquo Global Navigation raquo Check the Show sub sites amp Show Pages raquo Uncheck the same in Current Navigation (in case no left navigation is not require)

raquo Add Navigations by selecting Add Link or Add Heading Add Heading is to make a Group of Links Add Link is to link pages

raquo Re Order by moving the links up and down edit and delete to modify the navigation links raquo Current Navigation can be set at Sub site levels to get the Left navigations only at current level of the sub sites

Custom Breadcrumb 20072010

1 With text (lsquogtrsquo) as Separator

ltdiv class=BreadCrumbWrap s4-notdlggt

ltaspSiteMapPath runat=server SiteMapProvider=SPContentMapProvider id=ContentMap

CssClass=BreadCrumbStyle PathSeparator=ampgtgt

ltCurrentNodeStyle CssClass=BreadCurrentNode gt

ltPathSeparatorStyle CssClass=BreadPathSeparator gt

ltaspSiteMapPathgt

ltdivgt

2 With Image(lsquo|rsquo) as Separator

ltdiv class=BreadCrumbWrap s4-notdlggt

ltaspSiteMapPath runat=server SiteMapProvider=SPContentMapProvider id=ContentMap

CssClass=BreadCrumbStyle PathSeparator= gt

ltCurrentNodeStyle CssClass=BreadCurrentNode gt

ltPathSeparatorStyle CssClass=BreadPathSeparator gt

ltPathSeparatorTemplategt

ltimg src=sitesQrCargoStyle20Libraryqrcargoimagesseparatorjpg border=0

class=SplitterImagegt

ltPathSeparatorTemplategt

ltaspSiteMapPathgt

ltdivgt

Special Characters (httpwwwascii-codecom) for more Separators

raquo Re Order by moving the links up and down edit and delete to modify the navigation links raquo Current Navigation can be set at Sub site levels to get the Left navigations only at current level of the sub sites

Custom Breadcrumb 20072010

1 With text (lsquogtrsquo) as Separator

ltdiv class=BreadCrumbWrap s4-notdlggt

ltaspSiteMapPath runat=server SiteMapProvider=SPContentMapProvider id=ContentMap

CssClass=BreadCrumbStyle PathSeparator=ampgtgt

ltCurrentNodeStyle CssClass=BreadCurrentNode gt

ltPathSeparatorStyle CssClass=BreadPathSeparator gt

ltaspSiteMapPathgt

ltdivgt

2 With Image(lsquo|rsquo) as Separator

ltdiv class=BreadCrumbWrap s4-notdlggt

ltaspSiteMapPath runat=server SiteMapProvider=SPContentMapProvider id=ContentMap

CssClass=BreadCrumbStyle PathSeparator= gt

ltCurrentNodeStyle CssClass=BreadCurrentNode gt

ltPathSeparatorStyle CssClass=BreadPathSeparator gt

ltPathSeparatorTemplategt

ltimg src=sitesQrCargoStyle20Libraryqrcargoimagesseparatorjpg border=0

class=SplitterImagegt

ltPathSeparatorTemplategt

ltaspSiteMapPathgt

ltdivgt

Special Characters (httpwwwascii-codecom) for more Separators

Adding Footer in Master Page

Add Before the ltSharePointDeveloperDashboard runat=server gt SharePoint Control Add CSS class=s4-

notdlg to avoid visibility of Custom Controls in Popup Dialog boxes

ltdiv id=footer class=s4-notdlg gt ampcopy Copy rights reserved ltdivgt

ltSharePointDeveloperDashboard runat=server gt

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 amp id to identify the zone area

1 Download the BlankWebPartPageaspx 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 ltWebPartPagesWebPartZone runat=server Title=lt$ResourcescmsWebPartZoneTitle_LeftColumngt

ID=LeftColumn gt

To ltWebPartPagesWebPartZone runat=server Title=TopLeftColumn ID=TopLeftColumn gt

5 Change the Title=lt$ResourcescmsWebPartZoneTitle_LeftColumngt these will get errors as these

6 Resources are defined in SharePoint

7 Upload the Custom Page layout

8 SharePoint 2010 is Complete Table structure so the web parts canrsquot be modified to Table less structure these will

push the zones and overlaps on other zones

9 Site master applied to only custom pages Created under ldquoPagerdquo

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 wonrsquot work For this Adding a HTML form webpart to the OOB Forms can give the result as expected

By going to the ListPageNameFormsAllItemsaspx

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

Form

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

httpepmsourcecom20110509showing-the-risk-or-issue-ids-in-the-workspace-edit-and-display-forms

To ltWebPartPagesWebPartZone runat=server Title=TopLeftColumn ID=TopLeftColumn gt

5 Change the Title=lt$ResourcescmsWebPartZoneTitle_LeftColumngt these will get errors as these

6 Resources are defined in SharePoint

7 Upload the Custom Page layout

8 SharePoint 2010 is Complete Table structure so the web parts canrsquot be modified to Table less structure these will

push the zones and overlaps on other zones

9 Site master applied to only custom pages Created under ldquoPagerdquo

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 wonrsquot work For this Adding a HTML form webpart to the OOB Forms can give the result as expected

By going to the ListPageNameFormsAllItemsaspx

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

Form

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

httpepmsourcecom20110509showing-the-risk-or-issue-ids-in-the-workspace-edit-and-display-forms

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

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

raquo As same as Editing the WORD document or

raquo Select the HTML raquo Edit HTML Source

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

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

raquo These columns having the width in percentage

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

raquo 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

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

raquo Insert a TABLE with require Columns place the cursor in the cell change Column width

raquo Insert a WEBPART place the cursor in the cell

raquo Select Insert tab raquo Select WEBPART tab

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

raquo Web part will be placed where cursor located

raquo Edit the Web Part Modify the Settings or Delete the Web Part at End Click Save amp Close to Publish the Page

Providing Anonymous Permission

Portal Level Permission Step 1

raquo Select SharePoint Web Application raquo Select the Authentication Providers from the ribbon

raquo Under the Authentication Providers Popup Dialog raquo Select Default link

raquo Under the Edit Authentication Type raquo Check Enable anonymous access

raquo Click Save

Step 2

raquo Select SharePoint Web Application raquo Select the Anonymous Policy from the ribbon

raquo Choose the Permissions to None - No Policy

raquo Click Save

Site Level Permissions

raquo Go to Site Actions - Site Settings

raquo Under Users and Permissions click on Site Permissions

raquo Under the Edit tab click on Anonymous Access

Step 3

Hide Ribbon base on the user permission (like anonymous users unauthenticated users)

raquo Add the below code above the ltdiv id=s4-workspace class=s4-nosetwidthgt

raquo Add CSS style lsquodisplaynonerdquo ltdiv id=s4-ribbonrow class=s4-pr s4-ribbonrowhidetitle style=displaynonegt

ltSharepointSPSecurityTrimmedControl ID=SPSecurityTrimmedControl2 runat=server

PermissionsString=ManagePermissionsgt

ltscript type=textjavascriptgt

documentgetElementById(s4-ribbonrow)styledisplay = block

ltscriptgt

ltSharepointSPSecurityTrimmedControlgt

_layoutscloseConnectionaspxloginasanotheruser=true

raquo This permission provides every visitor of the site donrsquot require to login In this case Sign in control should

avail on portal page for authenticate users

_spBodyOnLoadFunctionNamespush(myCustomFunctionName)

function myCustomFunctionName() My custom functionality

SP2010 Fix

IE 11 issues

1 Compatibility Settings to IE8

ltmeta http-equiv=X-UA-Compatible content=IE=8gt

2 Add URL to Security -gt local intranet -gt site

Scrollbar issue in Chrome ndash Resolution

In the Master page look for this

ltbody scroll=rdquonordquo onload=rdquojavascript_spBodyOnLoadWrapper()rdquogt and replace with this ltbody scroll=rdquonordquogt

Add the script to inside the body tag

ltscript type=textjavascriptgt $(function () chrome scroll fix ndash moved from body tag and after page load

onload=if (typeof(_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() if (typeof (_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() ) ltscriptgt

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android

raquo Insert a TABLE with require Columns place the cursor in the cell change Column width

raquo Insert a WEBPART place the cursor in the cell

raquo Select Insert tab raquo Select WEBPART tab

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

raquo Web part will be placed where cursor located

raquo Edit the Web Part Modify the Settings or Delete the Web Part at End Click Save amp Close to Publish the Page

Providing Anonymous Permission

Portal Level Permission Step 1

raquo Select SharePoint Web Application raquo Select the Authentication Providers from the ribbon

raquo Under the Authentication Providers Popup Dialog raquo Select Default link

raquo Under the Edit Authentication Type raquo Check Enable anonymous access

raquo Click Save

Step 2

raquo Select SharePoint Web Application raquo Select the Anonymous Policy from the ribbon

raquo Choose the Permissions to None - No Policy

raquo Click Save

Site Level Permissions

raquo Go to Site Actions - Site Settings

raquo Under Users and Permissions click on Site Permissions

raquo Under the Edit tab click on Anonymous Access

Step 3

Hide Ribbon base on the user permission (like anonymous users unauthenticated users)

raquo Add the below code above the ltdiv id=s4-workspace class=s4-nosetwidthgt

raquo Add CSS style lsquodisplaynonerdquo ltdiv id=s4-ribbonrow class=s4-pr s4-ribbonrowhidetitle style=displaynonegt

ltSharepointSPSecurityTrimmedControl ID=SPSecurityTrimmedControl2 runat=server

PermissionsString=ManagePermissionsgt

ltscript type=textjavascriptgt

documentgetElementById(s4-ribbonrow)styledisplay = block

ltscriptgt

ltSharepointSPSecurityTrimmedControlgt

_layoutscloseConnectionaspxloginasanotheruser=true

raquo This permission provides every visitor of the site donrsquot require to login In this case Sign in control should

avail on portal page for authenticate users

_spBodyOnLoadFunctionNamespush(myCustomFunctionName)

function myCustomFunctionName() My custom functionality

SP2010 Fix

IE 11 issues

1 Compatibility Settings to IE8

ltmeta http-equiv=X-UA-Compatible content=IE=8gt

2 Add URL to Security -gt local intranet -gt site

Scrollbar issue in Chrome ndash Resolution

In the Master page look for this

ltbody scroll=rdquonordquo onload=rdquojavascript_spBodyOnLoadWrapper()rdquogt and replace with this ltbody scroll=rdquonordquogt

Add the script to inside the body tag

ltscript type=textjavascriptgt $(function () chrome scroll fix ndash moved from body tag and after page load

onload=if (typeof(_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() if (typeof (_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() ) ltscriptgt

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android

raquo Edit the Web Part Modify the Settings or Delete the Web Part at End Click Save amp Close to Publish the Page

Providing Anonymous Permission

Portal Level Permission Step 1

raquo Select SharePoint Web Application raquo Select the Authentication Providers from the ribbon

raquo Under the Authentication Providers Popup Dialog raquo Select Default link

raquo Under the Edit Authentication Type raquo Check Enable anonymous access

raquo Click Save

Step 2

raquo Select SharePoint Web Application raquo Select the Anonymous Policy from the ribbon

raquo Choose the Permissions to None - No Policy

raquo Click Save

Site Level Permissions

raquo Go to Site Actions - Site Settings

raquo Under Users and Permissions click on Site Permissions

raquo Under the Edit tab click on Anonymous Access

Step 3

Hide Ribbon base on the user permission (like anonymous users unauthenticated users)

raquo Add the below code above the ltdiv id=s4-workspace class=s4-nosetwidthgt

raquo Add CSS style lsquodisplaynonerdquo ltdiv id=s4-ribbonrow class=s4-pr s4-ribbonrowhidetitle style=displaynonegt

ltSharepointSPSecurityTrimmedControl ID=SPSecurityTrimmedControl2 runat=server

PermissionsString=ManagePermissionsgt

ltscript type=textjavascriptgt

documentgetElementById(s4-ribbonrow)styledisplay = block

ltscriptgt

ltSharepointSPSecurityTrimmedControlgt

_layoutscloseConnectionaspxloginasanotheruser=true

raquo This permission provides every visitor of the site donrsquot require to login In this case Sign in control should

avail on portal page for authenticate users

_spBodyOnLoadFunctionNamespush(myCustomFunctionName)

function myCustomFunctionName() My custom functionality

SP2010 Fix

IE 11 issues

1 Compatibility Settings to IE8

ltmeta http-equiv=X-UA-Compatible content=IE=8gt

2 Add URL to Security -gt local intranet -gt site

Scrollbar issue in Chrome ndash Resolution

In the Master page look for this

ltbody scroll=rdquonordquo onload=rdquojavascript_spBodyOnLoadWrapper()rdquogt and replace with this ltbody scroll=rdquonordquogt

Add the script to inside the body tag

ltscript type=textjavascriptgt $(function () chrome scroll fix ndash moved from body tag and after page load

onload=if (typeof(_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() if (typeof (_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() ) ltscriptgt

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android

raquo Click Save

Step 2

raquo Select SharePoint Web Application raquo Select the Anonymous Policy from the ribbon

raquo Choose the Permissions to None - No Policy

raquo Click Save

Site Level Permissions

raquo Go to Site Actions - Site Settings

raquo Under Users and Permissions click on Site Permissions

raquo Under the Edit tab click on Anonymous Access

Step 3

Hide Ribbon base on the user permission (like anonymous users unauthenticated users)

raquo Add the below code above the ltdiv id=s4-workspace class=s4-nosetwidthgt

raquo Add CSS style lsquodisplaynonerdquo ltdiv id=s4-ribbonrow class=s4-pr s4-ribbonrowhidetitle style=displaynonegt

ltSharepointSPSecurityTrimmedControl ID=SPSecurityTrimmedControl2 runat=server

PermissionsString=ManagePermissionsgt

ltscript type=textjavascriptgt

documentgetElementById(s4-ribbonrow)styledisplay = block

ltscriptgt

ltSharepointSPSecurityTrimmedControlgt

_layoutscloseConnectionaspxloginasanotheruser=true

raquo This permission provides every visitor of the site donrsquot require to login In this case Sign in control should

avail on portal page for authenticate users

_spBodyOnLoadFunctionNamespush(myCustomFunctionName)

function myCustomFunctionName() My custom functionality

SP2010 Fix

IE 11 issues

1 Compatibility Settings to IE8

ltmeta http-equiv=X-UA-Compatible content=IE=8gt

2 Add URL to Security -gt local intranet -gt site

Scrollbar issue in Chrome ndash Resolution

In the Master page look for this

ltbody scroll=rdquonordquo onload=rdquojavascript_spBodyOnLoadWrapper()rdquogt and replace with this ltbody scroll=rdquonordquogt

Add the script to inside the body tag

ltscript type=textjavascriptgt $(function () chrome scroll fix ndash moved from body tag and after page load

onload=if (typeof(_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() if (typeof (_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() ) ltscriptgt

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android

raquo Click Save

Site Level Permissions

raquo Go to Site Actions - Site Settings

raquo Under Users and Permissions click on Site Permissions

raquo Under the Edit tab click on Anonymous Access

Step 3

Hide Ribbon base on the user permission (like anonymous users unauthenticated users)

raquo Add the below code above the ltdiv id=s4-workspace class=s4-nosetwidthgt

raquo Add CSS style lsquodisplaynonerdquo ltdiv id=s4-ribbonrow class=s4-pr s4-ribbonrowhidetitle style=displaynonegt

ltSharepointSPSecurityTrimmedControl ID=SPSecurityTrimmedControl2 runat=server

PermissionsString=ManagePermissionsgt

ltscript type=textjavascriptgt

documentgetElementById(s4-ribbonrow)styledisplay = block

ltscriptgt

ltSharepointSPSecurityTrimmedControlgt

_layoutscloseConnectionaspxloginasanotheruser=true

raquo This permission provides every visitor of the site donrsquot require to login In this case Sign in control should

avail on portal page for authenticate users

_spBodyOnLoadFunctionNamespush(myCustomFunctionName)

function myCustomFunctionName() My custom functionality

SP2010 Fix

IE 11 issues

1 Compatibility Settings to IE8

ltmeta http-equiv=X-UA-Compatible content=IE=8gt

2 Add URL to Security -gt local intranet -gt site

Scrollbar issue in Chrome ndash Resolution

In the Master page look for this

ltbody scroll=rdquonordquo onload=rdquojavascript_spBodyOnLoadWrapper()rdquogt and replace with this ltbody scroll=rdquonordquogt

Add the script to inside the body tag

ltscript type=textjavascriptgt $(function () chrome scroll fix ndash moved from body tag and after page load

onload=if (typeof(_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() if (typeof (_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() ) ltscriptgt

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android

Site Level Permissions

raquo Go to Site Actions - Site Settings

raquo Under Users and Permissions click on Site Permissions

raquo Under the Edit tab click on Anonymous Access

Step 3

Hide Ribbon base on the user permission (like anonymous users unauthenticated users)

raquo Add the below code above the ltdiv id=s4-workspace class=s4-nosetwidthgt

raquo Add CSS style lsquodisplaynonerdquo ltdiv id=s4-ribbonrow class=s4-pr s4-ribbonrowhidetitle style=displaynonegt

ltSharepointSPSecurityTrimmedControl ID=SPSecurityTrimmedControl2 runat=server

PermissionsString=ManagePermissionsgt

ltscript type=textjavascriptgt

documentgetElementById(s4-ribbonrow)styledisplay = block

ltscriptgt

ltSharepointSPSecurityTrimmedControlgt

_layoutscloseConnectionaspxloginasanotheruser=true

raquo This permission provides every visitor of the site donrsquot require to login In this case Sign in control should

avail on portal page for authenticate users

_spBodyOnLoadFunctionNamespush(myCustomFunctionName)

function myCustomFunctionName() My custom functionality

SP2010 Fix

IE 11 issues

1 Compatibility Settings to IE8

ltmeta http-equiv=X-UA-Compatible content=IE=8gt

2 Add URL to Security -gt local intranet -gt site

Scrollbar issue in Chrome ndash Resolution

In the Master page look for this

ltbody scroll=rdquonordquo onload=rdquojavascript_spBodyOnLoadWrapper()rdquogt and replace with this ltbody scroll=rdquonordquogt

Add the script to inside the body tag

ltscript type=textjavascriptgt $(function () chrome scroll fix ndash moved from body tag and after page load

onload=if (typeof(_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() if (typeof (_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() ) ltscriptgt

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android

documentgetElementById(s4-ribbonrow)styledisplay = block

ltscriptgt

ltSharepointSPSecurityTrimmedControlgt

_layoutscloseConnectionaspxloginasanotheruser=true

raquo This permission provides every visitor of the site donrsquot require to login In this case Sign in control should

avail on portal page for authenticate users

_spBodyOnLoadFunctionNamespush(myCustomFunctionName)

function myCustomFunctionName() My custom functionality

SP2010 Fix

IE 11 issues

1 Compatibility Settings to IE8

ltmeta http-equiv=X-UA-Compatible content=IE=8gt

2 Add URL to Security -gt local intranet -gt site

Scrollbar issue in Chrome ndash Resolution

In the Master page look for this

ltbody scroll=rdquonordquo onload=rdquojavascript_spBodyOnLoadWrapper()rdquogt and replace with this ltbody scroll=rdquonordquogt

Add the script to inside the body tag

ltscript type=textjavascriptgt $(function () chrome scroll fix ndash moved from body tag and after page load

onload=if (typeof(_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() if (typeof (_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() ) ltscriptgt

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android

SP2010 Fix

IE 11 issues

1 Compatibility Settings to IE8

ltmeta http-equiv=X-UA-Compatible content=IE=8gt

2 Add URL to Security -gt local intranet -gt site

Scrollbar issue in Chrome ndash Resolution

In the Master page look for this

ltbody scroll=rdquonordquo onload=rdquojavascript_spBodyOnLoadWrapper()rdquogt and replace with this ltbody scroll=rdquonordquogt

Add the script to inside the body tag

ltscript type=textjavascriptgt $(function () chrome scroll fix ndash moved from body tag and after page load

onload=if (typeof(_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() if (typeof (_spBodyOnLoadWrapper) = undefined) _spBodyOnLoadWrapper() ) ltscriptgt

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android

SP2013 vs SP2010

As this is not recommend for SharePoint 2010 project migration on SP2013 environment

Resource

Ribbon Styles and Visibility base on Permission

httpthechriskentcomtagspsecuritytrimmedcontrol

httpsympmarccom20081231spsecuritytrimmedcontrol-possible-values-for-permissionsstring

httpblogsharepointexperiencecom201208sharepoint-ribbon-css-tips-tricks

v5 Responsive Master Page httpkyleschaeffercomsharepointv5-responsive-html5-master-page

Questions and Answers httpsharepointstackexchangecom

References 1 httpsocialtechnetmicrosoftcomwikicontentsarticles8666sharepoint-2010-best-practicesaspx

2 httpwwwsynteractiveingenuitycomwordpress20120507sharepoint-2010-customizations-and-modal-dialog-

boxes

3 httpkyleschaeffercomsharepointsharepoint-2010-pop-up-dialogs

4 httpchakkaradeepcomindexphpusing-the-sharepoint-2010-modal-dialog

5 httpwwwtcscblogcom20110630creating-a-fixed-width-sharepoint-2010-masterpage-updated

httpwwwsharepointpromagcom

6 httpblogstechnetcombseanearparchive20110309how-to-create-a-sharepoint-2010-web-part-page-that-

inherits-the-site-s-left-navigationaspx

7 httptechmikaelblogspotin201108adding-left-navigation-menu-to-web-parthtml

8 httpxtrmdevtipsblogspotin201103custom-web-part-pages-with-navigationhtml

SharePoint 2007 httpofficemicrosoftcomen-insharepoint-designer-helpmodify-the-default-master-page-HA010100906aspx

Apps for SharePoint UX guideline

httpmsdnmicrosoftcomen-uslibraryofficejj220046aspx

General Front end coding standards

httpisobar-idevgithubiocode-standards

CSS standard refer the site

httpgoogle-styleguidegooglecodecomsvntrunkhtmlcssguidexml

httpmakewordpressorgcorehandbookcoding-standardscss

httpcodingsmashingmagazinecom2007051070-expert-ideas-for-better-css-coding

Scrollbar issue in Chrome

httpblogcreative-sharepointcom201202sharepoint-2010-2-simple-steps-to-fixing-scrollbar-issue-in-

google-chrome

httpbrainlavacomfix-for-sharepoint-2010-scrolling-for-chrome-ios4-android