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 at http://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 to http://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>