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.
- 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.
- 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.
- If you are logged into your site, log out and then login again and make sure you check Keep me signed in check box.
- Click on Design Manager in Site Settings. Click Upload Design Files.
Figure
12-1: Upload Design
Files
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:
No comments:
Post a Comment