Dela via

Walkthrough: Customizing a Web Site Using Themes in Visual Studio

  • Artikel

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.

Visual Studio project with source code is available to accompany this topic: Download. A set of example ASP.NET themes is also available: Download.

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 Page in Visual Web Developer), you can use that Web site and go to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

  1. Open Visual Web Developer.

  2. On the File menu, click NewWeb Site.

    The New Web Site dialog box appears.

  3. Under Visual Studio installed templates, click ASP.NET Web Site.

  4. 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.

  5. In the Language list, click the programming language you prefer to work in.

  6. 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

  1. Switch to Design view.

  2. 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.

  3. Switch to Source view.

  4. Be sure that the head element of the page has the runat="server" attribute so that it reads as follows:

    <head runat="server"></head>

  5. 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

  1. 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.

  2. 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.

  3. Right click the sampleTheme folder, select Add New Item, and add a Skin File item named sampleTheme.skin.

  4. In the sampleTheme.skin file, add skin definitions after the comments section 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 setting properties on 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 when the definitions are used as the default for all controls of a particular type. You can specify a SkinId value for a specific control so that the skin settings apply only to that control.

  5. Save the skin file, and then close it.

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

To assign a theme to a page and to test the page

  1. Press CTRL+F5 to run the page.

    The controls are displayed with their default appearance.

  2. Close the browser, and then return to Visual Web Developer.

  3. Open or switch to the Default.aspx page, and then switch to Source view.

  4. 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).

  5. 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.

  6. In Visual Web Developer, set the theme to the name of another theme, if available.

  7. Press CTRL+F5 run the page again.

    The controls change appearance again.

Adding a CSS File to the Theme

You can add a Cascading Style Sheet (CSS) file to your sampleTheme folder. The styles defined in the CSS file are applied to all pages that use the theme.

To add a CSS file to a theme

  1. Switch to or open the Default.aspx file.

  2. Switch to Source view.

  3. Add the following code immediately after the opening <form> tag:

    <h2 class="headline" >This is the headline</h2>

    This HTML tag will have a style applied to it from the CSS file in the theme folder.

  4. Right-click the sampleTheme folder, select Add New Item, then add a Style Sheet item.

  5. In the Stylesheet.css file, on a new line, type the following:

    .headline { color: Red; background-color: Yellow; }

  6. Save the .css file.

  7. Switch to the Default.aspx file.

  8. Press CTRL+F5 to run the page.

    The heading appears using the colors defined in the CSS file.

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

  1. Switch to or open the Default.aspx file.

  2. Switch to Source view.

  3. Change the Theme attribute in the @ Page directive to a StyleSheetTheme attribute, as in the following example

    <%@ Page StyleSheetTheme="sampleTheme" ... %>

  4. Press CTRL+F5 to run the page.

    Notice that the ForeColor property of the Label1 control is red.

  5. Switch to Design view.

  6. Select Label1, and then in the Properties window set ForeColor to blue.

  7. Press CTRL+F5 to run the page.

    The ForeColor property of Label1 is blue.

  8. Switch to Source view.

  9. Change the Theme attribute in the @ Page directive to a theme rather than a style sheet theme, as in the following example:

    <%@ Page Theme="sampleTheme" %>

  10. 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

  1. In Design view, select the Calendar control and set its properties so that the control has a distinctive look. The following settings are suggestions:

    • BackColor   Yellow

    • BorderColor   Red

    • BorderWidth   4

    • CellSpacing   8

    • Font-Name   Arial

    • Font-Size   Large

    • SelectedDayStyle-BackColor   Red

    • SelectedDayStyle-Font-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.

  2. Switch to Source view and copy the <asp:calendar> element and its attributes.

  3. Switch to or open the sampleTheme.skin file.

  4. Paste the Calendar control definition into the sampleTheme.skin file.

  5. Remove the ID property from the definition in the sampleTheme.skin file.

  6. Save the sampleTheme.skin file.

  7. Switch to the Default.aspx page, and drag a second Calendar control onto the page. Do not set any of its properties.

  8. 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

  1. Open the Web.config file.

  2. 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.

  3. Save and close the Web.config file.

  4. Switch to or open the Default.aspx file, and then switch to Source view.

  5. Remove the theme attribute (theme="themeName") from the @ Page directive.

  6. 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 a page, 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:

See Also

Concepts

ASP.NET Themes and Skins Overview