Guest Author: Karim Roumani
Portal Front SharePoint Hosting Services

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 = THMX

This 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)


5. 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.



6. Define the colors in your theme.

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

7. Give the color Theme a name and hit “Save”
8. Click on the themes down arrow:


9. Click Save Current Theme


10. 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


5. Click choose a file


6. Find the file and click open
7. Click Ok
8. 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.




4. 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.

Guest Author: Karim Roumani
Portal Front SharePoint Hosting Services

Karim Roumani is a SharePoint entrepreneur who’s passionate about both the business and technical aspects of SharePoint. Karim is currently the director of Portal Front SharePoint Hosting Services, a service of TekReach Solutions, LLC. Karim is a business strategist who helps onboard organizations to SharePoint by devising business roadmaps to ensure profitable investments in SharePoint.