Creating a Theme The process of creating a theme involves creating a .

skin file, which defines th e appearance of each element on the page, and placing this skin file within a fo lder, the name of which specifies the name of the theme. All themes are stored within a folder in an application directory called App_Themes. The Following steps are involved in create a simple theme to define a style form atting. Open up your website. Right Click the Solution Explorer and select Add ASP.N ET Folder-->Theme. This creates a new folder within the application called App_Themes, and a ne w empty folder within App_Themes that you will have to name. Name the new folder Blue. Right-click the App_Themes folder and add a new Theme folder named Red. You now have two themes available to your site, although you don t yet have any skin f iles containing style definitions.This is the next part. Right-click the Blue folder and select Add New Item. Select Skin File and ca ll it BlueBits.skin. Click Add. Take a look at the resulting file and you ll see some default comme nts that overview some of the basics of skin files. Repeat this step to add a skin file for the Red theme, called RedBits.skin. Create a new web page by right-clicking the Solution Explorer and selecting Add New Item, selecting a Web Form, calling it SkinSource.aspx, and clicking OK. Drag two Calendar controls onto the page. These controls need some styling, and the first step is to manually add some styles to each of these controls so t hat the first one can be used in a blue theme, and the second can be used in a r ed theme. In just a moment, you ll see the styles to use for these controls. Now drag a Label control onto the page and style it with a bit of color and font styling. Open the BlueBits.skin file in VWD and copy and paste the HTML for your blue Calendar and Label controls in the SkinSource.aspx page into the skin file. Rem ove the ID tags for each of them. Remove the Text attribute and add a SkinID attribute to the Label control to give it a unique style reference. Repeat steps 8 and 9 for the red controls, placing them in the RedBits.skin definition file.

Applying Themes to Pages

Start by creating a Master page for the site. This is going to be a very sma ll and simple site, but having a Master page will help you to navigate consisten tly around the site. Call the Masterpage ThemedMaster.master. Into the Master pa ge, add a TreeView control on the left-hand side of the page, and place the Cont entPlaceholder to the right by using the following HTML. You ll need to create a simple web.sitemap for this example to act as the data source for the TreeView control. Right-click the solution explorer and select A dd New Item Add a SitemapDataSource to the Master page and set the DataSource for the Tr eeView control. Time to build some content pages. In this example, you create three very sim ple pages. The first one is called ThemeDefault.aspx. Start by right-clicking th e Solution explorer and select Add New Item. In the Content placeholder on this new page, type in page! , and then drag two Label controls onto the page. ol s text property to Styled label and the second Label led label . Finally,set the first Label control s SkinID will link up the Label control to use the skinned label s styling. some plain text: Default Set the first Label contr control s text property to Unsty property to textLabel. This

Specify which theme to use for this page. Let s use the blue theme. If you are in Design View,click the gray area and view the properties for the Document. In this properties list, you should set the Theme property to Blue. Save the page and that s the first one out of the way. Add two more pages in the same way. Call them ThemePage1.aspx and ThemePage2 .aspx. Make sure that you specify the same Master page for these content pages. In ThemePage1.aspx, enter the text Page 1 and add a Calendar control onto th e Content area of the page. Set the page s Theme property to Blue In ThemePage2.aspx, enter the text Page 2 and add an ImageButton control to the page. Set its SkinID property to homeImage and the PostBackUrl property to T hemeDefault.aspx. This means that if a user clicks the image, they will be taken back to the ThemeDefault.aspx page.Finally, set the page s Theme property to Red You ve finished the groundwork, so it s time to see the results of your hard wor k. Click the ThemeDefault.aspx in the Solution Explorer and press Ctrl+F5 to run the page.