Question

We have a ASP.NET solution using images, css and .skin files with in the App_Theme/{selected theme}. The themes today contains many, many files and images and for a customer theme we add a new folder to the App_Themes and copy all files to the new folder and make the 10-200 changes on images, skin and css’s.

The issue here is that the default theme, the one we normally have when we develop, evolve’s and grows making theme customer theme out of date. So when an upgrade comes we have to go through all files looking for changes and hopefully finding them all. Sometimes we miss things that are really important.

The perfect solution would be to have a base theme that contains the base css, skin and images. And when we add a new customer theme we only tell the system what has been changed, what css-selectors to override and what images to use instead of the images from the base theme. In my understanding, if using the normal ASP.NET theme functionality in App_Themes folder, you can only have ONE theme and not a BASE theme and then say a DeliveryCustomer-theme that has a different background and some other images that the solution shall use instead of the ones in the BASE-theme.

Does anyone have some guidelines to solve this in a maintainable way for the future. I seen that people override the App_Theme path to make it work with custom skins.

thanks!

Answer 1

Ok, so here is how I’v done it know.
I have created a Default theme that is the original theme with all the css-files, skin-files and images that is needed, and that is alot. This theme is in the App_Themes folder. Them I’v created a new folder called ThemeSkins next to the App_Themes folder. In this folder I have all the new skins in different folders. The folders name is the name of the new theme that one want’s to have. In each of the skin folders there are css-files that contains only the selectors that I want to overload. There is also images that I want to replace.

I have created a ThemeCreator tool that does three things:

• Remove all themes except the Default theme in the App_Themes folder. This is to only have one main theme to work on for the developers. There will still be work that needs to be done in the ThemeSkins, but the overall work load will be minimal.
• Next the tool looks at the folders that is in ThemeSkins and creates a folder under App_Themes for each skin with its name. Then it copies the Default theme into all the new skin folders that it just created.
• The last thing is that it will merge the skin specific files into the newly created skin under App_Themes and let the user know what files were added just for information. The tool adds a prefix, “z_”, on all css-files so that these are loaded last of all css-files and there for will overload the default selectors.

The thing that remains is to update the skin-files, so far, no customer has needed changes in these files. But when they do, I guess I just add a skin files and have to update the default in a automatic way since the skin-markers can’t be overloaded as css-selectors can.

This works really smooth and gives us a nice and lean way to work with skins on our themes.
Any one got a better idea how to get the same result? the major issue using ASP.NET themes are that you can’t use a default theme and then just apply skins to it without using the shape and color attribute in the skin-files. This is not recommended as the skin files will copy out all attribute to all the places that they are needed in the markup and not just reference them as css-classes do.