Thursday, May 28, 2015

SharePoint 2013 Branding Step By Step

SharePoint 2013 includes several new features and capabilities to support branding aspects that includes better support for HTML5, Design Manager, Lots of Inbuilt design templates, Composed Looks, support for Responsive web design, HTML driven MasterPage.
This post is regarding step by step Sharepoint 2013 branding to have look and feel of internet facing site. This is also example of branding our SharePoint online live site.

Testing it out

I don’t have enough time to create my own HTML design so I went on the net and looked for something that would do. I downloaded this free theme: http://demo.templateworld.com/zero/download/dusky.zip
First I started by uploading the files in a folder called Dusky under https://niaulin-public.sharepoint.com/_catalogs/masterpage/ which is the url Design Manager gave me to upload my design files.
I recommend you map yourself a drive to that location because you will probably be going back and forth making adjustments and adding files.
Uploaded the files using the same structure provided in the .zip to make sure paths continued to work.

To get started make sure user logged in has proper rights atleast design rights in order to follow below steps.
Step 1: To create a master page go and click Site Settings icon
sharepoint-branding-1.png
Step 2: Select Site Settings
sharepoint-branding-2.png
Step 3: In the Site Settings --> Look and Feel --> select Design Manager.
sharepoint-branding-3.png
Step 4: In the Design Manager, -->Select Upload Design Files link.
sharepoint-branding-4.png
Step 5: Now open the link shown below to add content, html files, css, scripts for your new Master Page.
sharepoint-branding-5.png
Step 6: Add all the content required to create new master page such as html page, css styles, scripts. Click on Files in the ribbon and start uploading files in a newly created folder.
sharepoint-branding-6.png
Step 7: Create a new folder for example SPEmpower.
sharepoint-branding-7.png
Step 8: After creating the main folder, add contents like css, js,images ans html page inside this folder.
sharepoint-branding-8.png
Step 9: Create folders for css, javascript and images and also add html page.
sharepoint-branding-10.png
Step 10: Now to add document in this folder select Upload Document from File menu and a window will open, browse your document and then click on ok button.
sharepoint-branding-17.png
Step 11: Now another window will open, click on Save button to add that document inside the folder.
sharepoint-branding-18.png
Step 12: Same way you can add more css in this and to add Javascript and images do the same process, First create the folder and then add documents you want to add. After that add the html page. Here browse your html page and then click on Ok button.
sharepoint-branding-11.png
Step 13: After clicking on Ok button a window will open click on save to add this html page to your folder.
sharepoint-branding-12.png
Step 14: After adding all the content inside folder, below is organized look of all the files of our new master page
sharepoint-branding-19.png
Step 15: Next, Go to Design Manager select Edit Master Pages and then select Convert an HTML file to a SharePoint master page to convert your html page into the master page.
sharepoint-branding-20.png
Step 16: Select your Master Page folder.
sharepoint-branding-21.png
Step 17: Select the html page and click on insert to convert the html page into master page.
sharepoint-branding-22.png
Step 18: Now to see your converted page, Go to Design Manager then select Upload Design Files and open the below link
sharepoint-branding-23.png
Step 19: Now select the folder SPEmpower.
sharepoint-branding-24.png
Step 20: We can see the .html file as well as the converted .master file as well.
sharepoint-branding-25.png
Step 21: After doing all this. It's time to publish the content of your project. We publish every files within the folder such as css, images, .html page. To publish go to Design Manager and then click on Publish and Apply Design and then select Go to the master page Gallery.
sharepoint-branding-26.png
Step 22:Go to the project folder "SPEmpower".
sharepoint-branding-27.png
Step 23: Go to File menu and then select any content from the bottom by clicking on check box and then publish button will be enabled, click on publish button to publish the file.
sharepoint-branding-29.png
Step 24: When you click on publish a new window will open, If you want to add any comment with that add and then click on ok to publish that document.
sharepoint-branding-30.png
Step 25: Your master page is published now. By default SharePoint site uses Seattle.master page, to apply your master page to your SharePoint site. Go to SIte Settings and then select Master Page from Look and Feel
 sharepoint-branding-33.png
Step 26: Select our own master page to apply that to our site.
sharepoint-branding-34.png
Step 27: Select Site Master Page and from It's drop down list select your master page.
sharepoint-branding-35.png
Step 28: Select your master page as a System Master Page if you want apply custom master in system pages like Site Settings page.
sharepoint-branding-36.png
Step 29: Click on Ok to apply your master page to your site.
sharepoint-branding-37.png
Step 30: After applying the master page your site will look like this.
sharepoint-branding-38.png
Step 31: Here the main content of your site will come at the bottom of the page after footer. so you have to cut that main content placeholder from bottom and will have to add it in the proper place. you can do it by using SharePoint Designer.
sharepoint-branding-39.png
Step 32: Now first open your Sharepoint Designer and open your site from that.
sharepoint-branding-40.png
Step 33: Now from Navigation select Master Pages.
sharepoint-branding-41.png
Step 34: Now After doing this select your folder named SPEmpower.
sharepoint-branding-42.png
Step 35: Now select your html file Sharepointempower.html.
sharepoint-branding-43.png
Step 36: Now from Customization select Edit File to add any content in that file. you will not require to open Sharepointempower.master page whatever you will add in the Sharepointempower.html page,It will automatically update .master page.
sharepoint-branding-44.png
Step 37: Go through the code and will go to the bottom, you can see that after footer the MainContentPlaceHolder code is there. Just cut that selected div tag and paste it in the code where Main-Content section is given.
sharepoint-branding-45.png
Step 38: Paste that code in the selected section area called Main-Content.
sharepoint-branding-46.png
Step 39: Once It is done. Your Master page's MainContentPlaceHolder will be there in the center of the page.
sharepoint-branding-47.png


2 comments: