Creating a Global Theme using a single CSS stylesheet

Lately I’ve been working on a lot of SharePoint branding – for MOSS and WSS. For a consistent user experience, we need to brand the application pages too (/_layouts/…), so we create a custom theme.

There are many other articles about creating custom themes:

One of the pain points with developing your own theme comes when it has been rolled out across many sites, and then a snag is spotted, or something needs to be changed. The theme has to be updated, and re-applied everywhere it was used (since applying a theme in a site takes a copy of the CSS and supporting files and stores it in each site). Imagine having to do that across 50+ sites – it is certainly something that can make you cry.

To get around this, and allow us to make global changes post-deployment, I use the following method.

  1. Copy an existing theme, and make the necessary changes to the files to make it your own and customise the CSS (the above articles cover this) – and there is a theme generator out on the web: (

  2. Somewhere in the root of your SharePoint system, create a blank CSS page – “MyTheme.css”.
  3. Cut the CSS from your new theme on the server, and paste it into MyTheme.css.
  4. Go back to your CSS sheet on the server, remove all the text from it, and enter only the following line:
  5. Save + Reset IIS

Presto – now, all your custom theme does is look at a single parent style sheet in the root of your SharePoint system. This means that even after it’s been deployed across many sites, we can make a change to the parent style sheet and see it reflected everywhere.

Hope this helps…davros.

2 thoughts on “Creating a Global Theme using a single CSS stylesheet

  1. I’ve followed the steps you outlined, as well as Heather Solomon’s instructions, but editing my linked style sheet still requires me to redeploy the theme. Any idea what I could have done wrong to cause that?

  2. You might want to check what is really being copied across in your theme file:
    – Apply the theme to one of your sites
    – Open the site in SPD, look in the /_themes/ folder
    – Open the CSS file called something like Simp1234567.css. This is the CSS that is copied from the theme on the server – so it should have only 1 line -> "@import…"

    That's a good way to start seeing what's going on anyway.

Leave a Reply

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

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s

About davros85

Software Engineer @ Microsoft, working with key customers to help them be successful on Azure