Learn how to build and export the visual design of a SharePoint site collection as a package.
New Design —A company with limited web design capabilities might contract a vendor agency to refresh their current SharePoint site with a more modern interpretation. The agency can create the site and easily package the contents for importing back into the company SharePoint farm.
Cross-Site Publishing —An enterprise IT department using cross-site publishing in SharePoint might have to share a visual design across multiple site collections. They create the site in-house and want a simple way to transport the design across several SharePoint websites. The design package functionality through Device Manager enables them to export and import with reduced administrative support and complexity.
This article can help you understand design packaging in SharePoint by providing an overview of package creation, and offers workflow guidance for package exporting and importing. It also discusses required permissions for specific operations, and design package architecture.
A user creates a design package, called a SharePoint solution package (.wsp file) on their SharePoint site, through Design Manager in Site Settings. The step for creating the package follows other Design Manager steps for branding and publishing a SharePoint site, including uploading design files, creating a master page, and editing page layouts. After the site is published, it is a relatively simple process to create the .wsp file for export.
Figure 1 shows the option in Design Manager for naming and creating the design package.
Alternatively, you can import a design package from another SharePoint site collection through Design Manager on the Welcome page, or by choosing Import design package in Site Settings.
For more information about Design Manager and the publishing process, see Overview of Design Manager in SharePoint.
If you want your design to be published on the target of import, you should publish all design assets or disable major versioning in design-related libraries on the source of export. Design Manager exports only the most recent version of each asset from the source. For example, if you have version 1.1 of a master page on the source it will be copied to the target as a draft. But, version 1.0 is not copied. Also, files that are checked out are not exported.
You can approach an end-to-end packaging workflow several ways, with much of the approach depending on your objectives and available design resources. You may decide to outsource to a vendor agency, or do the work in-house if you have internal resourcing. Table 1 provides a sample workflow and exchange between a client and a vendor agency over the design, exporting, and importing of the design package. It also provides the required permissions for design-related operations, and packaging operations.
Customer contracts vendor agency to create visual design.
The vendor designer creates site, based on company requirements.
Note: The vendor designer must have the Designers permission level to use Design Manager and create and export packages. More specifically, the Design permission that allows viewing, adding, updating, deleting, approving, and customizing visual designs.
Vendor designer exports visual design into a design package.
The vendor designer exports the SharePoint solution package (.wsp file) after completing the other required branding and publishing steps.
The design package is delivered to the customer via a secure channel.
Customer imports visual design into their specified SharePoint site collection.
The customer receives the design package via a secure channel.
Through the Welcome page in Design Manager or by choosing Import design package in Site Settings, the customer imports the .wsp file and applies the design package to the specified site collection.
Note: The customer must have the Designers permission level to use Design Manager and import design packages.
Several files are included in the design package .wsp file when it is created through Design Manager. The process exports files from various lists and libraries to form the overall package. While importing to a site collection, these files are distributed to different locations based on file type. Table 2 details the location and type of files exported during the assembly process.
In SharePoint, only customized files are included in design packages. The packaging process will not export most of the default non-customized system files.
Any created device channels, and their configurations, are also imported when the design package is unloaded. But, you have to re-associate master pages to specified device channels because these mappings will not be configured.
When importing a design package, an alternate CSS URL is not set, even if one was configured on the source of export. CSS classes should be stored in an external file in the Master Page Gallery and not in the master page file itself.