Implementation of Branding – Design Packages and Composed looks

2 Apr

My next few posts will cover branding including design packages, composed looks, standard branding like SharePoint 2010 and navigation options. Keep in mind that all of this will be from a developers perspective and will mostly focus on how we as developers can take something that has been created by our designers and develop/deploy it regardless if it is in a design package, a composed look or a simple master page.

1. Design Packages – Are these useful to developers?
2. Composed Looks – How can these be deployed from a WSP we have built?
3. Standard Branding – Developing and deploying branding the same as SharePoint 2010
4. Navigation – The options
5. Style the masterpage

Design Package – What’s kool

Before I go into detail on using design packages for deploying changes, let me mention some kool stuff that can be half used with this just while in development, or pure config in production. The design manager has a few purposes, to specify what to do for different devices, allow users to add code snippets, create masterpages, manage display templates and page layouts. So you can see there may be bits and pieces you decide to use when using these new features. Keep in mind that you need publishing features turned on to access this kool stuff…

  • Firstly Device channels, these allow us to choose what to do with out site based on certain resolutions or device types. We can change css, images and choose what content gets displayed in what channels.
    http://msdn.microsoft.com/en-us/library/jj862343.aspx
  • Display Templates, these are used to display search content in search content web parts, or in search itself.
    http://msdn.microsoft.com/en-us/library/jj945138.aspx
  • Editing Masterpage and page layouts. The new masterpage functionality where you can upload a masterpage is pretty kool, i think its easier to give a designer the seattle.html file however, and then they can edit from there. I mostly say this as its easier doing it that way with the sharepoint components already added, than it is for sharepoint to add the bits back in. If you upload a master page directly it still needs a bit of tweaking to get it really going.
    http://msdn.microsoft.com/en-us/library/dn205271.aspx

Design Package (exported) – What’s inside?

Design packages look like a good thing for designers, or power users who do not have the skills to create a custom solution in Visual Studio to deploy branding. But as developers should we utilise this functionality? It’s worth having a quick look to see what a design package really is, there may be some components we can use.

Lets make some changes to our site first before we export a design package.

1. Go to Site Settings > Look and Feel > Design Manager

2. Click on Edit Master Pages

3. Click on Create a minimal master page

4. Type in a name for the master page and click OK

5. Now click on Create Design Package

6. Type in a name and click on Create. Once this is finished click on Your Package is ready. Click here to download.

7. Go to visual studio and create a new project. Select SharePoint 2013 Import Solution Package.

8. Click OK. Select farm as deployment type, then browser to your package. Click finish.

9. Below is what the design package should look like.

Feature 1 – List Instances

The first feature deploys list instances and content types related to themes. The content types and fields that are included here are OOTB ones, as we haven’t created anything.

Open the Composed Looks list instance.

You can see here that it is creating each item that already exists in the site it was exported from.

Feature 2 – Modules

Now expand the Master Page Gallery. Even though the WSP appears to deploy all of the composed looks and themes, it only adds in our custom master page (but all associated html files for the other master pages).

Scroll on down to Modules and expand the _catalogsthemeThemedC7475956_. This appears to deploy a whole bunch of stuff that already exists in the theme gallery under Site Settings, Themes > themed > C7475956.

Feature Three – Property Bag

The third feature deploys items into the property bag of the site collection.

Open up the PropertyBags elements.xml file. I don’t know about you, but I’m slightly scared by not knowing what all this is! Surely I don’t need this just to deploy my one master page! Also there seems to be some propertys set with a base URL of the site I exported from, not sure if this is good.

Let’s try and import the design package into a different site…

Create either a new site collection, or web app. We will import our exported wsp and see how it goes.

1. Go to your new site collection and enable the site collection publishing feature.

2. Go to design manager and on the welcome page click on Import a complete design package

3. Browse to the location of the exported wsp/design package from earlier and click Import.

4. Here’s the nice new waiting screen…

5. Once the import is done. Have a look at the site collection features, your’l notice that there are no features like we saw in the design package so these must be hidden away somewhere.

6. If you go to the design manager and look at Edit Master Pages you will see the master page that was created earlier.

7. The good news is, nothing appeared to break! However, our example was pretty simple using only one custom masterpage. It would be interesting to see how well this works with full site customisation including the search components and any device channels.

Conclusion – What can we get out of this?

Design packages look like a great way of moving around customisations and allowing designers to use their own tools to directly change master pages and components in SharePoint. However, as a developer I wouldn’t feel comfortable deploying one of these packages to production, it seems to be bloated and include a lot of items that don’t need to be deployed just so that we can have a master page or a theme. What it would be useful for is a designer doing what they need to do to get SharePoint styled on a test site collection, once they are done they could export all of their work and send it to the developer. From here the developer could extract the theme, font, master page files and anything else required.

We still need to make a decision however about if a theme is needed or just a standard master page deployed like we are used to previously. I will go in to this in the next couple of posts.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: