ShareThis

SharePoint 2010 Custom Themes

SharePoint theme is a collection of graphics and cascading style sheets that can modify how a Web site looks. SharePoint Themes are stored in Theme Gallery at “_catalogs/theme/Forms/AllItems.aspx”. To change the theme of a site g to “Site Actions -> Site Settings -> Look and Feel -> Site theme”. Also we can develop custom SharePoint themes for all administrative and non-publishing elements of the site that matches as close as possible to the site look. Here we can use Microsoft PowerPoint to create a custom theme.

1. Open PowerPoint and go to Design Tab. Expand “Colors” dropdown and select “Create New Theme Colors…” option.


2. Change the colors so they match as close as possible to the site look. Then give a meaningful name and save. It should be noted that this is the Display Name of the theme once you added it to the SharePoint.

3. Then expand “Fonts” dropdown and change it to what you would like. Also you can go to “Create New Theme Fonts…” option to define theme fonts.

4. Click on “More” button to expand the Themes section and select “Save Current Theme…”

Now you have your own theme (.thmx) file. You can upload it to SharePoint Theme Gallery manually and use. Also you can include it in your Visual Studio 2010 solution.

Include Custom Theme in a Visual Studio 2010 Project
1. Add a SharePoint Module to the project and include theme file in the module as follows.


Here is how the Element.xml file looks like.
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="Site Theme" Url="_catalogs/theme" Path="Site Theme">
<File Type="GhostableInLibrary" Url="MyCustomTheme.thmx" />
</Module>
</Elements>
2. Then add a Feature to deploy the Module. It will upload the custom theme to the Theme Gallery. Then add an Event Receiver to the same feature to apply custom theme to the current Web and sub sites if required.


Here is how the Modules.EventReceiver.cs file looks like.
public class ModulesEventReceiver : SPFeatureReceiver
{
public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
SPWeb currentWeb = properties.Feature.Parent as SPWeb;

// Get themes collection.
ReadOnlyCollection<ThmxTheme> themes =
ThmxTheme.GetManagedThemes(currentWeb.Site);

// Loop all themes.
foreach (ThmxTheme theme in themes)
{
if (theme.Name.Equals("MyCustomTheme"))
{
// Apply custom theme to the current web.
ThmxTheme.SetThemeUrlForWeb(currentWeb, theme.ServerRelativeUrl, true);

// Apply custom theme to the immediately beneath Webs.
if (currentWeb.Webs != null && currentWeb.Webs.Count > 0)
{
foreach (SPWeb subWeb in currentWeb.Webs)
{
ThmxTheme.SetThemeUrlForWeb(subWeb, theme.ServerRelativeUrl, true);
}
}
break;
}
}
}
}

Thanks @ Kamil Anurdeen

4 comments:

Paul said...

Hi there thanks for the post.

Text/Background light 2 also changes the left hand navigation I want to have a different color for the top toolbar then the left hand navigation pane is this possible?

Prasad Sampath Wickramasinghe said...

You can change the color of very top bar with Site Actions menu by changing Text/Background Dark 1. Sorry, but I'm not aware of how to get two different colors for top toolbar and left navigation.

Ramesh Kumar said...

Interesting post! I enjoyed reading it!
Thanks for sharing this useful info.keep updating same way.

Cheers,
Ramesh Roy
Sharepoint Custom Development

Anonymous said...

This article is very useful
Thanks a lot for sharing this awesome blog post.
you can search information about Theme for sharepoint 2010 at Sharepoint 2010 themes