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.
No comments:
Post a Comment