Walkthrough: Customizing a Web Site Using Themes in Visual Studio

Article
12/04/2014

This walkthrough illustrates how to use themes to apply a consistent look to pages and controls in your Web site. A theme can include skin files that define a common look for individual controls, one or more style sheets, and common graphics for use with controls, such as the TreeView control. This walkthrough shows you how to work with ASP.NET themes in your Web sites.

Tasks illustrated in this walkthrough include:

Applying predefined ASP.NET themes to individual pages and to your site as a whole.
Creating your own theme that includes skins, which are used to define the look of individual controls.

Prerequisites

In order to complete this walkthrough, you will need:

Microsoft Visual Web Developer (Visual Studio).
The .NET Framework.

Creating the Web Site

If you have already created a Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Basic Web Forms Page in Visual Studio), you can use that Web site and go to the next section. Otherwise, create a new Web site and page by following these steps.

This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects in Visual Studio.

To create a file system Web site

Open Visual Web Developer.
On the File menu, click New Web Site.

The New Web Site dialog box appears.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, enter the name of the folder where you want to keep the pages of your Web site.

For example, type the folder name C:\WebSites.
In the Language list, click the programming language you prefer to work in.
Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

To begin your work with themes in this walkthrough, you will set up a Button control, a Calendar control, and a Label control, so you can see how these controls are affected by themes.

To place controls on the page

Switch to Design view.
From the Standard group of the Toolbox, drag a Calendar control, a Button control, and a Label control to the page. The exact layout of the page is not important.

Note

Do not apply any formatting to any of the controls. For example, do not use the AutoFormat command to set the look of the Calendar control.
Switch to Source view.
Be sure that the head element of the page has the runat="server" attribute so that it reads as follows:
```
<head runat="server"></head>
```
Save the page.

To test the page, you will want to see the page before a theme is applied, and then with different themes.

Creating and Applying a Theme to a Page

ASP.NET makes it easy to apply a predefined theme to a page, or to create a unique theme. In this part of the walkthrough, you will create a theme with some simple skins, which define the appearance of controls.

To create a new theme

In Visual Web Developer, right-click the name of your Web site, click Add ASP.Net Folder, and then click Theme.

The folder named App_Themes and a subfolder named Theme1 are created.
Rename the Theme1 folder sampleTheme.

The name of this folder will be the name of the theme that you create (here, sampleTheme). The exact name is not important, but you must remember it when you apply your custom theme.
Right click the sampleTheme folder, select Add New Item, add a new text file, and name it sampleTheme.skin.
In the sampleTheme.skin file, add skin definitions as shown in the following code example.
```
<asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font-Names="Verdana" />
<asp:button runat="server" Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>
```
Note

The exact characteristics that you define are not important. The values in the preceding selection are suggestions that will be more obvious when you test the theme later.

The skin definitions are similar to the syntax for creating a control, except that the definitions include only settings that affect the appearance of the control. For example, the skin definitions do not include a setting for the ID property.
Save the skin file, and then close it.

You can now test the page before any themes are applied.

Note

If you add a cascading style sheet (CSS) file to your sampleTheme folder, it will be applied to all pages that use the theme.

To test themes

Press CTRL+F5 to run the page.

The controls are displayed with their default appearance.
Close the browser, and then return to Visual Web Developer.
Open or switch to Default.aspx, and then switch to Source view.
In the @ Page directive add a Theme attribute that specifies sampleTheme as the theme name:
```
<%@ Page Theme="sampleTheme" ... %> 
```
Note

You must indicate the name of an actual theme in the attribute value (in this case, the sampleTheme.skin file you defined previously).
Press CTRL+F5 to run the page again.

This time, the controls are rendered with the color scheme defined in your theme.

The Label and Button controls will appear with the settings you made in the sampleTheme.skin file. Because you did not make an entry in the sampleTheme.skin file for the Calendar control, it is displayed with its default appearance.
In Visual Web Developer, set the theme to the name of another theme, if available.
Press CTRL+F5 run the page again.

The controls change appearance again.

Style Sheet Themes vs. Customization Themes

After you have created your theme, you can tailor how it is used in your application by associating it with your page as either a customization theme (as done in the previous section), or as a style sheet theme. A style sheet theme uses the same theme files as a customization theme, but its precedence within the page's controls and properties is lower, equivalent to a CSS file. Within ASP.NET, the order of precedence is:

Theme settings, including themes set in your Web.config file.
Local page settings.
Style sheet theme settings.

In this regard, if you choose to use a style sheet theme, your theme's properties will be overridden by anything declared locally within the page. Similarly, if you use a customization theme, your theme's properties will override anything within the local page, and anything within any style sheet theme in use.

To use a style sheet theme and see order of precedence

Switch to Source view.

Change the page declaration:

<%@ Page theme="sampleTheme" %>

to a style sheet theme declaration:

<%@ Page StyleSheetTheme="sampleTheme" %>

Press CTRL+F5 to run the page.

Note that the ForeColor property of the Label1 control is red.
Switch to Design view.
Select Label1 and, in Properties, set ForeColor to blue.
Press CTRL+F5 to run the page.

The ForeColor property of Label1 is blue.
Switch to Source view.
Change the page declaration to declare a theme, rather than a style sheet theme, by changing:
```
<%@ Page StyleSheetTheme="sampleTheme" %>
```
back to:
```
<%@ Page Theme="sampleTheme" %>
```
Press CTRL+F5 to run the page.

The ForeColor property of Label1 is again red.

Basing a Custom Theme on Existing Controls

An easy way to create skin definitions is to use the designer to set appearance properties, and then copy the control definition to a skin file.

To base a custom theme on existing controls

In Design view, set properties of the Calendar control so that the control has a distinctive look. The following settings are suggestions:
- BackColor Cyan
- BorderColor Red
- BorderWidth 4
- CellSpacing 8
- Font-Name Arial
- Font-Size Large
- SelectedDayStyle-BackColor Red
- SelectedDayStyle-ForeColor Yellow
- TodayDayStyle-BackColor Pink
Note

The exact characteristics that you define are not important. The values in the preceding list are suggestions that will be more obvious when you test the theme later.
Switch to Source view and copy the <asp:calendar> element and its attributes.
Switch to or open the sampleTheme.skin file.
Paste the Calendar control definition into the sampleTheme.skin file.
Remove the ID property from the definition in the sampleTheme.skin file.
Save the sampleTheme.skin file.
Switch to the Default.aspx page, and drag a second Calendar control onto the page. Do not set any of its properties.
Run the Default.aspx page.

Both Calendar controls will appear the same. The first Calendar control reflects the explicit property settings that you made. The second Calendar control inherited its appearance properties from the skin definition that you made in the sampleTheme.skin file.

Applying Themes to a Web Site

You can apply a theme to an entire Web site, which means you do not need to apply the theme to individual pages. (If you want, you can override the themes settings on a page.)

To set a theme for a Web site

Open the Web.config file.
In the pages element, add a theme attribute and set its value to the name of theme that you want to apply to the entire Web site, as in the following example:
```
<pages theme="sampleTheme" >
```
Note

Element and attribute names in the Web.config file are case-sensitive.
Save and close the Web.config file.
Switch to or open the Default.aspx file, and then switch to Source view.
Remove the theme attribute (theme="themeName") from the @ Page declaration.
Press CTRL+F5 to run Default.aspx.

The page is now displayed with the theme you specified in the Web.config file.

If you choose to specify a theme name in your page declaration, it will override any theme specified in the Web.config file.

Next Steps

ASP.NET support for themes gives you a variety of options for tailoring the look and feel of an entire application. This walkthrough covered some of the basics, but you might be interested in learning more. For example, you might want to learn more about:

Using themes in general. For more information, see ASP.NET Themes and Skins
Using themes with code. For more information, see How to: Apply ASP.NET Themes Programmatically

Partager via