Chapter 7

Suppose that there is a definition for the TextBox server control in the .skin file:

<asp:Textbox Runat=”server” ForeColor=”#004000” Font-Names=”Verdana” BackColor=”#ffffff” Font-Size=”X-Small” BorderStyle=”Solid” BorderWidth=”1px” BorderColor=”#004000” Font-Bold=”True” />

But, what if you also had a definition in your .css file for each <input> element in the ASP.NET page as shown here:

INPUT

{

background-color: black;

}

When you run the .aspx page with these kinds of style conflicts, the .skin file takes precedence over styles applied to every HTML element that is created using ASP.NET server controls regardless of what the .css file says. In fact, this sort of scenario gives you a page in which the <input> element that is created from the server control is white as defined in the .skin file and the second text box is black as defined in the .css file. This is shown in Figure 7-8.

Figure 7-8

Having your themes include images

Probably one of the coolest reasons why themes, rather than CSS, are the better approach for applying a consistent style to your Web page is that themes enable you to incorporate actual images into the style definitions.

A lot of controls use images to create a better visual appearance. The first step in incorporating images into your server controls that consistently use themes is to create an Images folder within the Themes folder itself, as illustrated in Figure 7-9.

You have a couple of easy ways to use the images that you might place in this folder. The first is to incorporate the images directly from the .skin file itself. You can do this with the TreeView server control. The TreeView control can contain images used to open and close nodes for navigation purposes. You can place images in your theme for each and every TreeView control in your application. If you do that, you can then define the TreeView server control in the .skin file, as shown in Listing 7-8.

214

Themes and Skins

Figure 7-9

Listing 7-8: Using images from the theme folder in a TreeView server control

<asp:TreeView runat=”server” BorderColor=”#FFFFFF” BackColor=”#FFFFFF” ForeColor=”#585880” Font-Size=”.9em” Font-Names=”Verdana” LeafNodeImageURL=”images\summer_iconlevel.gif” RootNodeImageURL=”images\summer_iconmain.gif” ParentNodeImageURL=”images\summer_iconmain.gif” NodeIndent=”30” CollapseImageURL=”images\summer_minus.gif” ExpandImageURL=”images\summer_plus.gif”>

...

</asp:TreeView>

When you run a page containing a TreeView server control, it is populated with the images held in the Images folder of the theme.

It is easy to incorporate images into the TreeView control. It even specifically asks for an image location as an attribute of the control. The new WebParts controls are used to build portals. Listing 7-9 is an example of a Web Part definition from a .skin file that incorporates images from the Images folder of the theme.

Listing 7-9: Using images from the theme folder in a WebPartZone server control

<asp:WebPartZone runat=”server” PartFrameType=”TitleAndBorder” DragHighlightColor=”#6464FE” ShowIconInPartTitle=”True” BorderStyle=”double” BorderColor=”#E7E5DB” BorderWidth=”2pt” BackColor=”#F8F8FC” cssclass=”theme_fadeblue” Font-Size=”.9em” Font-Names=”Verdana”>

<PartContentStyle ForeColor=”#585880” BorderStyle=”double” BorderColor=”#585880” BorderWidth=”1pt” BackColor=”#FFFFFF”></PartContentStyle>

215

Chapter 7

BorderStyle=”solid” Font-Bold=”true” BorderWidth=”1pt” Font-Size=”.9em” BorderColor=”#494979” BackColor=”#F8F7F4” cssclass=”theme_header”></PartTitleStyle>

BackColor=”#6464FE” Font-Size=”.9em” Font-Names=”Verdana”/> </asp:WebPartZone>

As you can see here, this series of toolbar buttons that are in a WebPart now use images that come from the SmokeAndGlass theme. When this WebPart is generated, the style is defined directly from the .skin file, but the images specified in the .skin file are retrieved from the Images folder in the theme itself.

Not all server controls enable you to work with images directly from the Themes folder by giving you an image attribute to work with. If you don’t have this capability, you must work with the .skin file and the CSS file together. If you do, you can place your theme-based images in any element you want. The SmokeAndGlass theme that comes with ASP.NET 2.0 is a good example of how to do this.

Place the image that you want to use in the Images folder just as you normally would. Then define the use of the images in the .css file. The SmokeAndGlass example in Listing 7-10 demonstrates this.

Listing 7-10: Part of the CSS file from SmokeAndGlass.css

.theme_header {

background-image :url( images/smokeandglass_brownfadetop.gif);

}

.theme_highlighted {

background-image :url( images/smokeandglass_blueandwhitef.gif);

}

.theme_fadeblue {

background-image :url( images/smokeandglass_fadeblue.gif);

}

These are not styles for a specific HTML element; instead, they are CSS classes that you can put into any HTML element that you want. In this case, each CSS class mentioned here is defining a specific background image to use for the element.

216

Themes and Skins

After it is defined in the CSS file, you can utilize this CSS class in the .skin file when defining your server controls. Listing 7-11 shows you how.

Listing 7-11: Using the CSS class in one of the server controls defined in the .skin file

<asp:Calendar runat=”server” BorderStyle=”double” BorderColor=”#E7E5DB” BorderWidth=”2” BackColor=”#F8F7F4” Font-Size=”.9em” Font-Names=”Verdana”>

</asp:Calendar>

This Calendar server control definition from a .skin file uses one of the earlier CSS classes in its definition. It actually uses an image that is specified in the CSS file in two different spots within the control (shown in bold). It is first specified in the <SelectedDayStyle> element. Here you see the attribute and value cssclass=”theme_highlighted”. The other spot is within the <TitleStyle> element. In this case, it is using theme_header. When the control is rendered, these CSS classes are referenced and finally point to the images that are defined in the CSS file.

It is interesting that the images used here for the header of the Calendar control don’t really have much to them. For instance, the smokeandglass_brownfadetop.gif image is simply a thin, gray sliver, as shown in Figure 7-10.

Figure 7-10

This very small image (in this case, very thin) is actually repeated as often as necessary to make it equal the length of the header in the Calendar control. The image is lighter at the top and darkens toward the bottom. Repeated horizontally, any control like this gives a three-dimensional effect to the control. Try it out, and you get the result shown in Figure 7-11.

217