The first thing that caught my eye once i logged on to SharePoint 2013 was the design Manager. I presently introduced it shortly. In the previous I’ve centered on studying to model SharePoint making use of CSS and of course the instrument that most of us employed to integrate our CSS or new Master Pages was SharePoint Designer.

SharePoint Designer is no longer the popular tool

With each of the noise close to SharePoint 2013 these days, you may not have noticed one thing about SharePoint Designer. There is no for a longer time a “Design” see for web pages. It really is only accessible in CODE Check out.

The design Manager is SharePoint’s solution to Branding and up to now, I like what I see.

9 Steps Branding Program

The design Manager help the “Designer” from the website by supplying 9 actions to brand name the site. The measures are not all mandatory, in fact you almost certainly won’t use all of these collectively. I presently lined the first steps around Device Channels, this time I need to concentrate over a characteristic I maintain listening to about: Design Packages

I discovered a great TechNet write-up that handles a lot of the new Web content Management features.

Get ready for this, you need to do not need to edit Master Webpages any more. You are able to possess a Professional Designer or your self, develop an HTML style using tools like Dreamweaver and SharePoint 2013 Design Manager will change it for you personally.

Screening it out

Very first I started out by uploading the information within a folder called Dusky which can be the url Design and style Supervisor gave me to add my design and design documents.
I like to recommend you map yourself a drive to that area since you’ll almost certainly be going back and forth making changes and adding documents.

Uploaded the files making use of exactly the same construction supplied within the .zip to create sure paths continued to operate.

Once all the files were uploaded, I went back to the Design Manager, on STEP 4 Edit Master Pages and clicked on the option at the top to Convert an HTML file to a SharePoint master page.

(In the browser that pops up, make sure you select All Master Pages from the drop down to see all your files)

Once completed, make sure the Status is set to Conversion Successful

What happened?

Effectively in the event you go back to your “Dusky” folder in this case, you are going to discover that SharePoint created a .Learn file or learn page for our style. Don’t contact it, any further modifications will likely be produced for the html file which was uploaded and converted previously. During the conversion, SharePoint extra some “controls” to make fundamental stuff just like the ribbon and also the main content perform by incorporating “Snippets”. I’ll go over those shortly. Quickly let us appear on the differences in your preferred HTML Editor.

And of course you can search on the HTML code to look at the distinctions.

Previews

Now back again in the Design Manager, should you click the file name of the transformed HTML page it’ll open up up a preview from the new design and style. This is a dwell preview in SharePoint of one’s style, but by default it only displays you generic placeholders, which means the ribbon and exactly where the content material would go (usually in the base)

If you want you can use the “Change Preview Page” toggle at the top left to generate a preview of your new design with an existing page or create a new page for this preview. This will help you see where and how will the content show up in this new design as well as other snippets as we add them.

Now I see how the house webpage would appear like in my new design. Fairly Neat!

Some controls are missing

Certainly there are some main concerns here, exactly where is my Worldwide Navigation and/or Quicklaunch, where will be the Lookup Box, etc.. When we did our HTML (or in cases like this took a free 1 from the web) there was no concept of “SharePoint” only design. Which is exactly where the “Snippets” from the Design Manager can be found in.

Snippets are pieces of code that Design Manager will generate for you to add in your custom HTML for the SharePoint controls to appear correctly once integrated. Let’s look at upgrading our design a little.

Here is a short summary of the SharePoint code snippets generator

Within this scenario I am taking the default Leading Navigation which seems by default in from of up and copied it to my clipboard.

Next we want to include this inside our transformed HTML (not the grasp web page) and take away the static navigation that exists. Once the file up-to-date, I went again into “Preview” mode to determine what it appeared like.

Ideal we have a functioning global navigation, if I’d the time I might have specified much more choices like CSS classes I needed to utilize within the Snippet before I generated the code and replica pasted it to my HTML.

Utilizing what we realized, I re-opened my convereted HTML web page from my now mapped folder (so useful!) and removed all of the sample content that came using the totally free design and style we downloaded. I also employed the Snippet Generator to get my Lookup Box. Listed here is my new home webpage.

Conclusion

Well we just produced a new SharePoint branding for SharePoint 2013 with nothing at all but the Design Manager. Wow now that’s powerful. Did not even open SharePoint Designer. Should you looked at the Snippets choice previously, there is a tool Channel container snippet which will assist you to pick what’s going to look on which gadgets. Just amazing.

Hope this was helpful.