Wednesday, 27 February 2013

SharePoint 2013 - Branding Master and Layout Pages [ in Dreamweaver! :D ]

SharePoint 2013 offers a radically different approach to creating Master and Layout Pages for your sites. It introduces the new Design Manager in what I can only guess is an attempt to "dumb things down" for the new wave of web designers out there who no longer cut HTML by hand.

This new experience promises to make things vastly simpler by letting you use the HTML editor of your choice to develop your pages. Promises....but falls well short.

It does this by allowing you to import your design files in order to produce a master page which you then painstakingly have to shred in order to make anything happen. A distinct lack of documentation on how to achieve this caused additional headaches but...after failing several times to do it the right way, I decided to go down the path of least resistance and do it in reverse.

Creating your master page

I initially considering taking one of the OOTB publishing masters and duplicating this as my base but SP2013 won't let you do this. Custom masterpages are reliant on two files which are connected: the .master and the design-time .html file. The latter is the file you edit in order to influence the .master file.

So let's get started!

Go to the Design Manager and let's do things a little differently. I'll explain why as we go along.

Design Manager

  1. Skip steps 1 and 2 and move straight to 3 where you're asked to map a network drive to your site's masterpage gallery. When mapping the drive omit the &qout;_catalogs/masterpage/&qout; from the end and just go straight to your site's root. The reason for this is that you will want access to your entire site when we set up the remote site in Dreamweaver (or any other design tool).
  2. Now go to step 4 and select the Create a minimal master page link. Name it accordingly and once created, click the link to display the page in the browser. Bland, huh? But believe me, if you know how to mark-up and style HTML, this is FAR easier than working the other way around.
  3. Now open the Snippets gallery at top-right. This is where you can start adding the global elements you want for your page.
A word about Snippets

Upon opening the Snippets gallery you should be presented with the Top Navigation preview and mark-up. The preview window looks decidely bare. One of the reasons for all the bloated and mostly redundant markup is that SharePoint tries to include READ ONLY preview code so that the placeholder looks vaguely useful when viewed in your third-party design tool.

However, for top and vertical navigation elements this placeholder content is created using your existing site structure and navigation settings. If you haven't created any sites or pages then this is more than useless.

This leaves you with two options. Either go ahead and create some susbites and pages in advance to get a reliable preview of your final site. Or ignore it. I'd suggest the former. Despite all the bloated mark-up it's worth keeping in mind that this code is destined for our HTML file, which is used for preview purposes only.

Create your Site Structure and Navigation

So go ahead and do that now. Create some pages and subsites as per your final site structure just to flesh these snippets out. And also apply your site navigation settings. Then head back to Snippets so you'r eready for the next stage.

Create a Dreamweaver Site

If you're following best practice then the site you mapped a drive to will be on your development server. If not, it doesn't really matter but the ultimate goal behind all this branding work is that we will be creating a design package for distribution to production sites once we're done.

  1. If you haven't already authenticated a connection to your mapped drive. Do that now.
  2. Then create a new site. Name it and create a local site path.
  3. Then click Servers and add your mapped drive letter e.g. Z:\ in the server folder, and add the URL to your site.
  4. Click OK and connect to your site, showing the remote server files and you may notice something interesting. There's no _catalogs directory in which to draw down our masterpage! But never fear, just because Dreamweaver can't see this virtual directory, doesn't mean it can't connect to it.
  5. So open up your local site and create the folder structure we'll need for our branding files and also to fool SharePoint.
  6. Now copy your master HTML file across to this location. You can get to the masterpage gallery by typing _catalogs\masterpage after your drive letter.
  7. Switch back to Dreamweaver, select your master and Get this file. We've just created our virtual connection to this location - even though we still can't see it in the remote files!
  8. Now let's open our masterpage in preparation of adding our snippets.

Adding Snippets

Let's do some additional preparation by adding some DIV elements into the page in order to accept the snippets we'll be adding. Notably your site header for Site Logo, Site Title, Sign In, Search and Top Navigation snippets - assuming that's where you want them to go.

I'd also suggest creating a new css file for custom branding and style overrides. And also get all your image resources ready.

Now that we've done all the prep work it's time to start adding our snippets.

  1. Start with the Top Navigation and take a moment to look at some of the customisation settings. There's a lot you can do here to affect the appearance and functioanlity of this control. I prefer to leave the appearance settings alone and craft my own css styles to handle this.
  2. A couple of settings you may want to adjust, however, are under the Customization - Top Navigation ( AspMenu ) section.
    • StaticDisplayLevels: 2 [shows first-level of subsites as static items
    • MaximumDynamicDisplayLevels: 0 [default - no limit. Will show all levels of subsites and pages.]
  3. Click Update to apply your changes. Then copy the HTML snippet and paste it into the relevant container in your HTML master.
  4. Continue to do the same with the remaining placeholders and your page should start to take shape.

Web Parts and Other Elements

You'll notice that the Snippets gallery also allows you to add web part instances to your masterpage (and layouts). This is very powerful and a vast improvement when compared with the developer hell you had to go through to do this in previous versions.

Adding web parts to your master is completely optional and will depend on your requirements. Regardless, I would suggest leaving this for your layout pages, where they will then become editable via the UI.

You can also add Security Trimmed elemtns, Edit Mode panels and Device Channel specific content areas. Again, this will depend on your own requirements and I won't delve into any detail here.

Who > Ate > My > Breadcrumbs??

Looking at your page, you may be wondering why there is no Breadcrumb snippet available either here, or in the Layouts page Snippet gallery. This drove me batty for quite some time until I realised that a broken form of breadcrumb control was in fact on the page and embedded within the DeltaPlaceHolderPageTitleInTitleArea placeholder. Why? I have no idea.

Far too much time was spent trying to work out which SharePoint control was need to properly render these in the manner we're all used to - i.e. You are here: Home > Subsite > Subsite

Google relieved me somewhat by letting me know I was not alone with this issue and I eventually found a solution using the asp sitemap provider below. So just go ahead and add that to your page, or save it for your layouts if you choose not to have this globally visible.

Quick Launch - Vertical Navigation

Another oddity which I've yet to crack is the Vertical Navigation snippet. In the OOTB masterpages this displays your site menu as you would expect. But on appplication pages (such as People and Groups) it hides the site menu and either displays nothing, or the custom nav provider for those pages.

I tried all manner of tricks and additional placeholders to get this to work, even copying from the Oslo master, but still couldn't achieve this. I have to assume it's achieved with javascript but couldn't be bothered trying to work out how. If anyone does, please leave a comment.

In the end I crafted some javascript of my own that allowed the end user to hide/show this container as required on my system.master.

You can jQuery enable your site by simply adding a script reference after the customJSUrl tag.

Stylin'!

Now it's time to go ahead and and start adding styles to your elements. This is not a CSS tutorial but I would at least hope that you have applied a unique ID to all your DIVs so you're in a position to do this in a logical and structured manner.

I can save you some pain by at least showing you where you can safely reference your custom CSS files though. Inside the SharePoint:CssLink block is not the place. :) Add them just after this in order to give them priority. Tis avoids having to use the !important attribute all over the pace in your style overrides.

Wrapping up...

OK by now your masterpage should have taken shape. Of course it'll take quite a few previews in the browser before you get things just right. Upload the page to the server and then refresh the master preview in your browser.

When you're happy it's time to move onto creating layout pages. A word of warning here: get your masterpage right before creating your layout pages. If you have to re-edit your master for any reason, SharePoint forces you to re-attach your layout pages via the UI. This can have undesirable results and even break them due to server-side rewriting of your code. Yes...really.

Creating your Layout Page(s)

Back in Design Manager, skip past Edit Display Templates (another powerful feature which you can explore later) and move onto step 6. I won't spend a lot of time re-iterating what's already been said. You're essentially following the same method we used for creating the masterpage.

The only difference is that you will now be adding all your publishing page placeholders to the page, many of which are not present (for whatever reason) in the newly created layout page. There are also Edit Mode panels, Security Trimmed elements and web parts which you can use at your leisure.

Custom Content Types

If you have custom content types with additional fields, these may not be available in the snippets gallery. You can, hoever still reference them in your pages. You just need to know the field type and name (or ID preferably) and then add it to your page.

The example below assumes a Single Line of Text field.

Edit Mode Panels

These panels display only when the page is in Edit mode and can be very helpful to content authors by allowing them to add content that may otherwise only be added or modified via the Edit Properties form.

Good examples of this are the page Title and Rollup Image fields. I've provided my source below as a guide to help you get started.

Web Part Zones

WPZs are great. They provide wads of functionality to your pages and you can put them all over the place. There is really only one thing to be aware of here. SharePoint creats a unique ID for every web part zone you create. You can rename this to whatever you like but the important thing to note is that if you're creating more than one layout page (which you no doubt will) these IDs should map the the relevant zone(s) in each one. Otherwise your web parts will disappear when you change layout!

For example, if you have a Top and Bottom web part zone in one layout, you will want to make sure you use the same IDs in your other layout pages.

When you're done styling and layig out your new pages, go ahead and upload these too.

Conclusion

As you can see, there is a world of difference when it comes to creating and branding your sites in SP2013. In many ways I think Microsoft did a great job. Hopefully documentation will be provided soon to make it easier for people to add the myriad controls and other functionality to both master and layout pages.

An example of this is adding Rating and Comments fields to a publishing page layout. In my previous post I explained just how easy it is to do that...once you know how.

I hope you found this article useful and, as ever, I am open to any comments, suggestions, or corrections you may have to offer.

1 comment:

Wilson Wampers said...

Hi Paul,

Again thanks for this great useful article. No doubt it will help a lot.

Regards,
Kamagurka