Hello world. Long time no see.

As SharePoint 2010 went RTM not so long ao, I thought it would be good timing to write a new blog post. This time around, I’ll talk about SharePoint themes, one of my pet peeves!

Why is it one of my pet peeves? Well, SharePoint themes are quite nice, but are cumbersome to create. Let me elaborate on that. SharePoint Themes are actually CSS files and images only. So you’ll have to manually override every CSS class on the existing SharePoint design. And for those of you reading my blog, you’ll know that CSS in SharePoint 2007 is not really that cascading, unfortunately. In other words, it takes ages to get a theme done, and you never have satisfying results.

But, NO MORE!
That’s right! In SharePoint 2010 themes are actually what they should be: a light and easy variation on a design. And what’s surprising? It is actually not new technology. The SharePoint team decided to reuse the theme definition and format defined in the Office OpenXML standard. It’s already been used in PowerPoint 2007 for creating new themes for your slides!

But what is it? Well, a theme is now a definition of 10 colors (4 main colors, and 6 accents) and 2 fonts (basic and title). To make it easily reusable, they’ve packaged the theme in a .thmx file, which is nothing more than a zip archive of OpenXML xml files. (just like docx, pptx, …) SharePoint will use this file to change its colors and fonts accordingly. This means you can create your themes in PowerPoint (or reuse your old ones), upload them to SharePoint, and have a freshly branded site in no time! Nifty!

Some tidbids about them.

• You can actually create your themes in SharePoint 2010. Go to the new Site Theme page in Site settings and change the colors and fonts.
  
  You can even preview your changes. If you want to save or reuse your custom theme in other sites or site collection. You can download the created file by going to following url: http://[server]/[site]/_themes/custom.thmx After that, just upload it to the theme gallery. Nice!
• The theme gallery is a site collection wide gallery located at http://[server]/[sitecollection]/_catalogs/theme/ You can access it via the header of each Site Theme page, or by going straight to your Site Collection settings.
• You can now push your theme down to subsites, just like you could with your masterpage. This is really handy!
• As themes are nothing more than .thmx files stored in a gallery, you could generate and package your themes by server side and on the fly. The main file to know is: /theme/theme/theme1.xml. It looks like this:
  
  Pretty straightforward, ain’t it? But SharePoint wouldn’t be SharePoint if there weren’t some API classes created we can use. The class to know is Microsoft.SharePoint.Utilities.ThmxTheme You can get and set the theme of a SPWeb object. But you can also alter its colors and fonts. They even added a method to retrieve the SPFile of the .thmx file. Cool!
• As themes define colors and fonts, they are not bound to a specific CSS file nor master page. It means we can use the themes in our own master pages, but it also means it’s a bit difficult to know where a color will be applied, as it depends where the masterpage uses it. SharePoint 2010 comes with 2 master pages (v4 and nightandday (server only)) and both of them support themes, although v4 does a better job at it. I’ve compiled a preliminary resume where and how the main colors are being used for v4.
  • Dark 1 – Page Text
  • Light 1 – Page Background, Dynamic Menu Background
  • Dark 2 – Menu Text
            Shade (to grey) – Header background
  • Light2 – Menu Background
            Shade (to white) – Item Background
  • Accent 1 – Hovered Top Menu Text
            Shade (to white) – Selected Menu Background
    Mind you this is not a complete for v4.
• For a walkthrough on how creating a theme for SPS 2010 with PowerPoint read David Opdendries’ post: http://spdavid.com/post/2010/01/16/Custom-SharePoint-2010-Themes.aspx Good one David!

That’s it for today. Themes are now far more handy in SharePoint, so I’ll definitely use them in projects. It future posts we’ll cover also masterpages!

This entry was posted on Thursday, April 22nd, 2010 at 23:29 and is filed under SharePoint. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.