If you have read my previous post on master pages to handle different styles of a webpage you might thing that was not a good way of handling different styles for different users or devices, and guess what, you are right. There is a “better” way, or another way of doing the same thing, say hello to Themes.
What is Themes?
A theme is a way of controlling the look and feel of a webpage. You can have many themes on you website and apply them for different users or devices. A theme in ASP.NET can control what Cascading Style Sheet (CSS) is added in the <head> tag, what styling properties each controls get and what images to be showed for each theme.
Ok I get it, show me how!
Implementing themes is very easy. All themes is located in the special ASP.NET folder App_Themes. And each theme is placed in a sub-folder of the App_Themes folder i.e. /App_Themes/Red, /App_Themes/Blue for a red and blue theme.
It will look like the following,
In those folders (Red and Blue) you can add .skin files (a skin file is a text file with the markup for a ASP.NET control that will be used as a template for controls in the ASP.NET)
It is common to create a .skin file for each control you want to “theme”.
This two textbox controls are just templates of what the textbox controls will look like in the ASPX pages.
Notice the second line, there is a property skinid when applying a skinid property in the template .skin file, only controls with the same skinid will get the theme from that template.
The ASPX file have this two controls.
The result of this template looks like this.
The first textbox get the looks from the first line in the .skin file while the second have the SkinID property set to blueTextbox and therefor get the properties form the second line in the .skin file.
One thing to keep in mind is that the first line in the .skin file will apply to ALL textboxes that on all pages that implement the template.
What about style?
Implementing different style sheets for each theme is even easier. All you have to do is add a .css file in the theme folder, name it to whatever you want and when that theme is selected for a page it will automatically add a link to that css file in the <head> tag.
<head>
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="App_Themes/Blue/blue.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Blue/style.css" type="text/css" rel="stylesheet" />
</head>
The Site.css is added in the master page in this case, and both blue.css and style.css is added from the theme folder. Very easy to do.
You said different images to?
Yes I did, when you want to specify different images to use for different themes, you do it the same way you do for controls.
Create a new .skin file in App_Themes/Blue folder, name it logo.skin or something else, type the following code in it.
This will set the ImageUrl property on all Images controls using skinID=”logo” to “~/App_Themes/Blue/logo_blue.jpg”.
To the same for the Red theme. 
Now you just add a Image control to the page or master page, set the skinid to “logo” and your logo will change depending on the active theme.
Well how do I set the theme on the page then?
You can either set the theme for all pages in the web.config file or in the @ Page directive on each file.
To set a theme in the web.config file just add the following tag in the <pages theme="Red"></pages> in the <system.web> tag.
To set the theme on the page level add Theme="Blue" in the @ Page directive.
Themes have a priority among themselves for overriding each other, the priority goes as follows (first to last):
- Theme attributes in the @ Page directive
- <pages Theme=”themeName”> elements in <system.web> section of a Web.config file.
- Local control attributes
- StyleSheetTheme attributes in the @ Page directive
- <pages StyleSheetTheme =”themeName”> elements in <system.web> section of a Web.config file.
The difference between using Theme and StyleSheetTheme is that StyleSheetTheme can be overriden by local control attributes, this is true for both @ Page directive and when the theme is specified in the pages element in Web.config.
Apply a theme programmatically, just set the Page.Theme or Page.StyleSheetTheme to the theme name.
Now you are all set to implement themes in your website.
