Export (0) Print
Expand All

Walkthrough: Customizing a Web Site Using Themes in Visual Studio 

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.

In order to complete this walkthrough, you will need:

  • Microsoft Visual Web Developer (Visual Studio).

  • The .NET Framework.

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 New Web 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.

    NoteNote

    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.

ASP.NET makes it easy to apply a predefined theme to a page, or to create a unique theme. (For details, see How to: Define ASP.NET Themes.) 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, add a new text file, and name it sampleTheme.skin.

  4. 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"/>
    
    NoteNote

    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.

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

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

NoteNote

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

  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. In Source view, add the following attribute to the @ Page directive:

    <%@ Page Theme="sampleTheme" ... %> 
    
    NoteNote

    You must indicate the name of an actual theme in the attribute value (in this case, the sampleTheme.skin file you defined previously).

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

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

  6. Press CTRL+F5 run the page again.

    The controls change appearance again.

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 Source view.

  2. Change the page declaration:

    <%@ Page theme="sampleTheme" %>
    

    to a style sheet theme declaration:

    <%@ Page StyleSheetTheme="sampleTheme" %>
    
  3. Press CTRL+F5 to run the page.

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

  4. Switch to Design view.

  5. Select Label1 and, in Properties, set ForeColor to blue.

  6. Press CTRL+F5 to run the page.

    The ForeColor property of Label1 is blue.

  7. Switch to Source view.

  8. Change the page declaration to declare a theme, rather than a style sheet theme, by changing:

    <%@ Page StyleSheetTheme="sampleTheme" %>
    

    back to:

    <%@ Page Theme="sampleTheme" %>
    
  9. Press CTRL+F5 to run the page.

    The ForeColor property of Label1 is again red.

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, 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

    NoteNote

    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.

You can apply a theme to an entire Web site, which means you do not need to reapply 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. Create a Web.config file if one was not automatically added to your Web site by following these steps:

    1. In Solution Explorer, right-click the name of your Web site, and then click Add New Item.

    2. Under Templates, select Web Configuration File, and then click Add.

      Note   You do not need to type a name, because the file is always named Web.config.

  2. Add the <pages> element if it does not already exist. The <pages> element should appear inside the <system.web> element.

  3. Add the following attribute to the <pages> element.

    <pages theme="sampleTheme" /> 
    
    NoteNote

    Web.config is case-sensitive and the values are camel-cased. (For example: theme and styleSheetTheme).

  4. Save and close the Web.config file.

  5. Switch to Default.aspx and switch to Source view.

  6. Remove the theme="themeName" attribute from your page declaration.

  7. 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 your Web.config file.

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:

Community Additions

ADD
Show:
© 2014 Microsoft