Sharepoint branding step by step

Today I would like to write a few words about branding. I have to make branding for my company’s internal site and I would like to say that it was something new to me. I was working with SharePoint online and the current post is based on this environment. Let me point one thing at the begging. Microsoft in general is against branding, especially if you want to make some deep changes. I understand that, as I had cases that after some modification in SharePoint itself branding was destroyed. It’s very important in the case of Office 365 where some changes can be done by Microsoft without prior information. But in some cases site should look nice to the users, for example, if it’s the central site of the company, with marketing or business information. It should be good-looking. I will present my approach from my point of view as a guy who does not have graphic skills. Very often people ask

How to make Sharepoint not look as Sharepoint.

So how to make Sharepoint branding step by step? At the begging, we need a design for our site. We have to remember that we should avoid some features like flash or Silverlight.  On other hand, we can get really amazing results with HTML 5, javascript, Bootstrap, etc. You can find a lot of free designs on the Internet. For example, you check this site. Let’s download our template and then open it in Visual Studio or other editors. At the begging, we should remove everything which will not be used in our project, like scripts, images, pages, etc. Usually, we will stay with a single page, scripts and css’s. Also we should check if our project is not calling to external sites. It’s not big deal but we should remove everything with external HTTP links. In this case, user will get a warning about nonsecure content in every page refresh – it will very annoying to him. One more thing – images. Our master page can use for example slider or other solution with images. But it’s important to put images in Master Page Gallery! Of course, we can use the image library and put the link in HTML code. Unfortunately in this case we will see delay during image loading, which make this approach not useful to us. The last project, which you can see below was 1.8 Mb. And the images were half of this size. Also big size has Font Awesome.

Master Page
Master Page

Ok, let’s move to SharePoint. To make our branding possible we have to activate our site collection publish feature (Publishing Infrastructure): Site settings – > Site Collection Administration – > Site collection features and here we turn on SharePoint Server Publishing Infrastructure. It will take a while… Then we are going to Site Settings -> Site Features and turn on SharePoint Server Publishing. We can check that everything is in place if we can see the Design Manager option in the menu.

Design Manager
Design Manager

And the design manager is a new option in this version of SharePoint. More information you can find at the MSDN site. This amazing tool provides to us the possibility to convert HTML projects into a master pages. Let’s move to the Design Manager page. We will see their menu as below:

Design Manager Menu
Design Manager Menu

There are the following options there:

2. Manage Device Channels – here we can configure display options based on device

3. Upload Design Files –  files loading to the server

4. Edit Master Pages – we can convert our project into master page here, and also we can create some SharePoint snippets

5. Edit Display Templates – we are checking display templates there

6. Edit Page Layouts – we create here new  page layouts

7. Publish and Apply Design – and here we can publish our master page

8. Create Design Package – Finally, we can create a package that can be reused in other projects.

Let’s move forward

Let’s send our data to the Office 365 server. From the design manager menu, we select the option Upload Design Files. We will see a link to the  Master Page Gallery. We can click it and the library should be mapped as a local network disk. And there we should load our data. One thing. This option works well with internet explorer, even Windows 10 Edge doesn’t work correctly with this feature. If the previous operation wasn’t successful you can copy the link, open a new card in IE, and after displaying content of the master page gallery we can press the option: Open with Explorer.

Master Page Gallery
Master Page Gallery

After some time content of the master page folder should be mapped as a network drive. If it’s still doesn’t work you can check this link to try solve the problem. Create a folder for our master page and load the content of our project – do not load single files into the root, as we get a mess there. The next step is the publishing of all items which were sent to the server. To avoid clicking item be an item we can use the option: Site Content and Structure, where we can publish multiple items wing one click.

Site Content And Structure
Site Content And Structure

After publishing all files it’s time for the final move. Go to the design manager and select option: Edit master pages, and then: Convert an HTML file to a SharePoint master page. We select our HTML page, which should become a master page. After some time our brand new master page should become visible. It’s important that the status should be Conversion successful.

Convert to master page
Convert to master page

If we get some errors we should remove code that is the source of the problem. Ok, it’s time to publish our master page. Again move to the master page gallery and again select our HTML file and press publish. We do not click on the master page, which exits now there!

Small remark here. We always work with HTML files, not the master page itself. It’s the SharePoint task to synchronize all changes which we make to the page. Ok, that’s all for today. We made our first SharePoint branding step by step. In the next post, I will try to show you some new coll features during the branding, which are available to you out of the box.

Do you like this post? Check another post related to the topic: