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?<\/p>\n

There\u00c2\u00a0 are essentially two main locations where CSS files for SharePoint 2010 are stored:
\n

$\"Themable$ <\/a>

Themable folder in 14 Hive<\/p><\/div><\/p>\n

In the “14 hive” at %ProgramFiles%\\Common Files\\Microsoft Shared\\Web Server Extensions\\14\\TEMPLATE\\LAYOUTS\\1033\\STYLES<\/em>;\n
The exact location of the CSS files\u00c2\u00a0varies 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).<\/p>\n
These CSS files are used by all webs located on the front-end web server.<\/p>\n<\/li>\n

In each web’s Style Library. <\/em>These CSS files only affect the specific web.<\/li>\n<\/ol>\n $\"Themable$ <\/a>
Themable folder in web's Style Library<\/p><\/div>\n
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”…<\/p>\n
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”…<\/p>\n
If you look in the Style Library of a team site, you won’t find anything… \ud83d\ude42 BUT if you were to create a Publishing Portal and look inside the Style Library, you’ll find a “Themable” folder as well…<\/p>\n
Taking a look at some of the CSS files, you’ll notice some things in the CSS comments like:<\/p>\n
\/*[ReplaceColor(themeColor:"Light1")]*\/\r\nbackground-color: #fff;\r\n\r\n\/*[RecolorImage(themeColor:"Accent6",method:"Tinting")]*\/\r\nbackground-image:url("\/_layouts\/images\/selectednav.gif");<\/pre>\n
What this? Compile time directives?<\/strong><\/p>\n
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.<\/p>\n
UPDATE:<\/strong> 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<\/a> method to set the web’s theme and specify “true” for the shareGenerated<\/strong> 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.<\/p>\n
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!<\/p>\n
$\"How$ <\/a>
Slide shamelessly stolen from Elisabeth Olsen's presentation at SPC09.<\/p><\/div>\n
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.<\/p>\n
In the next episode…<\/h3>\n
My next post will be on the new and improved CSSRegistration<\/strong> control which is how we can add our own custom CSS that can also take advantage of the new 2010 theming system!<\/p>\n
UPDATE:<\/strong><\/p>\n
\n
You can find Part Two here!<\/a><\/li>\n
You can find Part Three here!<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Themes are dead! Long live themes! 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,5,25,43],"tags":[44,97,99,56,42,45,55,98,100,47,46],"class_list":["post-59","post","type-post","status-publish","format-standard","hentry","category-design","category-development","category-html-css","category-sharepoint-development","tag-44","tag-branding","tag-collaboration","tag-css","tag-sharepoint","tag-spc09","tag-themes","tag-theming-system","tag-thmxtheme","tag-ue","tag-user-experience"],"_links":{"self":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":26,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/59\/revisions\/219"}],"wp:attachment":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

In the next episode…<\/h3>\nMy next post will be on the new and improved CSSRegistration<\/strong> control which is how we can add our own custom CSS that can also take advantage of the new 2010 theming system!<\/p>\nUPDATE:<\/strong><\/p>\n