You can use the Design Manager tools in SharePoint 2013 publishing sites to create a branded theme for a site, and then export/import the design packages to other sites.

Are you familiar with the "FrontPage Effect"? Do you remember in the bad old days of static HTML document-based Web sites, in which many businesses used front-end customization tools like Microsoft FrontPage to make the site look pretty? The trouble here was two-fold

  • The themes weren't particularly attractive or intuitive
  • Everybody used the same in-box themes, hence the notions of "cookie cutter" Websites and the so-called "FrontPage effect"

Unfortunately, previous versions of SharePoint were also associated with the FrontPage effect. The bottom line is that businesses who adopt SharePoint need for their portals to reflect corporate branding (colors, logos, etc.), and also want a design that not everybody else has. How can we accomplish this goal in SharePoint 2013?

Option #1: Using a built-in Composed Look ^

SharePoint 2013 introduces a new way for site designers to quickly and easily revamp the look and feel of their sites. This feature is called the Composed Look. This option isn't the best for businesses who already have a brand identity, but at least you can get your SharePoint site closer to what you want, and then use another tool like SharePoint Designer 2013 to make the remaining master page, theme page, image, and font scheme customizations.

Access the Site Settings page of your SharePoint site, browse to the Look and Feel section, and click Change the look. You'll need to have Designer permissions or greater to make design changes to a SharePoint site.

As you can see below, you can change the look of your SharePoint site in just a couple mouse clicks. Select a design and check out the live preview. You then have the option to apply the new theme to the current site, or back out.

SharePoint 2013 includes a bunch of built-in themes

SharePoint 2013 includes a bunch of built-in themes.

If you change your mind after applying a theme and want to revert it back to the default, revisit the theme gallery and select the Office theme.

Option#2: Building your own Composed Look ^

You can actually create your own Composed Look and add it to the site collection gallery. Go to Site Settings > Composed Looks (from the Web Designer Galleries section) and click New Item. Composed Looks are composed of the following four files:

  • Master page: This defines the structure of the page
  • Theme page: This is an .spcolor file that defines site colors
  • Image: Site background image
  • Font Scheme: This is an .spfont the typography of the site. You can edit this file in a text editor

Microsoft and third parties have tools available to help you to create these assets. For instance, you can use the free Microsoft SharePoint Color Palette Tool (shown in Figure 2) to create or edit theme pages.

The SharePoint Color Palette Tool makes it easier to edit a site's color scheme

The SharePoint Color Palette Tool makes it easier to edit a site's color scheme.

Visit the Summit 7 Systems Web site to get more detail on using Composed Looks in SharePoint 2013.

Option #3: Using SharePoint Designer 2013 ^

I've written about SharePoint Designer 2013 here at 4sysops; you should read that piece to get good background on this freeware SharePoint add-on tool.

In addition to being an excellent way to administer SharePoint 2013 sites, we can also use SharePoint Designer 2013 to customize the site. That's the good news. The bad news is that SharePoint Designer 2013 no longer has a graphical design view. Unfortunately, you must edit the XHTML, XML, CSS, and JavaScript entirely by hand and rely upon the Preview in Browser function to see what your changes are doing to the underlying master or layout page. I show you the eyestrain-inducing interface in the screenshot below.

Customizing SharePoint pages by using SharePoint Designer 2013 is...painful

Customizing SharePoint pages by using SharePoint Designer 2013 is...painful.

Option #4: Using Design Manager ^

As long as you have the publishing feature activated in a site collection, you'll have access to Design Manager from the Site Settings page or from the option menu.

In a nutshell, Design Manager allows you to create a .wsp solutions package from the current, customized Web site, that can then be imported into other sites. Here's the step-by-step:

  1. Use SharePoint Designer 2013 to customize/brand your SharePoint site
  2. Use Design Manager on the local site to "snapshot" the current site as a solutions file
  3. Use Design Manager on other site collections to import the customizations

Take a look at the screenshot below; notice the 8-step process on the left side of the page. Those are actually live hyperlinks that enable you to perform various Design Manager-related tasks.

Design Manager is available only in SharePoint 2013 publishing sites

Design Manager is available only in SharePoint 2013 publishing sites.

Creating a design package is as simple as clicking Create Design Package from the Design Manager page. Give the solution a name, and you can then download the .wsp file.

To see the components of the aforementioned solutions package, simply change the extension to .cab and double-click the archive to open it.

A Design Manager package consists of a variety of template and support files

A Design Manager package consists of a variety of template and support files.

Conclusion ^

It's never been easy to customize a SharePoint site. The good news is that there is at least one good book out there on the subject, and if you have the money to do so, you can also hire a design firm to do the SharePoint branding for you.

0 Comments

Leave a reply

Please enclose code in pre tags

Your email address will not be published. Required fields are marked *

*

© 4sysops 2006 - 2021

CONTACT US

Please ask IT administration questions in the forums. Any other messages are welcome.

Sending

Log in with your credentials

or    

Forgot your details?

Create Account