Skip Ribbon Commands
Skip to main content

Robin | zevenseas | SharePoint Blog

:

The zevenseas Community > Blogs > Robin | zevenseas | SharePoint Blog > Posts > Announcing : zevenseas Classic Theme
August 25
Announcing : zevenseas Classic Theme

Who is a fan of the way how themes were being used in SharePoint 2003 and 2007? I know, I am! In my opinion the theming support in SharePoint 2010 is ok but it lacks the the level of customization which could be achieved by the previous implementation of themes in SharePoint. What exactly, you might wonder. Well, first and foremost you had the ability of creating your own .css file. Next, while adding the theme to your SharePoint farm, you could apply the theme to every site in your farm (the question there is, do you want that in the first place, but that’s a whole other topic ;).

You could have the option of using the AlternateCSS, but that option is only available in publishing environments which means that it’s not available in a SharePoint foundation environment. Plus, maybe you don’t want to enable the publishing features on a collaboration site. You might wonder.. ok Robin.. now what? Well, luckily the good ‘ol theme engine of 2003/2007 is still available (on the filesystem, in the API) we only need a way of exposing this in the UI. So that’s why I developed the Classic Theme solution! Great Scott! (http://www.imdb.com/title/tt0088763/quotes)

So what does it do then..

  1. Gives you the ability to apply a theme to your site
  2. Gives you the ability to administer which themes are available in which webapplication
  3. Gives you the ability to deploy your custom theme in a supported way (by not overriding the spthemes.xml file)

If you are one of those to read my blog regularly, then you maybe recall that I created a solution already to support bullet no2 and 3 (http://community.zevenseas.com/Blogs/Robin/archive/2009/08/03/adding-themes-the-supported-way.aspx) so it was just a matter of blowing the dust off that solution, make it ready for SharePoint 2010 and add the functionality to apply an ‘old’ theme to your site. The rest of this post will about how I achieved bullet no 1..

Let me show you how it looks right now..  given the following awesomely written theme.css

.s4-title
{
    background-image:none;
    background-color:yellow;
}

1. First we have to activate the sitecollection feature

image

2. Once that is done, we have the following new option available in the Customization section of the SiteSettings screen

image

3. Then we have a selection of the currently installed themes (plus our new blank one)

image

4. When clicked on Apply, this is the result (awesome yellow!)

image

When we open up SPD, we can see that the theme actually is copied from the THEMES folder into the _themes folder of the selected site:

image

Pretty cool eh? ;)

Let me show you I have achieved this..

public void ApplyThemeBtn_Click(object sender, EventArgs e)
{
    SPWeb currentWeb = SPContext.Current.Web;
            
    //If the theme was already applied to the site, 
    //SharePoint raises an error that the theme was already applied.
    try{currentWeb.ApplyTheme(ThemesDropDown.SelectedValue);}
    catch (SPException exception){}

    SPLongOperation addThemeOperation = new SPLongOperation(this.Page);
    addThemeOperation.Begin();
    addThemeOperation.LeadingHTML = (ApplyAllWebs.Checked) ? 
        "Applying the theme to the current web and it's subsites" : "Applying the theme to the current web";
    string cssUrl = ApplyAlternateCSS(currentWeb.Url);
    if (ApplyAllWebs.Checked)
    {
        foreach (SPWeb subweb in currentWeb.Webs)
        {
            subweb.AlternateCssUrl = cssUrl;
            subweb.Update();
        }
    }
    currentWeb.AlternateCssUrl = cssUrl;
    currentWeb.Update();
    addThemeOperation.End("/_layouts/settings.aspx");
}
private string ApplyAlternateCSS(string webUrl)
{
    string cssUrl = string.Empty;

    //When Applying a theme, some copy action takes place behind the scenes.
    //To be sure that everything is populated we get a new instance of the site and web
    //And to be extra, extra safe, we are going to a lot of 'Exists' queries on the folders ;)
    using (SPSite site = new SPSite(webUrl))
    {
        using (SPWeb themeWeb = site.OpenWeb())
        {
            SPFolder themesFolder = themeWeb.Folders["_themes"];
            if (!themesFolder.Exists)
            {
                themesFolder = themeWeb.Folders["_themes"];
            }

            SPFolder themeFolder = themesFolder.SubFolders[ThemesDropDown.SelectedValue];
            if (themeFolder.Exists)
            {
                cssUrl = themeFolder.Url + "/theme.css";
            }
        }
    }

    return cssUrl;
}
 

So some background information, when you click on Apply, I’m applying the theme to the site. This ensures that the theme.css and all the other files are copied from the filesystem to the site. Next, in another function, I’m trying to see whether that action has been done by getting an instance to the SPFile of Theme.css. By having this object, I also have the URL of it. With this URL I’m able to set the alternate CSS Url property of the current SPWeb (and if checked, all it’s subwebs).. and that’s it!

With the solution I also added a ‘blank’ theme solution to create your own theme. Just keep in mind the rules when creating a theme, just like you did for SharePoint 2007 (foldername must exactly match TemplateID in the .xml file)

Now it’s only up to us to create some fancy themes to use with SharePoint 2010..! Grab the solution here from CodePlex and let me know what you think of it and also if you want to collaborate on creating themes don’t hesitate in pinging me ;)

Comments

There are no comments for this post.
 

 Statistics

 
Views: 3423
Comments: 0
Tags:
Published:1553 Days Ago