Creating A Theme asp.net

The Themes feature in ASP.NET 2.0 allows you to dictate the appearance of controls in your application using template files with a .skin extension, and with style sheets. In this article, we will examine the Themes feature in-depth.

There is some overlap in what you can do with themes and master pages, as we will see later in the article. What you ultimately can achieve with the combination of these two features is the following:

• Easily build a web application with consistent layout and appearance across all pages
• Easily change the layout and appearance of all pages just by modifying a few template files
• Easily personalize an application at run time for a specific user by letting the user chose their favorite look from a number of appearance and layout options

Let’s get started understanding how themes work with a simple example.

Creating A Theme

Themes, unlike master page files, need to live underneath a special directory by the name of App_Themes. Visual Studio will add an App_Themes folder to a web application when you right click the web project, select Add Folder from the context menu, and select the Theme folder item.

Also unlike master pages (which are single files), themes consist of a collection of files. A theme may contain .skin files, style sheets, and even image files. To organize and name themes, we use subfolders in App_Themes. In the following screen shot, we have a theme by the name of “Odeish” and a theme by the name of “Codeish”.

Inside of our Odeish folder we will create a .skin file. You can add as many .skin files to a theme as you need. Each skin file will contain one or more control skins. A control skin specifies the property settings to apply to a specific type of control.

In our example, we will create a skin file with the name of Calendar.skin. Although our skin file will only contain the control skin for a single type of control – the Calendar control, we could take a different approach and add all the control skins for a theme inside of a single skin file. In this case our Calendar.skin file will contain the following.

<asp:Calendar runat="server" BackColor="White"

              BorderColor="#3366CC" BorderWidth="1px" CellPadding="1"

              DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"

              ForeColor="#003399" Height="200px" Width="220px">

  <SelectedDayStyle BackColor="#009999" Font-Bold="True"

                    ForeColor="#CCFF99" />

  <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />

  <WeekendDayStyle BackColor="#CCCCFF" />

  <OtherMonthDayStyle ForeColor="#999999" />

  <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />

  <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />

  <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />

  <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px"

              Font-Bold="True"

              Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />

</asp:Calendar>

Notice a control skin looks just like the declaration of a server-side control in an ASPX or ASCX file, with the exception that we don’t set the ID property in the skin. The runtime will apply the property values and styles in this skin to all of the calendar controls on every page using the Odeish theme.

Here is another example showing the control skin for a server side Label control. We can place this skin inside a second skin file in the Odeish theme by the name of Label.skin. This skin will set all of our Label controls with a BlueViolet ForeColor property.

<asp:Label runat="server" ForeColor="BlueViolet" />

You can generally skin any appearance related property on a control, but not all properties. Some properties, like the ID and EnableViewState properties have metadata set to forbid setting the property via a skin (the System.Web.UI.ThemeableAttribute will be present on the property with a value of false). The ThemeableAttribute can also be applied at the class level to mark an entire control as themeable or not. The Repeater control is not themeable because it derives from the Control class which is marked with Themeable=false. Any control deriving from WebControl will have themeing enabled by default.