ASP.NET Themes and Skins

A Theme is a collection of control-level property settings, images, and CSS classes that can be applied to pages across a site to enforce a common look and feel.

A Theme is a collection of Skin, CSS, image, and JavaScript files that define a particular look and feel for a website. [7]

If we set these CssClass properties at the Web control we'd need to remember to explicitly set these property values for each and every data Web control added to our tutorials. So a more manageable approach is to define the default CSS-related properties for the controls (like GridView, DetailsView,FormView, etc.) using a Theme.

Our Theme won't include any images or CSS files (we'll leave the stylesheet Styles.css as-is, defined in the root folder of the web application), but will include two Skins.

A Skin is a file that defines the default properties for a Web control. Specifically, we'll have a Skin file for the GridView and DetailsView controls, indicating the default CssClass-related properties. Skin files need to be placed in a Theme, which are located in the App_Themes folder.

A Skin file specifies the default appearance-related properties for a Web control. [7]

Creating Themes and Skins [1]

Add a new Skin File (ex."GridView.skin"): right-click on the project name and choose Add New Item. Skin files need to be placed in a Theme, which are located in the App_Themes folder. If you don't yet have such a folder, Visual Studio will create one (with the same name of this skin "GridView") when adding the first Skin.
In the solution explorer panel, themes are represented as folders and Skins are represented as files (.skin). Rename the Theme (ex. from "GridView" to "DataWebControls"): right-click on the "GridView" folder in the App_Theme folder and choose Rename.
Enter the definitions markup into the Skin files (see skin examples below);
Apply the Theme to your ASP.NET page. A Theme can be applied:
- on a page-by-page basis;
- for all pages in a website;
- to a control (using a named skin);
To use the Theme in all pages in the website add the following markup to Web.config's <system.web> section:
```
<pages styleSheetTheme="DataWebControls" />
```
Note: The styleSheetTheme setting indicates that the properties specified in the Theme should not override the properties specified at the control level. To specify that Theme settings should trump control settings, use the theme attribute in place of styleSheetTheme;

To apply a theme to an individual page [4], Set the Theme or StyleSheetTheme attribute of the @ Page directive to the name of the theme to use, as shown in the following example:
```
<%@ Page Theme="ThemeName" %>
<%@ Page StyleSheetTheme="ThemeName" %> 
```
To apply a theme to an individual control, you can do it by using a named skin (an entry in a .skin file that has a SkinID property set) and then applying it by ID to individual controls. Set the control's SkinID property, as shown in the following example:
```
<asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />
```

GridView example skin

This defines the default skin properties for the CssClass-related properties for any GridView in any page that uses the DataWebControls Theme:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
    <AlternatingRowStyle CssClass="AlternatingRowStyle" />
    <RowStyle CssClass="RowStyle" />
    <HeaderStyle CssClass="HeaderStyle" />
    <SelectedRowStyle CssClass="SelectedRowStyle" />
    <FooterStyle CssClass="FooterStyle" /> 
    <PagerStyle CssClass="PagerRowStyle" />
    <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" /> 
</asp:GridView>

DetailsView example skin

<asp:DetailsView runat="server" CssClass="DataWebControlStyle">
    <AlternatingRowStyle CssClass="AlternatingRowStyle" />
    <RowStyle CssClass="RowStyle" />
    <FieldHeaderStyle CssClass="HeaderStyle" />
</asp:DetailsView>

DataList example skin:

<asp:DataList runat="server" CssClass="DataWebControlStyle"> 
    <AlternatingItemStyle CssClass="AlternatingRowStyle" /> 
    <ItemStyle CssClass="RowStyle" /> 
    <HeaderStyle CssClass="HeaderStyle" /> 
    <FooterStyle CssClass="FooterStyle" /> 
    <SelectedItemStyle CssClass="SelectedRowStyle" /> 
</asp:DataList>

Example CSS file for the examples above:

.DataWebControlStyle
{
    font-size: 90%;
}

.AlternatingRowStyle
{
    background-color: #fcc;
}

.RowStyle
{
}

.HeaderStyle
{
    background-color: #900;
    color: White;
    font-weight: bold;
}

.SelectedRowStyle
{
    background-color: Yellow;
}

.FooterStyle
{
    background-color: #a33;
    color: White;
    text-align: right;
}

.PagerRowStyle
{
    background-color: #ddd;
    text-align: right;
}

IT

Pages