Working with SharePoint 2010 Themes

Introduction

Our application involved migration of site collections on a Web application from SharePoint 2007 to 2010 environment. As we wanted to perform Visual Upgrade on site collections on an as-needed basis at the user’s request, we performed migration using PreserveOldUserExperience in stsadm. This will do the data migration but preserve the SharePoint 2007 look and feel. Later, Visual Upgrade can be used to upgrade to SharePoint 2010 look and feel. You can find more about PreserveOldUserExperience here on MSDN.

The migration basically involved 3 main steps—data migration, Visual Upgrade, and making our custom components compatible to work with the new version. After we were done with data migration, performing Visual Upgrade was simple, it was just performing Visual Upgrade from Site Settings->Site Collection Administration as shown here (click for a larger version):

Visual Upgrade in Site Collection Administration

Figure 1. Visual Upgrade in Site Settings

But just performing a visual upgrade does not make things work. There is more you need to think and work before you go for Visual Upgrade. The first thing is to work on master pages and themes. Before designing themes, you should decide if you want to go with themes or with cascading style sheets (CSS). It is always a good idea to go with one approach rather than using both because, themes might overwrite CSS sometimes and vice versa. The next sections will show you how to create and deploy a theme.

About Themes

Themes have been drastically changed in 2010. The new 2010 themes use an entirely different design. SharePoint 2007 themes used CSS and images while the new 2010 themes use the .thmx format. This means themes can be easily created using PowerPoint or any other tools which will be discussed later in this article. You will notice that the old SharePoint 2007 themes are no longer available in SharePoint 2010. When you perform migration without Visual Upgrade, the old themes are available to support the 2007 look and feel.

There are set of predefined themes available, which you can view from Site Settings->Look and Feel->Site Theme. Note that in SharePoint Server, you can customize the theme in the browser. In SharePoint Foundation, this functionality is not available. Here is a glimpse of the Site Theme in SharePoint Server (again, click for a larger view):

Site Theme in Site Collection Administration

Figure 2. Set Theme in Site Settings

Creating Custom Themes

SharePoint 2007 involved some effort to create themes as we had to deal with CSS and images. But as the themes design is changed completely in 2010, it is rather easy. Following are set of tools available which will make life easier. Here are the different ways of creating Themes.

Customize Theme Feature

Set Theme in Site Settings under the Look and Feel section is a default feature available in SharePoint Server, which will help you to customize themes. In Figure 2, you can see the option Customize Theme, which will help you to customize the theme you selected. Whenever you select a predefined theme and customize it, it creates a new theme called Custom and all the changes get applied to this custom theme. So every time you modify a predefined theme, the Custom theme gets overwritten.

Now, if you want to preserve this theme and download it locally, here are the steps that will help you to download this customized theme:

  1. View the HTML source of the page and search for /_catalogs/theme/Themed/uniqueHexId/corev4-uniqueNumber.css
  2. From the browser, navigate to http://yourServer/_catalogs/theme/Themed/uniqueHexId/theme.thmx and download the file.
  3. Rename the file MyCustomTheme.thmx

Theme Builder

You can also create themes using Theme Builder, which is available at http://connect.microsoft.com/themebuilder . You can select an existing theme or
create a new theme using this tool. Here is the screenshot of Theme Builder:

Theme Builder UI

Figure 3. Theme Builder UI

PowerPoint

Themes can also be created using PowerPoint. On the Design tab under Colors, select Create new theme colors. Customize it and save it as a thmx file. Below is a screenshot of the Create New Theme Colors Dialog:

PowerPoint Theme Dialog

Figure 4. PowerPoint Theme UI

Deploying Themes

There are multiple ways to deploy themes both through code and through the UI. The following are the different ways to deploy themes.

Theme Gallery Deployment

You can upload the thmx file that you created in PowerPoint or Theme Builder into the Theme Gallery. Deploying a theme to the Theme Gallery holds well if you’re working for a single site collection. If you need it to apply to multiple site collections, see the next method of deploying using a Feature. You can access the Theme Gallery from Site Actions->Site Settings->Themes. Once you upload it, you can go to the Set Theme screen, as shown in Figure 2 above, and set the theme. You can see the Theme Gallery below:

Theme Gallery in SharePoint 2010

Figure 5. Theme Gallery

Feature Deployment

It’s always a best practice to deploy any artifact as a Feature. This works well for multiple site collections. Here is an example of the Feature and Elements XML files.

Feature.xml
<?xml version="1.0" encoding="utf-8" ?> <Feature Id="28E39FC9-BFE9-4FAE-9E71-C5BFEB818D2E" Title="My Custom Theme" Description="My Custom Theme" Version="1.0.0.0" Scope="Site" Hidden="FALSE" DefaultResourceFile="core" xmlns="http://schemas.microsoft.com/sharepoint/"> <ElementManifests> <ElementManifest Location="Elements.xml"/> </ElementManifests> </Feature>
Elements.xml
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"
<Module Name="MyCustomTheme" Url="_catalogs/theme" Path="MyCustomTheme" RootWebOnly="true"> <File Url="MyCustom.thmx" Type="GhostableInLibrary" Path="MyCustom.thmx"> </File> </Module> </Elements>

For more information about deploying and installing a Feature, see Installing or Uninstalling Features. Once the Feature has been installed and activated, it will show up in the Theme Gallery that was shown in Figure 5.

Object Model Deployment

You can deploy the theme programmatically using the ThmxTheme class in the Microsoft.SharePoint.Utilities namespace. TheApplyTo method applies the theme to a site collection. Here is a code snippet:

C# Code
using (SPWeb web = site.OpenWeb()) 
{ using (ThmxTheme theme = ThmxTheme.Open(web.Site, "./_catalogs/theme/MyCustomTheme.thmx”))
 { theme.ApplyTo(web, false);
 } }
Advertisements

Creating custom themable CSS files for SharePoint 2010

SharePoint 2010 has a completely rebuilt theme engine. Instead of having to modify .inf files, create folders and copy and pasting CSS files and images in the SharePoint root we can now create a theme in PowerPoint and upload it to the server. The default SharePoint CSS files are tagged with comments that tells SharePoint to substitute colors and images with the values from the theme. When you switch theme SharePoint generates a new set of CSS files and images with the result of this substation.

What if you have the need to create a custom CSS for you solution or Web Part? How can you use this theme? It’s actually quite easy!

Let’s take a look at a sample Visual Web Part that is going to have a custom CSS file.

Create the Visual Web Part

First of all we need to start the new awesome/fantastic/productive new Visual Studio 2010 and create a Visual Web Part Project. Add a simple button to the user control and attach a custom CSS class to it.

Button with custom CSS

Add the CSS

Once we have this button with the CSS class we need to create the CSS file and define the class. This is done by adding the SharePoint “Layouts” Mapped Folder to the Project. This will also add a folder with your project name under the Layouts folder – remove that one. Then add a folder structure like this 1033/Styles/Themable to the Layouts folder.

To the Styles folder you then need to add the CSS file with your class. It should look something like this:

.MyCustomClass {
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ border:solid 1px #d9dde1;
/* [ReplaceColor(themeColor:"Light2")] */ background-color:#f5f6f7;
}

 

The ReplaceColor tag in the CSS comment will replace the colors in the CSS styles using the named color of the theme. For full reference check out corev4.css in the SharePointRoot.

Then copy this file so it has a duplicate in the Themable CSS folder, your solution should look like this:

The solution!

SharePoint will use the CustomStyle.css in the Styles folder, when no theme is activated, so this is your default CSS. When you activate a theme it will take the CustomStyle.css from the Themable folder and substitute the colors as you wrote in the CSS file. Note that if you already have a theme enabled you have to re-enable it or if you make changes to the CSS you also need to re-enable the theme.

Register the CSS

We have one more thing to do to get this thing going – and that is to tell the Visual Web Part to use this CSS. This is done using the CssRegistration control which we add to the Visual Web Part user control like this:

CssRegistration control

You need to specify the Name attribute, which is the name of your CSS file. TheEnableCssTheming attribute is not necessary since the default value is true. If it’s set to false the CSS in the Styles folder will always be used. If you leave it out or set it to true and provide no CSS in the Themable folder then your CSS will not be loaded.

 

 

Try it out!

Now deploy your Visual Web Part and then add it to a page. Then go to Site Settings and change between themes. Isn’t it beautiful!

No theme Bittersweet theme Vantage theme

Custom SharePoint 2010 Themes

There is now an easy way in SharePoint 2010 to change some colors and default fonts without having to change a bunch of CSS styles. Just go to site settings and click on “Site Theme”.

image

These themes are stored in a library found athttp://YourSharePointPortal/_catalogs/theme/Forms/AllItems.aspx

If you want to go even further you can look in the files system and you will find thmx files found in the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\Lists\themes Directory.

So the first time I tried to open up one of these files PowerPoint opened up. So I opened up one of the files from Visual Studio 2010 and it looks like the files are in binary format. It would of been nice if they were in xml format but I will have to live with it.

 

So now that I know how the themes work I want to create a Custom Theme that I can use. So it looks like PowerPoint will be my tool to create my custom theme. Below is a step by step guide to create a them in PowerPoint.

1. Open up PowerPoint and go to the Design Tab. Select the Colors button and click on “Create New Theme Colors…”. Change the colors to what you would like and save it.

image  image

2. Now click on the Fonts button in the Themes Section. Change the Font and click save.

image image

3. Expand the themes section and click “Save current Theme…”

 

 

 

 

 

image

You should now have your own thmx file. So now in order to use this file in SharePoint 2010 you need to upload it to the theme gallery. Site Settings –> Themes or simply go tohttp://YourSharePointPortal/_catalogs/theme/Forms/AllItems.aspx and upload your file.

If you would like to include it in your Visual Studio 2010 Project you can install it as a feature element. Below is the Element XML you can use the following

 

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="ThemesElement" Url="_catalogs/theme" RootWebOnly="TRUE" Path="Themes">
    <File Type="GhostableInLibrary"  Url="CustomTheme.thmx" IgnoreIfAlreadyExists="true" />
  </Module>
</Elements>

Custom Themes in SharePoint Foundation 2010

In this blog we will cover the basics of SharePoint 2010 Themes and show you how we can easily create a theme with good color combinations.

Every SharePoint site comes with a default theme out of the box. You can go in and change the theme of the site very easily from the site settings. However out of the box you are given only a few options to choose from. What if you want to create your own theme?

Themes in SharePoint 2010 are significantly different than SharePoint 2007 themes. In this blog we will focus on the SharePoint 2010 themes.

How it works?

Every SharePoint site has a collection of themes called the Theme Gallery. You can easily add themes to the gallery of themes for that site which then makes it available to be chosen as the site theme in any sub site. In order to add a theme to the theme gallery, you need to first define a Microsoft Office Theme file of  �.thmx�. This file stores many different branding attributes including colors, fonts, graphics and effects. However, as far as SharePoint is concerned it only defines the colors. I find it to be a tough file extension to remember, but here�s how I remember it:

 +M for Microsoft = THMXThis file can be created in Microsoft Office PowerPoint, saved locally on your drive, then uploaded to the gallery and your theme is ready!

Sounds simple. Your biggest challenge may be to know which color labels in the theme correspond to which site element in SharePoint. Not having that key could be frustrating because you will not know where the colors will be reflected on the SharePoint page.

Notes before diving into How

Note the following:

  1. With SharePoint Server only and not Foundation, you have a convenient option of manipulating the colors of your themes directly from the site settings. This option can help you see what the theme will look like before actually creating a theme in the gallery. If you only have Foundation 2010, then use the color map guide below to help you get right with less tries.
  2. Themes are considered a very simple way of just changing colors. Often times you may need to modify colors in more details and possibly make some adjustments on the page. To do that try working with Master Pages, Page Layouts and SharePoint Designer 2010.

How to do it?

Creating the .THMX file

    1. Open Microsoft PowerPoint
    2. Select Design (1)
    3. In the Themes section, click on Colors (2)
    4. Click on Create New Theme Colors at the bottom of the menu (3)

    1. You will see this screen

Now the question is how do you know which theme color corresponds with which part of the SharePoint page? This diagram should help you.

    1. Define the colors in your theme.

If you wish to grab colors from a logo or graphics consider using a color picker.

    1. Give the color Theme a name and hit �Save�
    2. Click on the themes down arrow:

    1. Click Save Current Theme

  1. Save the file on your c:\xxx.thmx

Your theme file is exported and ready to be used by SharePoint.

Import the Theme to SharePoint

    1. Go to the root of your site collection
    2. Click Site Actions -> Site Settings
    3. Click Themes under Galleries
    4. Click Add New item

    1. Click choose a file

    1. Find the file and click open
    2. Click Ok
    3. Now you should see the theme in the gallery. Here�s mine, called �cool�

Apply the theme to the site

    1. Go to the site you wish to apply the theme to. This could be any subsite
    2. Go to Site Action -> Site Settings -> Site Theme
    3. Select the theme that you just uploaded to the gallery. �Cool� in this case.

  1. Click Apply

You are done. If some colors are clashing, you may have to go through the process a few more times until you get it right.

Conclusion

SharePoint Themes are simple to create. However they are very limited because:

  1. You can only change colors and not design elements
  2. You can only change colors per the map defined. This is very limiting because what if you want the color of the banner at the top of your site to be a bright orange? This will mean that the text of your body will also be bright orange. We know that bright orange text on a white background is very difficult to read. We don�t have the option of making the banner and the text different colors.

Use themes to quickly brand your site, but if you require some sophistication, dive into the CSSes and master pages.