What happens when a Theme is applied?

You can apply themes to sites in SharePoint – but what actually happens when you do? Firstly, as a quick reminder, on the Site Administration pages, you can go to see the installed themes:

And select one:

Your site will then have a different theme. Great! But how does this work? Well, lets open our site in SharePoint Designer:

That’s right, a folder _themes, containing the theme we just applied in a folder. That theme is the CSS and all the images. Because of SharePoint’s virtual file system, that isn’t as inefficient as it sounds, but ‘cos our theme is being provided from our site, each CSS file and each image will be at a different URL for every site. This might be fine if you wanted to be able to customize the theme on a per-site basis (and you can!) – but it eliminates some of the advantage browser caching, and I don’t think most organisations will want their theme customised on any sites – branding should be consistent.

The observant of you will notice multiple CSS files in the Theme folder (‘Plastic’ above). How does that work?

Well, if you look in 12/TEMPLATES/THEMES, the themes themeselves don’t have the CSS file that you’ll find referenced in your Site’s pages. Instead, when you apply the theme, SharePoint takes all of the CSS files and appends them together into one file which it uses (Plas1011-650001.css, in yellow above).

I only actually found this as most instructions on creating a new theme start by telling you to copy an existing one. This is fine, but I forgot that there were more CSS files than just my Theme.css. Specifically, the mossExtension.css file was being added after the end of my themes, and it was overriding some of the styles I’d defined. As the order of the themes being defined is very important, I do think this ‘adding together’ of CSS files is somewhat dangerous.

Anyway, once a single CSS file has been created, the master page will insert a URL to that file into the page <head> section, and that’s how your styles apply.

What happens when a Theme is applied?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.