Home > sharepoint > Inheriting Themes for SharePoint publishing sites

Inheriting Themes for SharePoint publishing sites

SharePoint themes do not inherit when creating a site/sub-site structure. Try it, set a theme to the root site in your site collection, set the theme to something other than the default, then create a sub-site under that site. Notice that this sub-site automatically gets set to the default theme again. Now your users have a different design experience as they navigate through your site. That might be ok if you are creating different team sites, but it doesn’t create a cohesive experience when building a portal structure. Of course, you can always set the theme every time you create a sub-site, but wouldn’t it be nice if you didn’t have to do that (especially if you have an environment where less experienced SharePoint administrators are adding sub-sites).

I’ve never  been a big fan of themes in the past. I usually create my own css and put it in the layouts folder and access it in the master page. But, that is only when I have time to customize my site. Every once in a while I have to put a quick SharePoint site together using out-of-the-box functionality and I need to use the out-of-the-box themes to give a distinct look to a particular site collection.

The following technique shows a way to gain that theme inheritance behavior for SharePoint publishing sites.

Note: The following directions are for MOSS publishing sites because you can set the alternate css in MOSS through the interface. In addition, you must make sure that all of your sub-sites are set to inherit the alternate css.  And lastly, you must have the publishing features turned on. Of course, all these settings are set by default when you use one of the publishing templates to create your site and sub-sites. It works really nice with the Collaboration Portal template for the site collection and the Publishing Site templates for the sub-sites.

  • Set the theme you want to on the home page of your site collection (Site Settings – Look and Feel – Site Theme – Choose a theme)
  • Go to the site collection home page and view the source (right-click on the page in your browser and choose view source)
  • Do a search for the word _themes and copy the link from the href tag. For example: a tag on my site looks like this – <link rel=”stylesheet” type=”text/css” id=”onetidThemeCSS” href=”/_themes/Jet/Jet1011-65001.css?rev=12%2E0%2E0%2E6421″/>. I copied: /_themes/Jet/Jet1011-65001.css?rev=12%2E0%2E0%2E6421
  • Go to the master page settings of your site collection (Site Settings – Look and Feel – Master page)
  • Check the radio button to “Specify a CSS file to be used by this publishing site and all sites that inherit from it”
  • Paste the link we copied previously into the text box
  • Check the checkbox “Reset all subsites to inherit this alternate CSS URL” if you already have subsites created in your site collection.
  • Click OK

Note: If these steps do not work, there is a posibility you do not have the alternate css inhertence setup on your sites. Or, it might mean that you are creating a non-publishing site (like a team site) off of your publishing site collection. Also, if you don’t see some of the links I mentioned in the steps, then that means you either do not have MOSS or you don’t have the publishing features turned on.

Why does this work

SharePoint dynamically creates a _theme folder for a site when you set the theme. Then it associates the theme, through a stylesheet link, in a tag on the sites page. For more information on this process please visit Heather Solomons blog.

The problem is, SharePoint only creates the stylesheet link in the particular site you create the theme at.

Thus, this technique takes advantage of the fact that if you create the theme at the top level site, you can access it through relative paths from any sub-site. So, by creating the theme at the top level site, it will create that _themes folder at that level. Then, luckily, the alternate CSS does inherit through all the sub-sites in SharePoint. So, we can just use a simple relative path, in the alternate CSS, to inherit the theme down through our sub-sites.

Caveat: This is a “no-code” solution for a particular situation (MOSS Publishing Sites). For production systems I always like to do my customizations through solutions, features, custom master pages and custom css. If you don’t have the environment described in this post (MOSS Publishing), then you might have to use other techniques – such as a full customization technique with a solution or by setting the css through designer: Heather Solomons post on CSS Options with Master Pages

Categories: sharepoint

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: