Including CSS files in your themes
In addition to the server control definitions that you create from within a .skin file, you can make further definitions using Cascading Style Sheets (CSS). You might have noticed, when using a .skin file, that you could define only the styles associated with server controls and nothing else. But developers usually use quite a bit more than server controls in their ASP.NET pages. For instance, ASP.NET pages are routinely made up of HTML server controls, raw HTML, or even raw text. As the Summer theme stands at present it has only a Summer.skin file associated with it. Any of these other items would have no style whatsoever applied to them.
For a theme that goes beyond the server controls, you must further define the theme style so that HTML server controls, HTML, and raw text are all changed according to the theme. You achieve this with a CSS file within your Themes folder.
It is rather easy to create CSS files for your themes when using Visual Studio 2005. Right-click the Summer theme folder and select Add New Item. In the list of options, select the option Style Sheet and name it Summer.css. The Summer.css file should be sitting right next to your Summer.skin file. This creates an empty .css file for your theme. I won't go into the details of how to make a CSS file using Visual Studio 2005 and the CSS creation tool. The process is the same as in previous versions. I just want to point out that it is quite simple to do this because the dialog that comes with Visual Studio 2005 enables you to completely define your CSS page with no need to code. A sample dialog is shown in Figure 7-7.
To create a comprehensive theme with this dialog, you define each HTML element that might appear in the ASP.NET page. This can be a lot of work, but it's worth it in the end. For now, create a small CSS file that changes some of the nonserver control items on your ASP.NET page. This CSS file is shown in Listing 7-7.
Listing 7-7: A CSS file with some definitions
In this CSS file, you define four things. First, you define text that is found within the <body> tag of the page (basically all the text). Plenty of text appears in a typical ASP.NET page that is not placed inside of an <asp:label> or <asp:literal> tag. Therefore, you define how your text should appear—otherwise, your Web page appears quite odd at times. In this case, a definition is in place for the size, the font family, and the color of the text. You make this definition the same as the one for the <asp:label> server control in the Summer.skin file.
The next three definitions in this CSS file revolve around the <a> element (for hyperlinks). One cool feature that many Web pages use is responsive hyperlinks&mashor hyperlinks that change when you hover a mouse over them. The A:link definition defines what a typical link looks like on the page. The A:visited definition defines the look of the link if the end user has clicked on the link previously (without this definition, it is typically purple in IE). Then the A:hover definition defines the appearance of the hyperlink when the end user hovers the mouse over the link. You can see that not only are these three definitions changing the color of the hyperlink, but they are also changing how the underline is used. In fact, when the end user hovers the mouse over a hyperlink on a page using this CSS file, an underline and an overline appear on the link itself.
In CSS files, the order in which the style definitions appear in the .css file is important. This is an interpreted
file—the first definition that appears in the CSS file is applied first to the page, then the second
is applied, and so forth. Some styles might change previous styles, so make sure your style definitions
are in the proper order. For instance, if you put the A:hover style definition first, you would never see it.
The A:link and A:visited definitions would supersede it because they are defined after the fact.
In working with your themes that include .css files, you must understand what they can and cannot do for you. For instance, examine an .aspx file that contains two text boxes—one text box created using a server control and another text box created using a typical <input> HTML element:
<asp:Textbox ID="TextBox1" Runat="server" />
<input type="text" />
Suppose that there is a definition for the TextBox server control in the .skin file:
<asp:Textbox Runat="server" ForeColor="#004000"
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:
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.
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.
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"
ParentNodeImageURL="images \summer_iconmain.gif" NodeIndent="30"
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"
BorderStyle="double" BorderColor="#E7E5DB" BorderWidth="2pt"
BackColor="#F8F8FC" cssclass="theme_fadeblue" Font--Size=".9em"
<PartContentStyle ForeColor="#585880" BorderStyle="double"
<FooterStyle ForeColor="#585880" BackColor="#CCCCCC"></FooterStyle>
checked="False" enabled="True" visible="True"></WebPartHelpVerb>
checked="False" enabled="True " visible="True"></WebPartCloseVerb>
checked="False" enabled="True" visible="True"></WebPartRestoreVerb>
checked="False" enabled="True" visible="True"></WebPartMinimizeVerb>
checked="False" enabled="True " visible="True"></WebPartEditVerb>
<TitleStyle ForeColor="#FFFFFF" Font--Names="Verdana"
BorderStyle="double" BorderWidth="0" Font--Bold="true"
<PartStyle ForeColor="#585880" Font--Names="Verdana" Font--Size=".9em"
<PartTitleStyle ForeColor="#585880" Font--Names="Verdana"
BorderStyle="solid" Font--Bold="true" BorderWidth="1pt"
Font--Size=".9em" BorderColor="#494979" BackColor="#F8F7F4"
<PartVerbStyle ForeColor="#FFFFFF" Font--Names="Verdana"
<EditWebPartStyle ForeColor="#6464FE" BorderColor="#6464FE"
BackColor="#6464FE" Font--Size=".9em" Font--Names="Verdana"/>
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
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 back-ground image to use for the element.
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"
<TodayDayStyle BackColor="#F8F7F4" BorderWidth="1"
BorderColor="#585880" ForeColor="#585880" />
<OtherMonthDayStyle BackColor="transparent" ForeColor="#CCCCCC" />
<SelectedDayStyle ForeColor="#6464FE" BackColor="transparent"
<TitleStyle Font-Bold="True" BackColor="#CCCCCC"
BorderWidth="1pt" cssclass="theme_header" />
<NextPrevStyle Font-Bold="True" ForeColor="#585880"
BorderColor="transparent" BackColor="transparent" />
<DayStyle ForeColor="#000000" BorderColor="transparent"
<SelectorStyle Font-Bold="True" ForeColor="#696969"
<WeekendDayStyle Font-Bold="False" ForeColor="#000000"
<DayHeaderStyle Font-Bold="True" ForeColor="#585880"
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.
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.