Practical Guide to SharePoint 2013 Article 12

Article 12

SharePoint Branding

In this Article :

• Change SharePoint look and feel
• Use themes
• Add new features using custom development

You 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 your 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.

13.  If you want to see how your site looks with this new design, apply the new master page to the site. First publish the master page. Go to Site Actions > Site Settings and click on Design Manager link. Click Edit Master Pages on the left side. Click ellipsis next to the index page to open the context menu.

Figure 12-5: Publish master page

Again click ellipsis to open the menu and select Publish a Major Version. Enter some comments in the Comments box, for example, the version number or date and click Ok.

14.  Go to Site Actions > Site Settings and click Master Page. In Site Master Page section, from the Default drop down, select the new master page (social/index365).  In Any Mobile Device drop down, select the new master page. Do the same in the System Master Page section. Make sure second option is selected and from All Channels drop down, select new master page. Expand Alternate CSS URL section and make sure third option is selected and then click Browse… button to locate main.css file in the Social/CSS folder. Click Ok to save the settings. If the css file is not published, you will be prompted to publish it first. Click OK to publish it. Once all the changes have been made, It is important to publish all files otherwise they won’t show up on the site. For now, you will see the files because you are in Edit mode but it is important to publish all files before making the site live. To publish, go to Social folder in Master Page Gallery and publish all files in all folders. For now, you can continue editing the site without publishing the files.

15.  Preview the home page in browser. You should be able to see the site. There is a JQuery slider under the top menu. The search box is messed up. Menu links are slightly misaligned. This is how the page looks at this time:

Figure 12-6: Home page using the new master page

Now the master page has been created and the home page is up and running. Now in the next section we will edit the master page and add/edit page elements. We will also create the remaining site pages.

Completing the Design

So now you have a master page, next task is to clean it up. As mentioned earlier there are two ways to edit the master page. One is to disassociate it from the HTML page and then edit, the other is to edit the HTML page and that will automatically update the master page. You will choose the second option, that is, to edit the HTML page. You can edit it in SharePoint Designer or any other text editor. For example, for simple tasks I use Notepad++. You can also use Notepad if you want but obviously using SharePoint Designer is a better option since it gives you multiple views to edit the page. You get a code view, and a design view. So open the master page in the editor of your choice. To open it in SharePoint Designer, open SharePoint Designer and browse to the mapped network drive and click Open. Then from the Social folder, right-click index365.html file and select Check Out and then again open the context menu and select Edit in Advanced Mode.

 

.

To read more about SharePoint Branding/to buy book, please visit following Amazon page:

Buy “A Practical Guide to SharePoint 2013” on Amazon.com