5

SharePoint Themes

WHAT’S IN THIS CHAPTER?

• Themes are not what they used to be
• Creating themes using Office applications
• Where do themes get stored?
• Exactly what gets changed with a theme?

What exactly are SharePoint themes, and what can they do for your branding and design schema? SharePoint themes are a basic method of changing the colors and fonts of your SharePoint sites without knowing any code at all. This method will not change or affect any of the positioning of items on your site; it will only change the colors and fonts used within the site.

In the past, SharePoint themes required the creator to know how to work with CSS and where to store the theme files in the web server properly in order for them to work. In SharePoint Server 2010 the way themes work has completely changed. Now there is a new theme engine, and the functionality of themes has been transformed.

SHAREPOINT THEMES AND BRANDING

How do themes apply to branding? They are now a method that end users can employ to develop their own branding for their sites. The theme engine has changed to become more familiar to users if they have used previous versions of PowerPoint. These new themes are easier to create but not as powerful as a custom CSS file or custom master page when it comes to branding and design for SharePoint Server 2010. It is a basic method for simply changing the color scheme of your site.

Changes to SharePoint Themes

The way themes worked in the past made it more difficult to use them for different sites to differentiate different items. With the changes to the Theme engine and the power to create and modify themes, more people can now create their own themes for use in sites.

Nevertheless, you still need to make informed decisions about when to create custom themes and how they are applied across sites. Allowing free-for-all theme creation will be a great asset in places like My Site, but for your corporate intranet it may make your sites difficult for your main user base to navigate and understand. Still, there are times when a custom theme may be the best option out there for branding your SharePoint Server 2010 sites.

When to Use a Theme

You should take many things into consideration when planning your branding and design needs for SharePoint 2010. You need to consider the desired end result of your design for the user interface.

If you simply want to change the colors and fonts of your SharePoint 2010 site, a theme may be the best option for you. The biggest limitation with a SharePoint theme is that it will simply change the colors and fonts; it won’t change the position of any items on the page.

A theme can be used in conjunction with a custom master page and even with a custom CSS file. There are times when this may be used to advantage by allowing end users to take control of their own sites. This ownership can help to improve end-user adoption by allowing users to feel more in control than ever when it comes to creating a site.

For large corporations some people want to show division among markets or departments. This would be a great place to use one of the new SharePoint Server 2010 themes. You can work in conjunction with a custom master page to create a strong design that is “themable” and then allow the individual groups to create themes to set themselves apart.

Where Can Themes Be Created?

In SharePoint Server 2010, you have several options for how to create themes for your sites. The new theme engine uses the same .thmx files that can be created in the Microsoft Office Suite. This means that you can create themes for SharePoint in your favorite Office programs. You can even use themes from previous versions of the Office Suite. This is one of the biggest advantages in the revamp of themes in SharePoint Server 2010.

One of your options is to create or use an existing theme from PowerPoint. To create a theme file in PowerPoint, you simply create a new slide design. You can also use any of the existing PowerPoint themes for branding your SharePoint 2010 sites. If you want to customize a theme, create a new theme, or use a theme that already exists in PowerPoint, you can go to the Design tab in the Ribbon to perform this action as shown in Figure 5-1.

The Design tab of PowerPoint enables you to create your own theme color palette, select your fonts, and even add images to be used in your PowerPoint theme. When adding images into this theme, you need to take into consideration that not all the images will translate over to your SharePoint 2010 site.

When you create your own theme or customize an existing one, you can make use of the color palette selection panel. This panel is very similar to what you encounter in the SharePoint 2010 browser experience of creating a custom theme. Once you’ve made your selections, name your theme and click Save to use it in your SharePoint 2010 sites like in Figure 5-2.

You can also use these theme files in any of the Office Suite applications. If you’re creating a theme from Word, you use the Page Layout tab in the Ribbon as shown in Figure 5-3 to access the theme and its associated components.

The method for selecting your theme colors in Word is also very similar to how these theme colors are created and selected in the browser experience using SharePoint 2010. You can see this in Figure 5-4 with the color selection panel in Word; open this panel by selecting to create new theme colors under the Colors option. Once you have made your selections, name your theme and click Save.

You may be wondering why I have shown you how to create themes in both Microsoft Office Word and PowerPoint. This is because many companies have already done this work, so you may already have a theme created that can be used in your SharePoint 2010 sites. Also, if you are looking to use a theme in any type of SharePoint 2010 site other than publishing, you’ll need to create your themes in an Office application and then upload and apply them to your sites.

Creating themes in the browser for publishing sites is similar to creating them in Office applications. The difference between the browser experience and the in-application theme creation experience is minimal, but the display of a theme is much different, as you can see in Figure 5-5.

In a later section of this chapter you learn how to create a theme using the in-browser experience of SharePoint Server 2010.

Goals of Themes

When working with themes you need to make sure that you have a clear goal. Having an expected outcome in mind will help you as you create the theme and influence changes to your sites. SharePoint 2010 themes work with a selection of 10 main colors and then variations of these colors are generated by the product and these colors will then be used to create the design of your site. You should also have a firm goal in mind when it comes to the fonts that you would like to use in your site and how those will come across to every one of your end users.

What Will It Change?

SharePoint themes can be used to change colors and fonts for all pages of your SharePoint site, including the site settings and the modal windows, depending on how you elect to apply and inherit a theme. You can see a custom theme applied to a publishing site in Figure 5-6.

Out-of-the-Box Themes vs. Custom Themes

The decision to use an out-of-the-box theme versus a custom theme is all about how far you want to take the customization. Table 5-1 lists the 21 different themes you can use on a SharePoint 2010 site. When you start moving into custom themes you will have more options for the types of colors and color combinations you can use.

Table 5-1: Out-of-the-Box Themes

THEME NAME	DESCRIPTION OF THEME
Default	Prominent Colors: Blue and Gray Font Used: Calibri
Azure	Prominent Color: Aqua Font Used: Verdana
Berry	Prominent Colors: Burgundy and mustard Font Used: Trebuchet MS
Bittersweet	Prominent Colors: Pumpkin and sage Font Used: Georgia
Cay	Prominent Colors: Light gray and purple Font Used: Verdana
Classic	Prominent Colors: Two shades of blue Font Used: Verdana
Construct	Prominent Color: Blue-gray Font Used: Trebuchet MS
Convention	Prominent Colors: Dark aqua and gray Font Used: Verdana
Felt	Prominent Colors: Olive and gray Font Used: Verdana
Graham	Prominent Colors: Brown and cream Font Used: Georgia
Grapello	Prominent Colors: Gray and purple Fonts Used: Arial, Trebuchet MS
Laminate	Prominent Colors: Taupe and purple Font Used: Verdana
Mission	Prominent Colors: Tan and brown Font Used: Verdana
Modern Rose	Prominent Colors: Pink and gray Font Used: Verdana
Municipal	Prominent Colors: Red and gray Font Used: Verdana
Pinnate	Prominent Colors: Black, gray, and green Fonts Used: Arial, Trebuchet MS
Riccaso	Prominent Color: Gray Fonts Used: Arial, Trebuchet MS
Summer	Prominent Color: Green-gray Font Used: Calibri
Vantage	Prominent Colors: Blue and orange Font Used: Verdana
Viewpoint	Prominent Colors: Purple and light sage Font Used: Verdana
Yoshi	Prominent Colors: Black, white, and orange Font Used: Verdana

If you are looking to create a theme that will match your company or personal style and design, you’ll more than likely embark on the custom theme route. When you create custom themes you can specify web-safe colors for use in your site.

If you choose a custom theme for your SharePoint 2010 site you should consider the amount of control you would like on your sites. Some of the things that you might want to have control over with a theme is which themes people can choose from and at what level they can choose a theme at. Themes are now easier to create, which will also translate into the need for more control for site collection administrators.

Themes Infrastructure

Simply understanding how to create themes and what they will change is not enough. You must also understand how the themes work and how they’re applied and stored. This will give you a better sense of how you can reuse themes throughout your sites and the best method for creating and applying them as you work on your SharePoint implementation.

How Are Themes Stored?

In SharePoint Server 2010, themes are stored in the Theme gallery, which is a specialized document library. You can access this library by navigating to Site Actions ⇒ Site Settings ⇒ Galleries ⇒ Themes.

You can upload your own .thmx files using the Add New Item link at the bottom of the gallery in Figure 5-7.

When you select the Add New Item option in the Theme gallery you are presented with the Upload Document modal window, which is the same window you get for any document library. This modal window is shown in Figure 5-8.

Once you browse to and select the .thmx file that you want to upload to the Theme gallery, you are prompted to name your theme and give it a description. The name that is given here is the one that will be displayed in the theme selection menu of your site. The description is purely saved with the theme file in the library, but not displayed anywhere so it is not necessary. The dialog box where you are prompted is shown in Figure 5-9. Because this name is the one that will be displayed as your theme name, you want to make sure that it’s a clear name that accurately describes the theme to your users.

You can also add themes to the server. You can locate the theme files on the server by using the following file path: C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TemplateGlobalListsThemes.

CSS Calls with Themes

The order in which style sheets are applied to a SharePoint site is important to designers. In the previous versions of SharePoint a theme that was applied to the site was called in the CSS order near the end of the server load. In SharePoint 2010, the theme is called first, when the site is loaded. Other out-of-the-box style sheets are applied after the theme.

How a Theme Affects the CSS File

With the drastic changes to the way themes are created in this version of SharePoint, there has also been a change in how the CSS that controls SharePoint works for themes. In previous versions a theme was created by customizing a CSS file and the classes to fit your needs. A theme in the current SharePoint 2010 theme engine does not create a CSS file, only a .thmx file.

To determine how a theme is applied and how this affects the CSS for your site you can look at the files in SharePoint Designer 2010. You will notice that themes in the _themes folder are displayed as their .thmx file. If you open this file to edit it from the SharePoint Designer menu, it will open the theme file in PowerPoint. You can see this file structure in Figure 5-10.

When you apply a theme to a SharePoint Server 2010 site, the theme is translated by the server and a series of corresponding CSS and image files are created at run time. You can examine these files in SharePoint Designer 2010 as shown in Figure 5-11.

These files are used to generate the SharePoint site on the server. You will notice that, much like the Microsoft Office SharePoint Server 2007 theme files, each theme file is amended with a random number, and themes that have been applied to the site are stored in the _themes folder. If you would like to take the theme further and progress to custom CSS, you can use this set of CSS files and images as a starting point for further customizations.

You can also view out-of-the-box CSS files in SharePoint Designer 2010. When you view these files you will see the CSS files that are applied to your site at run time and that are stored in the content database. You might also need to examine some of the CSS files stored on the web server. You can see the CSS files applied to a default non-customized publishing site in Figure 5-12.

When you examine the out-of-the-box style sheets in SharePoint Designer 2010, you’ll notice that the classes that will change with the application of a theme have been commented out so you can tell what theme element will affect the class. This is a bonus because you can now start to translate and examine what color options will change as you apply them in a theme format. You can see these commented classes in the following code sample:

These commented styles in the out-of-the-box CSS will be a great aid in working with themes to create a more custom look. If you would like more control over the styles and how they can be customized using a SharePoint theme, you can create a custom CSS sheet that blocks the customization of a particular class by the theme file.

Using Themes across Products

The unification of theme files that can be used across the Microsoft product stack is an added bonus with this version of SharePoint Server 2010. This also allows many who have already invested in creating custom themes for Office products to use them in their SharePoint sites for a more custom look than they would get using out-of-the-box features.

CREATING THEMES

Previous sections of this chapter described how you can edit an Office theme from one of the Office applications and add these customized theme files to your SharePoint sites. The other option for creating a custom theme is to use the in-browser experience of a SharePoint Server 2010 publishing site. You can do this by navigating to Site Actions ⇒ Site Settings ⇒ Look and Feel ⇒ Site Theme.

Customizing Colors and Fonts in Your Site

When you start out in a publishing site of SharePoint Server 2010, you can create your own custom theme files. Simply navigate to the theme section in Site Actions ⇒ Site Settings ⇒ Look and Feel ⇒ Site Theme and start selecting your custom colors for the site.

Pick a theme name and then start making your customizations. Next to each color there is a link to Select a Color. When you click this link, it will load a modal window of the color selector as shown in Figure 5-13. In this modal window you can either select a color using the standard colors or you can add your own custom hexadecimal color number and apply that. You will have more color options if you use custom hexadecimal color numbers instead of the colors shown in the hexagon of colors displayed in the modal window.

Also in the top section with the color selections you have the option to change the fonts used in the site. You should note a couple of things in this font selection section. The fonts that are displayed as options in this section are any fonts installed on your web server. The implications of this are that not all fonts are web-safe fonts, and they may not display properly for all users. You can see the font selection options in Figure 5-14.

Now that you have customized the colors for your theme and also the fonts in your theme, you will need to examine how this theme looks when applied to your SharePoint 2010 sites. In previous versions you would have had to apply the theme and then navigate to the site to see how the theme affected the pages. With the new version of SharePoint you have the option to preview the theme while still in the Site Settings page.

By simply selecting the Preview button on the Site Theme page, you will see a modal window display that gives you an accurate view of how your custom theme will appear. This modal window is shown in Figure 5-15.

Now that you have seen how your theme will appear in the browser as applied to your SharePoint site, you can either make further changes or you can choose to apply your theme to your sites. You have two options for how these themes are applied. You can choose to apply only the selected theme to this site or apply the selected theme to this site and reset all subsites to inherit this setting. You also have the ability to inherit themes from this menu. The Apply Theme settings are shown in Figure 5-16.

Design Separation

When you create custom themes for SharePoint Server 2010 you must keep in mind that this is a method for changing the colors of your site, but not a method for changing the design elements of the site. This means that you can change the colors and fonts, but not the placement of many of the default elements that are contained on the pages. Some of these default elements are the navigation, search, and footer components.

Themes are separated from the design layer of SharePoint sites. The design of SharePoint 2010 sites is created from the master page and also the page layouts applied to a SharePoint site. In Figure 5-17 you will notice that having a customized theme applied to an out-of-the-box publishing site using the v4.master page changes only the colors of the items on the page. (The screenshot is in black and white here, but the change will be obvious on your screen.)

SUMMARY

With all the changes to the theme engine in SharePoint Server 2010 it’s important to understand what each of these changes means. Being able to use the same theme files across the Office platform and SharePoint will allow you to bring consistency to your entire user experience.

However, the new theme engine has few limiting factors. If you customize your themes in the browser, these themes are not stored in the Theme library so they are not reusable like themes that have been uploaded to the Theme gallery.

One improvement to the themes from previous versions is the way in which themes are applied. If you have uploaded a theme to the Theme gallery and make an edit to that theme, the theme will be changed in every application on the site.

The SharePoint 2010 theme engine is going to allow your site owners to have a stronger feeling of control over their sites. This will translate from My Site all the way up to publishing and team sites. When creating custom themes you’ll need to check the functionality of all types of pages and sites to make sure your theme design will work appropriately in all these locations.

Themes are not simply a stand-alone part of the branding puzzle either. You can use themes with a custom master page and even custom CSS as well. They can also be published in a solution file as a feature. This allows a greater breadth of changes to be made in your branding and design plan while maintaining the customizations as managed code.