- Understanding Azure service accounts - Fri, Mar 31 2023
- Azure PowerShell vs. Azure CLI - Wed, Mar 15 2023
- Use Azure Storage for backup - Thu, Feb 23 2023
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.
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.
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.
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:
- Use SharePoint Designer 2013 to customize/brand your SharePoint site
- Use Design Manager on the local site to "snapshot" the current site as a solutions file
- 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.
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.
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.
