A Practical Guide to SharePoint 2013

A Practical Guide to SharePoint 2013
A Practical Guide to SharePoint 2013 - Book by Saifullah Shafiq

Thursday, May 8, 2014

SharePoint Branding Part 1

Y
ou have seen how SharePoint works in the online environment in the previous article. Now, let’s explore how you can brand SharePoint and create custom branded website for yoaur online public website.  To begin, you first need to design a site in the program of your choice, for example, Photoshop is popular program to design websites. You can also use Microsoft Expression Web to layout the site in HTML. Design the site and then convert it into HTML. SharePoint 2013 has made it easy to publish custom sites. An HTML site comprises of the html, css and javascript. SharePoint 2013 takes the HTML you create and automatically generates the master page. This is the most powerful tool introduced in SharePoint 2013. You can further customize the master page after it has been generated by SharePoint. SharePoint allows creating responsive designs and you can target multiple devices. SharePoint lets you target a different design for different devices. There is a new feature called Device Channels. You can design sites for multiple browsers. In this article, we will focus only on the desktop version of the site but targeting other platforms is easy. For this exercise, I have created an HTML site that you can download from the book’s website. Once you have downloaded the HTML site, you can start following the steps below to create a master page and a custom look and feel for your site.

1.      Login to your SharePoint Online site. Go to the public website and then go to Site Actions and select Site Settings. Click on Design Manager. Design Manager lets you change the look and feel of your site and your site does not look like a SharePoint site. Once you have created a custom design, you can use Design Manager to convert it into a master page. It is a new feature introduced in SharePoint 2013.  It makes it easier to create a fully customized, pixel perfect design. It is available in publishing sites because developing custom sites is something that is part of the publishing feature. It is available in both SharePoint Server 2013 and Office 365. It is the tools that you can use to manage all aspects of a custom design. The easiest way to upload and work on design files is to map a drive on your computer to the Master page Gallery of your site. This way you can work on the files directly on your local computer. 

2.      Before we start working on the design, first we have to map a local folder. Add your public website URL to trusted sites in your browser. Go to Tools > Internet Options > Security > Trusted Sites and then click Sites button. Copy URL to the text box and click Add. Click Close and then Ok.

3.      If you are logged into your site, log out and then login again and make sure you check Keep me signed in check box.

4.       Click on Design Manager in Site Settings. Click Upload Design Files.



Figure 12-1: Upload Design Files

Copy the link given on this screen. Make sure you highlight the URL by dragging the pointer over the link from start to end and then copy it, either by selecting Copy from the context menu or using Ctrl-C. Do not copy the shortcut from the context menu. You have to map your local folder to this online location. The steps below are for a Windows 7 machine. Steps for other operating systems may be slightly different. Open Computer by clicking the Start button and then clicking Computer. Click Map network drive.




Figure 12-2: Map network drive

5.      In the Drive list, click a drive letter. Choose any available letter.

6.      In the Folder box, paste the URL you copied above. You can also type the path manually.

7.      Select the Reconnect at logon check box. Also, check the Connect using different credentials.

8.      Click Finish. Enter your username (email) and password and check Remember my credentials check box and click Ok. This will create your mapped folder. If you get an error message, make sure you have copied the correct URL in the trusted sites in the browser. If everything seems ok but you are still denied access, then there is one option to overcome the hurdle but this is not recommended. In Internet Explorer, go to Tools > Internet Options > Security > Trusted Sites and then click Custom level… button at the bottom. At the bottom, in Reset custom settings, from the drop down, select Low and click OK. Click Ok again to close the options. Close all browser windows and open a new browser window and login to your public website and then repeat the mapping process described above and you should be able to map the folder this time.

9.      Now copy your HTML site folder to the mapped folder. Your HTML site should have following folder structure:



Figure 12-3: HTML site folder structure

For this exercise, you can download the HTML site from the download section of this book’s website. Unzip the folder to your local hard drive. It will have a site folder called Social. The folder structure of this site is shown in the above figure. Copy the whole folder (Social) to the mapped drive. You may have already noticed that the mapped network drive points to the master page gallery of your site. It has other out-of-the-box master pages also. Our new master page will reside in the Social folder on the server. We only need the index file to create the master page. Other pages will be created directly on the new site.

You need to be careful about one thing. The index page HTML should be XML compliant and should not have any missing tags or typos otherwise the conversion of HTML to master page may fail or you may get errors and warnings. In the Status column, you will see Warnings and Errors. Please note, even if apparently there is nothing wrong with the html file, you must validate it before trying to convert it. If you open it directly in the browser, it will work absolutely fine but Design Manager checks your page even for the tiniest of issues and reports errors if there are issues in the page, for example, if a starting or ending tag is missing, or a page directive is missing at the top, and so on. If you do get errors during conversion, click on Warnings and Errors link to view the issues. Fix the issues reported here and then try to convert the file again. Best way to fix all issues is to use an XML validator and then fix the issues before uploading the HTML file to the server. There are many free XML validators available online. Many sites let you check your pages free of cost online.

10.  Now that we have copied our HTML site to the master page gallery on the server, we are ready to convert the index file to the master page. Go to Site Actions > Site Settings. Click on Design Manager link. Click Edit Master Page link on the left.

11.  Click Convert an HTML file to a SharePoint master page link.

12.  Locate Social folder and click it. Select index file (index365.html) and click Insert button. Click Publish button when you are prompted. It won’t make any difference if you chose to not publish it yet. Within few seconds, the new html file will appear alongside other html files. A master page with the same name will also be created in the same folder. SharePoint modifies the HTML file and add various snippets. The ASP.NET master page contains all the required SharePoint controls. Design Manager is intelligent enough to ignore the ASP.NET code in the HTML page. Once the master page has been created, you should never edit it directly. If you need to make changes, make them in the HTML file. HTML file is linked to the master page. Any changes made in the HTML file automatically reflect in the master page. If you want to use the master page directly, first you have to disassociate the HTML file from the master page. To disassociate the HTML file, go to Site Actions > Site Settings and click Design Manager and then click Edit Master Pages. Click on ellipsis after the index365 file and again click ellipsis to open the menu and select Edit Properties.

Figure 12-4: Disassociate HTML file from Master page

Click Save button to save the changes.