Monday, February 25, 2013

Enable HTML 5 in SharePoint 2010

In this blog, I would like to show you how we can enable HTML 5 in our SharePoint 2010 site.  

1. Create a new SharePoint 2010 project and use Empty SharePoint project template for your solution.

2. In SharePoint Customization Wizard, Give your site URL and select the Deploy as a farm solution from the below given options in dialog box.

3. Press the Validate button to validate the site URL. Once validation is done you will get another notification dialog box as depicted below.

4. Right click on solution and select the Add option from the context menu. Add a new Module from the SharePoint installed templates and named as "CustomHTMLMasterPage".

At the moment when you have added new Module "CustomHTMLMasterPage" in the solution, two more files have been added along with this module. Elements.xml,Sample.txt. You can delete Sample.txt file as it's not required in implementation.

5. Rename your feature name as "MyCustomMTML5MasterPage" and double click on the rename feature, Open the designer and change the Scope to site

6. Go to your hive 14 and  Do copy the V4.Master page from below mentioned path

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL

paste the copied master page in Module and rename as "MyCustomHTML5MasterPage".

7. Set the URL for the Master page as given in below screenshot

URL - through this we will tell to SharePoint that how we will put Master page in Master page gallery
_catalogs/Masterpage is the Sharepolint Master page Gallery.

Type - this tells the SharePoint the name of the file that we are going to put in Hive 14 in Master Page Gallery 

8. Now do the modification in your Master page to enable HTML 5. find the below mentioned tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
Simply remove everything behind “html” except the closing tag:
<!DOCTYPE html>

Your masterpage has a tag that pretty much says “Force this page to be rendered as an IE 8 browser would”. But IE 8 doesn’t support HTML 5 so get rid of it – delete the following line from your masterpage:
<meta http-equiv="X-UA-Compatible" content="IE=8"/> 


9. Right click on the feature and Add Event Receiver. 

In the added Event Receiver you will find the commented code. you need to implement below mentioned method inside this

a. FeatureActivated
b. FeatureDeactivating 


1 comment: