Todd Baginski's Blog - A SharePoint, Mobile, Office365, PowerApps and Azure Blog

HOW TO: Create a custom theme for SharePoint 2010

Creating SharePoint themes used to require editing CSS style sheets manually or using a tool like SharePoint Designer.  Furthermore, packaging and deploying the themes required administrative access to the server.  This is no longer the case!  Now you can create a SharePoint theme without ever having to see a single CSS style and you can easily deploy it to your server and apply it all within your web browser!  Here’s how it’s done with Microsoft PowerPoint 2010.

Create the theme

First, open Microsoft PowerPoint 2010 and proceed to create an Office theme just like you would for a PowerPoint presentation.  See this PowerPoint help documentation which describes how to do this.  For this example I created a theme called Greens which uses a predominately green color scheme.  The files which make up Office themes have a .THMX file extension.

Upload the theme

Themes may now be stored in the Themes Gallery on your SharePoint server, and you can also find them on the file system on your SharePoint server in the following directory.

C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TemplateGlobalListsThemes

After you have saved the <ThemeName>.thmx file, open your web browser and navigate to the Theme Gallery on your SharePoint server.  To find the Theme Gallery and upload your custom theme, follow these steps. 

  1. Open your SharePoint site
  2. Click Site Actions
  3. Click Site Settings
  4. In the Look and Feel section, click Site theme
  5. At the top of the page click the Theme Gallery link
  6. Click the Documents tab
  7. Click Upload Document
  8. Click Browse
  9. Browse to the <ThemeName>.thmx file you created and select it
  10. Click OK
  11. Click Save

Apply the theme

  1. Click Site Actions
  2. Click Site Settings
  3. In the Look and Feel section, click Site theme
  4. In the Select a Theme section select the theme you uploaded. 

      Selecting a theme in the list will show you the colors and fonts specific to the theme.  Here you can see the colors which make up the Greens theme I created.

     Theme Preview Colors

      6. Click the Preview button to see what the theme will look like once it is applied
      7. To apply the theme to your SharePoint site, click the Apply button

      Here you can see the Greens theme applied to a SharePoint site.

      Greens theme applied to a SharePoint site

      Yes!  It works for administration pages too!

      Site administration pages with greens theme applied.

      It also works for dialog popup windows …

      Dialog with greens theme applied.

      … the Site Actions menu …

      Site Actions with greens theme applied.

       and the Ribbon too!

      Ribbon with greens theme applied.      

Under the hood

What happens when you apply the theme to your SharePoint site?  First, SharePoint opens up the THMX file and creates several images and CSS style sheets based on the colors defined in your custom theme. Then, a new subdirectory is created in the Themes Gallery and the images and CSS style sheets are put inside it. The first time you apply a theme to a SharePoint site the newly created subdirectory is named 0.  The directory name is incremented by 1 each time you apply a new theme to the site. 

Here’s a screenshot from SharePoint Designer 2010 which shows the subdirectory that is created when you apply a theme to a SharePoint site.  In this case the subdirectory name is 3 because I applied 4 separate themes to the SharePoint site; the subdirectory name started as 0 and was incremented 4 times.

theme subdirectory

If you want to modify the theme further you can then edit the CSS style sheets and the images in the new subdirectory for your theme.

One size does not fit all

The approach outlined in this blog post will not change the layout of your site, it will merely change the colors, heading font, and body font.  It’s a helpful approach to use when developing a prototype or a demo and you don’t have enough time to dig into the CSS to change the layout.  It’s also a helpful approach to use when your requirements do not call for major look and feel changes and color changes will suffice.  Other approaches also exist for changing the look and feel of your SharePoint sites, such as making custom Master Pages, Page Layouts, and CSS files.  This approach usually takes less time than the other approaches, however it is not as flexible.

42 responses on “HOW TO: Create a custom theme for SharePoint 2010

  1. Whorush: 11 sites by this AdSense ID

    Technically, it is true that the MP3 format is not natively compatible gapless encoding (and yes, Ogg, WMA and other formats few do). But in practical terms, when used LAME for encoding tags without spaces and including any decoder to read labels LAME gapless playback (and any player on any platform that does not understand the labels LAME should be carried out in forgetting). Despite Apple’s efforts, MP3 file format by far the most common and portable audio loss and the LAME encoder is probably the most common (by the way, apart from iTunes and WMP), so in my humble opinion this is a better alternative to Ogg encoding music files without interruption.

  2. Interesting blog. It would be great if you can provide more details about it. Thanks you.

  3. Dubai Honda says:

    Interesting blog, just bookmarked it for later reference

  4. Rolex says:

    Awesome work by the blogger, Thanks a lot for the share

  5. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your posts. Any way I’ll be subscribing to your feed and I hope you post again soon..

  6. Stef Mathew says:

    Thank you for sharing great information to us flowers to dallas | flowers to brazil

  7. Nice blog. Tips are very useful and the ideas looks creative.

  8. Thank you so much for the interesting post.

  9. Excellent read. Thanks a lot for sharing this with us.

  10. RoboElv says:

    Thanks, most useful indeed and a great time saver when I need to ideally be looking at other things.

  11. This is my very first time here, really good looking blog. I found a lot of fascinating things in your blog. From all the remarks on your posts, it looks like this is a extremely popular website. Keep up the good work.

  12. I absolutely loved the way you have created your website, it’s simple, neat, simple to navigate and extremely easy on the eyes. Is it possible to let me know which theme or designer did you use.

  13. Valuable information ..I’m delighted to read this short article..many thanks for giving us this useful information. Great walk-through. I value this post.

  14. Pretty good post. I just discovered your blog and wanted to say that I have really loved reading your blog posts. Any ways I’ll be subscribing for your feed and I hope you post again soon.

  15. custom printed playing cards says:

    excellent and usefull information presented in this blog,
    really interesting,thanks for sharing it.

    custom printed playing cards

  16. mole traps says:

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

  17. Scott Dee says:

    After teweaking colours and so on in Sharepoint, the Theme gets the name "Custom" applied to it.

    How do you give it the theme a meaningful name and save it / back it up?