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.
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.
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:
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.
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.
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.
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: