Themes and Skins Part 1

While designing a web application, what is encouraged or rather a standard is to have a similar look and feel across all the pages in your web application. This is not a new concept and relates to the topic of formatting, having similar fonts, colors and other common GUI based designing and formatting issues.
With ASP.Net 2.0 and on wards along with already HTML and CSS (Cascading Style Sheets) Microsoft introduces a technique called Themes.
Themes
Themes not only concentrate on formatting fonts and colors rather it has a broader functionality. If defined properly you can use these formats individually for each page and even at every server control level, you can apply these formattings on the entire application or even at user control and web server control levels individually.
If you have being doing web development for some time, you must have recognized that ASP.NET 2.0 themes and standard CSS files works the same way. Themes and CSS are similar in a way that they both enable us to define visual styles for our web pages but having said that Themes and CSS have some major differences discussed below
1. There is no feature to apply CSS file at application level (more on this later)
2. If you have used a CSS file on a page, there is no way to stop a control applying those styles automatically (more on this later)
3. Unlike CSS which focus of HTML tags, themes are more specifically ASP.NET controls oriented and we can still use CSS files in our themes.
4. As Themes are applied to ASP.NET controls we actually have more control over the web controls like rather than only having fonts and background and foreground colors and height and width formatting options, we can use more specific control level properties like images, MaxLength (in case of TextBox control) Paging and Sorting, Page Size options (in case of GridView control) etc
5. Themes are applied to the pages on server, this means we do not have to worry about different browsers only because they implements CSS little differently

Components of Themes
ASP.NET Themes consists of the following 3 components

1. App_Themes Folder
This is a special ASP.NET built-in folder which can be created my right clicking the Solution in Solution Explorer and selecting from the options Add ASP.NET Folder>Theme to create an App_Theme Folder. This folder tells ASP.NET engine that it contains more folders discussed below.

2. Theme Folder
Right click App_Themes folder to select the option Add ASP.NET Folder>Theme to create Themes folder. The purpose of these folders can be understood with the following example
Suppose you want to make 4 different color formatting options available for the user to select from and user selects from a Red, Blue, Yellow Green themes from your application. What you need to do is to first have a logical hierarchy of this idea. You do this by right clicking the App_Themes folder and adding a new folder inside the App_Themes folder. You need to make 4 folders namely Red, Blue, Yellow and Green.
This means that you have a one to many relations when it comes to App_Themes to actual theme folders. Are we done with our themes yet? No, like .css files we need to define something called .skin files

3. Skin Files
A skin file is just a text file with the extension of “.skin”. This is the file where the core operation is performed. This is where we will define our controls formatting and other properties.

Application and other detailed and more advance discussion on the topic in my next article