Programming Microsoft ASP.NET 4 - Dino Esposito [179]
Note
The following convention holds true in this book and, in general, in related literature. Unless otherwise suggested by the context, the word “theme” indicates a customization theme. Customization themes and style sheet themes use the same source files. They differ only in how the ASP.NET runtime applies them to a page. The same theme can be applied as a customization theme or a style sheet theme at different times.
Structure of a Theme
Themes are expressed as the union of various files and folders living under a common root directory. Themes can be global or local. Global themes are visible to all Web applications installed on a server machine. Local themes are visible only to the application that defines them. Global themes are contained in child directories located under the following path. The name of the directory is the name of the theme.
%WINDOWS%\Microsoft.NET\Framework\[version]\ASP.NETClientFiles\Themes
Local themes are specialized folders that live under the App_Themes folder at the root of the application. Figure 8-10 shows the content of a couple of themes in a Web application.
Figure 8-10. The App_Themes directory in a Web project.
As you can see, the theme in the figure consists of a .css file and a .skin file, plus a subdirectory of images. Generally, themes can contain a mix of the following resources:
CSS files Also known as style sheets, CSS files contain style definitions to be applied to elements in an HTML document. Written according to a tailor-made syntax, CSS styles define how elements are displayed and where they are positioned on your page. The World Wide Web Consortium (W3C) maintains and constantly evolves CSS standards. Visit http://www.w3.org for details on current CSS specifications. CSS files are located in the root of the theme folder.
Skin files A skin file contains the theme-specific markup for a given set of controls. A skin file is made of a sequence of control definitions that include predefined values for most visual properties and supported templates. Each skin is control-specific and has a unique name. You can define multiple skins for a given control. A skinned control has the original markup written in the .aspx source file modified by the content of the skin. The way the modification occurs depends on whether a customization theme or a style sheet theme is used. Skin files are located in the root of the theme folder.
Image files Feature-rich ASP.NET controls might require images. For example, a pageable DataGrid control might want to use bitmaps for first or last pages that are graphically compliant to the skin. Images that are part of a skin are typically located in an Images directory under the theme folder. (You can change the name of the folder as long as the name is correctly reflected by the skin’s attributes.)
Templates A control skin is not limited to graphical properties but extends to define the layout of the control—for templated controls that support this capability. By stuffing template definitions in a theme, you can alter the internal structure of a control while leaving the programming interface and behavior intact. Templates are defined as part of the control skin and persisted to skin files.
The content types just listed are not exhaustive, but they do cover the most commonly used data you might want to store in a theme. You can have additional subdirectories filled with any sort of data that makes sense to skinned controls. For example, imagine you have a custom control that displays its own user interface through the services of an external ASP.NET user control (.ascx). Skinning this control entails, among other things, indicating the URL to the user control. The user control becomes an effective part of the theme and must be stored under the theme folder. Where exactly? That is up to you, but opting for a Controls subdirectory doesn’t seem to be a bad idea.