ASP.NET 2.0 Themes - Part I  

When developing a web application, developers always ensure that all pages have consistent look and feel across all pages. Basically we use same fonts, colors, styles and our clients often wish to have different color schemes. For instance, a cool guy would wish to have an oceanic theme, a tough guy likes fire & smoke theme, a girl would like to have a romantic lavender theme. So people taste differs and we need to implement different themes but without any drastic change in our web page and there comes ‘Themes', an excellent addition in ASP.NET 2.0.

What are Themes?

.NET themes are specific to .net server controls. The Cascading Style Sheet together with Skin is called as Theme. Skin file defines the appearance of the asp.net server controls. For example, a skin can be defined for a Submit button specifically or for a button generally with a background color, fore color and font. This file has a .skin extension. Applying a skin changes a piece of software's look and feel - some skins merely make the program more aesthetically pleasing, but others can rearrange elements of the interface, potentially making the program easier to use.

            Themes are similar to CSS, but it goes further and cover skin file and CSS file which is specific to asp.net to ease developer's work. Theme can be applied at application level, page level & control level.

How to create Theme?

To include the theme in your application, follow the steps below

• In Solution Explorer, right click on the websiteàselect Add ASP.NET Folderàselect Theme.

(App_Themes folder will be created in your website which is specific to your web application.)

• Now right click App_Themes folderàselect Add ASP.NET Folderàselect Theme.

(A Theme is created for your application. You can give your application specific name to the theme)

• Next right click the theme folder, add new css file and skin file.

(A Theme covering CSS file and Skin file is ready)

CSS includes the styles required for your web application and Skin file includes the default control styles and also specific control styles with SkinID's.

How to apply Theme?

The easiest way to apply uniform styles across all pages is by using Theme.  

      Application Level    

      Page Level

      Control Level

     You can enable or disable theme at control    level by setting the EnableTheming property.

After apecifying the theme attribute, you can apply the CSS class and SkinID wherever needed. So when we include a new theme, we just need to create a CSS and Skin file pair without altering the aspx page.

We will look into detail about "Specifying theme in code behind and Tips & Tricks in designing a theme based web application", in the next blog.