The “awkward” themes system based on CSS and images in SharePoint 2007 is going the way of the dodo. No more deploying into the “12 hive” and having to modify the SPThemes.XML to register your theme.

As you may already know, in SharePoint 2010, themes are now just a set of colour and font values specified in an Office .thmx file. You upload a .thmx file into the Themes catalog and a site administrator can “theme” their site using the updated Themes web interface.

Unfortunately, if you want to brand any of the out-of-the-box SharePoint 2010 collaboration sites beyond colours and a couple of font choices, you will need to jump through a few hoops. All of which I’ll try to explain to you in this series of blog posts.

How does the SharePoint 2010 Theming Engine work?

So what happens behind the scenes when you select a 2010 theme to apply to your site? How do the new colours specified in the .thmx file and/or the colours you’ve chosen through the web interface get applied to your site?

There  are essentially two main locations where CSS files for SharePoint 2010 are stored:

Themable folder in 14 Hive

1. In the “14 hive” at %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES;

   The exact location of the CSS files varies depending on whether you have a language pack installed and have another language as the default. I’m in North America and the Locale ID for the majority of our projects is 1033 for English (US).

   These CSS files are used by all webs located on the front-end web server.

2. In each web’s Style Library. These CSS files only affect the specific web.

Themable folder in web's Style Library

Oh, btw, when I say “web,” I mean SPWeb… if you’re a SP Dev, you’ll know what I’m talking about, otherwise think “site” but not “SPSite”…

So you must be thinking, “that’s exactly the same as in SharePoint 2007!” And you would be right, but if you look in the first location, you’ll notice a folder named “Themable”…

If you look in the Style Library of a team site, you won’t find anything… BUT if you were to create a Publishing Portal and look inside the Style Library, you’ll find a “Themable” folder as well…

Taking a look at some of the CSS files, you’ll notice some things in the CSS comments like:

/*[ReplaceColor(themeColor:"Light1")]*/
background-color: #fff;

/*[RecolorImage(themeColor:"Accent6",method:"Tinting")]*/
background-image:url("/_layouts/images/selectednav.gif");

What this? Compile time directives?

Yup, when the user selects a theme for a web, SharePoint goes and recompiles the CSS and places the compiled CSS files into the web’s “_theme” folder.

UPDATE: There’s also a second location in the content DB where a compiled theme could live besides a web’s “_theme”. If you use the ThmxTheme.SetThemeUrlForWeb method to set the web’s theme and specify “true” for the shareGenerated parameter, the compiled CSS files will be located in “/_catalogs/theme/Themed/[1234567]” instead. [1234567] is some hex value based on the theme name or folder, not exactly sure ATM.

SharePoint will replace any colors defined in the rule following the comment with the matching colour that’s defined in the .thmx or the web interface. It can even re-render graphics based on pixel co-ordinates, tinting (as seen in the second example above) or even re-render gradients for you! This is going to be a great time saver for projects where requirement dictates multiple colour variations on a central design!

Slide shamelessly stolen from Elisabeth Olsen's presentation at SPC09.

What are all the directives? Dunno. There’s absolutely no documentation that I’ve found at the moment. There’s plenty of examples sprinkled throughout the CSS files found in the “Themable” folders though. I’m hoping someone out there compiles a list of all of them sooner rather than later.

In the next episode…

My next post will be on the new and improved CSSRegistration control which is how we can add our own custom CSS that can also take advantage of the new 2010 theming system!

UPDATE:

• You can find Part Two here!
• You can find Part Three here!

SharePoint 2010 Ribbon

A busy first day at the SharePoint Conference so I’ll start off with a quickie.

As most of you know already, SharePoint 2010 will use the ribbon interface for editing. I personally like the ribbon from an UI perspective compared with the old editing UI for SharePoint 2007. Some might argue that it’s a bit cluttered and the context sensitive editing may be confusing to new users. I think it’s something that users can grasp in short fashion especially if they use Office 2007 or 2010 as well.

Something that’s new to me in 2010 are the AJAX form dialogs. Pretty much any new item creation is now done in a modal dialog now instead of taking the user to a different form page in 2007. This is great as it keeps everything in context for the user.

An added benefit of the ribbon and form dialogs is that in most cases we no longer have to design for or make design decisions regarding these edit mode elements anymore. They are pretty much separate from the rest of the page from a design perspective.

UPDATE:
I’ll be putting up another post regarding the dialog creation API which is exposed as a JavaScript library in a later post.

The ribbon is extensible as well, you’re able to create new button elements, replace existing elements with customized functionality or remove an element all together.

Unfortunately for me, I think I’ve missed the window of opportunity to blog about the Future of Web Apps Summit. I may still get around to transcribing my notes over the next few weeks.

Fortunately for you, there are plenty of good posts on the InterWeb to read about in the mean time.

UPDATED September 23, 2006:
Added CenterNetworks coverage of the Summit.

Overall Summit Impressions

• Blogalicio.us
• ext337
• ZDNet
• CenterNetworks

You can also check out the summit’s wiki and the Flickr clusters for visuals.

Posts on Individual Speakers

Rakesh Agrawal has an amazing set of notes for all the speakers at the summit.

Allen Stern over at CenterNetworks also has a great set of notes.

• Dick Hardt; The emerging of Who
  • ext337
• Kevin Rose; The digg storey: from one idea to nine million page views
  • ext337
  • My Name is Kate
• Steve Olechowshi; 10 things you didn’t know about RSS
  • My Name is Kate
• Tom Coates; Social change on the web
  • ext337
• Carl Sjogreen; How we built Google Calendar
  • Postbubble
• Mike Davidson; User-driven content – is it working?
  • Postbubble
• Michael Arrington; What’s next for web apps: building tomorrow’s Flickr
  • ext337
• Ted Rheingold; The state, future and business of pasion-centric communities
  • Postbubble
  • ext337
• Cal Henderson; Taking Flickr from Beta to Gamma
• Evan Williams; selling and funding: pros and cons of bringing in a third party
  • GigaOM
• Ryan Carson; 12 14 things I wish I had known before starting to build my web app
  • Postbubble
  • My Name is Kate
• Jeff Veen; Designing better web app interfaces
• Matt Mullenweg; The store behind WordPress plus building-user-powered apps

Speaker Presentation Slides

• Tom Coates; Social change on the web
• Tantek Çelic; Best practice with Microformats
• Ted Rheingold; The state, future and business of passion-centric communities
• Jeff Veen; Design for Web 2.0

Carson Workshops plans to have podcasts of the speakers at the summit online in the next week or so. I’ll have a post about those once the podcasts are up.

Roll out the red carpet… I can’t believe I’ve been in the industry for almost a decade and have never started a blog.

A bit about myself. I’m an User Experience Developer (client-side development) with the Habañero Consulting Group.

I’ve recently been tasked to research how best to get our User Experience Group’s blog up and running. We’ve pretty much decided to go with WordPress. If it’s good enough for Jeffery Zeldman, it’s good enough for me.

Through the WP website I found BlueHost, an inexpensive hosting service. Can’t go wrong with $8/mo for 30gigs of storage and a huge gob of bandwidth. Hopefully they may finally give my website a proper home.

Over the next few weeks, and probably going into months, I’ll document the trials and tribulations of developing and designing a blog from the point of view of a guy who’s livelyhood depends on the web.

So welcome to SingChan.com… more to come.