Beginning ASP.NET 2
.0.pdf
Styling with Themes
How It Works
Only two things are required to style an HTML element on a page using a separate CSS file. One is the class to be used by the element, and the other is a link that the page will use to locate the CSS file. When you dragged the CSS file onto the design surface of the page, the following code was added for you at the top of the page:
<html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”>
<title>Styled Page 2</title>
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” /> </head>
That link at the top of your page tells your page where to find its style information. From that moment on, any class attributes in the page will attempt to refer to the CSS style sheet for the styling information for those elements. If the class cannot be found, no styles are applied, unless they are specified manually in the Style attribute of the element.
HTML elements with class attributes specified can also have additional style information specified in the Style attribute. Any styles defined in the Style attribute will override those specified in the CSS file, giving you the chance to fine-tune the appearance of selected elements on your page.
Server controls are somewhat different. Because a server control will be converted to appropriate HTML when it is rendered, the available properties will be different. In this example, you used a Label control. The Label control is a relatively simple control, so there’s not a huge amount of styling you can add to it. In this case, you added a link to the CSS style, and defined one additional style. The CssClass attribute used by server controls relates directly to the class attribute found on HTML elements. The individual style attributes are similar to the individual parts found in the HTML style attributes:
<asp:Label CssClass=”HighlightedText” Font-Italic=”true” ID=”Label1” runat=”server” Text=”This is an ASP.NET label”></asp:Label>
When the label is rendered, the following code is generated:
<span id=”Label1” class=”HighlightedText” style=”font-style:italic;”>This is an ASP.NET label</span>
Notice that the custom style attributes are converted to a standard style tag on the browser. Because CSS styling is applied on the client side, once the page is rendered the class and style attributes on the HTML elements will have styles and CSS styling applied just like static HTML elements.
Limitations of CSS and Server-Side Code Styles
When you style a site using CSS, you can specify how specific elements will appear on a page. This works just fine in a static HTML web site, but when it comes to server-side elements, you will start to run into problems. Take, for example, a simple ASP.NET Panel control. If you drag a Panel control onto a page, add some text, and view the page in two different browsers (for example, Internet Explorer and an older or more limited browser like Links), you will see different results when you view the source of the page. Here’s some example source code:
149
Chapter 5
<form id=”form1” runat=”server”>
<asp:Panel ID=”Panel1” runat=”server” Height=”50px” Width=”125px”>This text is contained within an ASP.NET Panel control
</asp:Panel>
</form>
Now, viewed in Internet Explorer 6 and Firefox 1.0.2, the following source code has been generated:
<form method=”post” action=”StyledPanels.aspx” id=”form1”> <div>
<input type=”hidden” name=”__VIEWSTATE” id=”__VIEWSTATE” value=”/wEPDwULLTEwODU4OTkxMzRkZHehxD/SHmjEeZzCKx7+bB752B3R” />
</div>
<div id=”Panel1” style=”height:50px;width:125px;”>
This text is contained within an ASP.NET Panel control </div>
</form>
Now if you view that same page in an older browser (for example, Mozilla 5.0):
<form name=”form1” method=”post” action=”StyledPanels.aspx” id=”form1”> <input type=”hidden” name=”__VIEWSTATE” id=”__VIEWSTATE”
value=”/wEPDwULLTEwODU4OTkxMzRkZHBovyeleyCJNtOpi+uco+l/zE5a” />
<div id=”Panel1”>
This text is contained within an ASP.NET Panel control </div>
</form>
Notice how the Panel has been rendered to a <div> control in both cases, but in the second case, it has lost its height and width information. It’s a small change in this case, but it’s a great improvement over ASP.NET 1.1, which used to render HTML tables on older browsers for ASP.NET Panel controls. For example:
<table id=”Panel1” cellpadding=”0” cellspacing=”0” border=”0” height=”50” width=”125”>
<tr><td>
This text is contained within an ASP.NET Panel control </td></tr>
</table>
Now although ASP.NET 2.0 has removed a lot of issues like this from our day-to-day programming lives, the problem still remains that what you see on the server side isn’t the same as you will see on the client side, and you can’t guarantee that an element will always be rendered in the same way on every browser. What ASP.NET 2.0 attempts to do is to provide a mechanism for specifying the appearance
of an element based on its server-side control type, not on its client-side control type, so that when a control is rendered on different browsers, consistency is maintained where possible. This is achieved using themes and skins.
150
Styling with Themes
Themes
Themes are used to define the look and feel of a web site, similarly to how pages are styled using CSS. However, unlike CSS, themes can specify how server-side elements, like a TreeView control, for example, will appear when they are rendered on the browser. Remember that server controls have to be converted to standard HTML and possibly JavaScript if a browser is to understand how to render them on a page. A themed server control will have style attributes applied to each of the relevant client-side elements that are generated when the page is requested.
A theme, once it has been created, can be used in one of two ways. A theme can be used as a Stylesheet theme, which acts in a similar way to a regular CSS style sheet. The alternative is to use your theme as a Customization theme, which changes the order of preference for style rules that you may be used to, so that the Customization theme will specify the style to use for each element, overriding any style preferences specified in a separate style sheet, or even in the style attributes of an element.
The basic method for creating a theme is the same, whichever way you use it. Additionally, you can choose to use one theme throughout an entire site, or a different theme on each individual page.
Creating a Theme
The process of creating a theme involves creating a .skin file, which defines the appearance of each element on the page, and placing this skin file within a folder, the name of which specifies the name of the theme. All themes are stored within a folder in an application directory called App_Themes. Here’s a look at a sample skin file:
<asp:Calendar runat=”server” Font-Names=”Century Gothic” Font-Size=”Small”> <OtherMonthDayStyle BackColor=”Lavender” />
<DayStyle ForeColor=”MidnightBlue” /> <TitleStyle BackColor=”LightSteelBlue” />
</asp:Calendar>
<asp:TreeView runat=”server” ExpandDepth=”1” Font-Names=”Century Gothic” BorderColor=”LightSteelBlue” BorderStyle=”Solid” >
<SelectedNodeStyle Font-Bold=”True” ForeColor=”SteelBlue” /> <RootNodeStyle Font-Bold=”True” />
<NodeStyle ForeColor=”MidnightBlue” /> <LeafNodeStyle Font-Size=”Smaller” /> <HoverNodeStyle ForeColor=”SteelBlue” />
</asp:TreeView>
<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Century Gothic” FontSize=”10pt” ForeColor=”MidnightBlue”></asp:Label>
<asp:ImageButton SkinId=”homeImage” runat=”server” ImageUrl=”~/platypus.gif” />
This file contains definitions for four types of elements. The ASP.NET TreeView control and the ASP.NET Calendar control in this file define how each of the calendars and tree view controls on a site will appear. Notice that these controls have no ID tag — this is a feature of all skin files. Each element within a skin file appears without an ID. At run time, if you have a page that has this theme specified as the default theme, and contains a Calendar control, the calendar on the page will automatically inherit the styles defined in this file.
151
Chapter 5
The other two controls in this skin file, the Label and the Image Button controls, have associated SkinIds. These attributes enable you to create sites with many different types of Label controls or Image Button controls on them, and style selected instances of those controls using the skin data provided — the link to the skin file is controlled by the SkinId property. Hence, if you want to include two Label controls on a web page and style one of them using a theme, you can use the following syntax:
<asp:Label ID=”Label1” SkinID=”textLabel” runat=”server” Text=”Label”> Styled label</asp:Label>
<asp:Label ID=”Label2” runat=”server” Text=”Label”>Unstyled label</asp:Label>
The SkinID property in this example specifies the style to apply to this control, as long as it has been defined in the theme used on that page.
In the following Try It Out, you create a simple theme in VWD and see how to define style formatting. You’ll use this theme, and one other, in the examples later in this chapter.
Try It Out |
Creating Themes |
1.In VWD, open up the Chapter05 web site. Right-click the C:\...\Chapter05\ folder at the top of the Solution Explorer and select Add ASP.NET Folder Theme. You will see the screen shown in Figure 5-12.
Figure 5-12
152
Styling with Themes
2.This will create a new folder within the application called App_Themes, and a new empty folder within App_Themes that you will have to name. Name the new folder Blue.
3.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 files containing style definitions. This is the next part.
4.Right-click the Blue folder and select Add New Item. Select Skin File and call it BlueBits.skin, as shown in Figure 5-13.
Figure 5-13
Click Add. Take a look at the resulting file (see Figure 5-14) and you’ll see some default comments that overview some of the basics of skin files.
Figure 5-14
153
Chapter 5
5.Repeat this step to add a skin file for the Red theme, called RedBits.skin.
6.For these examples, you’ll find it really handy to create a simple ASP.NET page for trying out new styles before you add controls to a skin file. Create a new web page called SkinSource.aspx by right-clicking the C:\...\Chapter05 root in the Solution Explorer and selecting Add New Item, selecting a Web Form, calling it SkinSource.aspx, and clicking OK.
7.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 that the first one can be used in a blue theme, and the second can be used in a red theme. In just a moment, you’ll see the styles to use for these controls — first, Figure 5-15 shows how they will look when they are styled.
Figure 5-15
Notice that the Properties pane contains many different style options for the Calendar control. Set the properties as follows:
154
|
|
|
Styling with Themes |
|
|
|
|
|
|
|
Blue Skin |
|
|
|
|
Attribute |
Style |
Code |
|
|
|
|
|
|
|
Font-Names |
Century Gothic |
<asp:Calendar ID=”Calendar1” |
|
|
|
|
runat=”server” |
|
|
Font-Size |
Small |
Font-Names=”Century Gothic” |
|
|
|
|
Font-Size=”Small”> |
|
|
OtherMonthDayStyle - |
Lavender |
<OtherMonthDayStyle |
|
|
BackColor |
|
BackColor=”Lavender” /> |
|
|
|
|
<DayStyle |
|
|
DayStyle - ForeColor |
MidnightBlue |
ForeColor=”MidnightBlue” /> |
|
|
|
|
<TitleStyle |
|
|
TitleStyle - BackColor |
LightSteelBlue |
BackColor=”LightSteelBlue” /> |
|
|
|
|
</asp:Calendar> |
|
|
|
|
|
|
|
Red Skin |
|
|
|
|
Attribute |
Style |
Code |
|
|
|
|||
|
|
|
|
|
|
Font-Names |
Garamond |
<asp:Calendar ID=”Calendar2” |
|
|
|
|
runat=”server” |
|
|
Font-Size |
Medium |
Font-Names=”Garamond” |
|
|
|
|
Font-Size=”Medium” |
|
|
BorderColor |
Chocolate |
BorderColor=”Chocolate” |
|
|
|
|
BorderStyle=”Ridge” |
|
|
BorderStyle |
Ridge |
BorderWidth=”8px” |
|
|
|
|
DayNameFormat=”FirstLetter”> |
|
|
BorderWidth |
8px |
<OtherMonthDayStyle |
|
|
|
|
BackColor=”BlanchedAlmond” /> |
|
|
DayNameFormat |
FirstLetter |
<DayStyle ForeColor=”Maroon” /> |
|
|
|
|
<TitleStyle BackColor=”Maroon” |
|
|
OtherMonthDayStyle - |
BlanchedAlmond |
Font-Bold=”True” |
|
|
BackColor |
|
ForeColor=”#FFFFC0” /> |
|
|
|
|
</asp:Calendar> |
|
|
DayStyle - ForeColor |
Maroon |
|
|
|
TitleStyle - BackColor |
Maroon |
|
|
|
TitleStyle - Font-Bold |
True |
|
|
|
TitleStyle - ForeColor |
# FFFFC0 |
|
|
|
|
|
|
|
8.Now drag a Label control onto the page and style it with a bit of color and font styling. The following code creates two labels and defines styles that should match with your blue and red themes:
155
Chapter 5
<asp:Label ID=”Label1” runat=”server” Text=”Label” Font-Names=”century gothic” Font-Size=”10pt” ForeColor=”MidnightBlue”></asp:Label>
<asp:Label ID=”Label2” runat=”server” Font-Names=”garamond” Font-Size=”11pt” ForeColor=”DarkRed” Text=”Label”></asp:Label>
Once you have finished defining styles, you are ready for the next phase.
9.Open up 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 and remove the ID tags for each of them.
10.Finally, add a SkinID attribute to the Label control to give it a unique style reference that you can use later (see the bold text in the following listing):
<asp:Calendar runat=”server” Font-Names=”Century Gothic” Font-Size=”Small”> <OtherMonthDayStyle BackColor=”Lavender” />
<DayStyle ForeColor=”MidnightBlue” /> <TitleStyle BackColor=”LightSteelBlue” />
</asp:Calendar>
<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Century Gothic” Font-Size=”10pt” ForeColor=”MidnightBlue”></asp:Label>
11.Repeat Steps 7 and 8 for the red controls, placing them in the RedBits.skin definition file:
<asp:Calendar runat=”server” Font-Names=”Garamond” Font-Size=”Medium” BorderColor=”Chocolate” BorderStyle=”Ridge” BorderWidth=”8px” DayNameFormat=”FirstLetter”>
<OtherMonthDayStyle BackColor=”BlanchedAlmond” /> <DayStyle ForeColor=”Maroon” />
<TitleStyle BackColor=”Maroon” Font-Bold=”True” ForeColor=”#FFFFC0” /> </asp:Calendar>
<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Garamond” Font-Size=”11pt” ForeColor=”DarkRed” />
It’s simply a case of repeating the process for any other controls you might want to add to your skin file. In the next Try It Out, you’ll be adding a Calendar control and a Label control to pages and seeing how these themes change their appearance. Additionally, you’ll also
add a TreeView control and an ImageButton control, so you will need to have some more information in your skin file to render these.
12.Add the following code to the blue skin (BlueBits.skin) file to specify styling for the
TreeView and ImageButton controls:
<asp:TreeView runat=”server” ExpandDepth=”1” Font-Names=”Century Gothic” BorderColor=”LightSteelBlue” BorderStyle=”Solid” >
<SelectedNodeStyle Font-Bold=”True” ForeColor=”SteelBlue” /> <RootNodeStyle Font-Bold=”True” />
<NodeStyle ForeColor=”MidnightBlue” />
<LeafNodeStyle Font-Size=”Smaller” /> <HoverNodeStyle ForeColor=”SteelBlue” />
</asp:TreeView>
<asp:ImageButton SkinId=”homeImage” runat=”server” ImageUrl=”~/platypus.gif” />
156
Styling with Themes
13.Now you need to add similar code to the red skin (RedBits.skin) file to specify how to style a
TreeView control:
<asp:TreeView runat=”server” ExpandDepth=”1” Font-Names=”Garamond” BorderColor=”Chocolate” BorderStyle=”Ridge”>
<SelectedNodeStyle Font-Bold=”True” ForeColor=”Chocolate” /> <RootNodeStyle Font-Bold=”True” />
<NodeStyle ForeColor=”DarkRed” />
<LeafNodeStyle Font-Size=”Smaller” /> <HoverNodeStyle ForeColor=”Chocolate” />
</asp:TreeView>
<asp:ImageButton SkinId=”homeImage” runat=”server” ImageUrl=”~/platypus.gif” />
That’s all there is to it as far as creating a theme is concerned — you should now have two themes available to your Chapter05 pages: blue and red.
How It Works
The presence of a .skin file within an App_Themes in your web application is all that’s needed to make the themes within the folder available to your application. If you are hosting your web sites on a web server running IIS, you can alternatively place your themes within your <drive>:\Inetpub\wwwroot\ aspnet_client\<version> folder, which makes them available to all of the applications hosted on your server.
You can create more than one .skin file for each theme you work on. All you need to do is create another
.skin file within the theme’s directory and create more control definitions within this file. This may help you to split up your .skin file definitions into smaller pieces. For example, if you created a site that had two different fonts in use on it (for example, one for text and one for code snippets), you could have styles defined in two .skin files, one containing the body text styles and one containing code snippet styles.
You can also include CSS style sheets in themes and use styles generated by your friendly designer on your web site. You’ll see how this works later on. First, you need to have a go at putting these red and blue themes into action!
The .skin files that formed the themes in the previous example define some standard control styles that can be applied to any instance of a Calendar control on a page, or any instance of a Label control with the appropriate SkinID on a page. In this Try It Out, you apply these themes to some simple pages in a site. Note that the entire code for this chapter is available to download from www.wrox.com.
Try It Out |
Applying Themes to Pages |
1.Start by creating a master page for the site. This is going to be a very small and simple site, but having a master page will help you to navigate consistently around the site. Call the master page ThemedMaster.master. Into the master page, add a TreeView control on the left-hand side of the page, and place the ContentPlaceholder to the right by using the following HTML. Notice the style attributes on the two bold <div> elements that will help to lay out the contents of the page in two columns:
157
Chapter 5
<body>
<form id=”form1” runat=”server”>
<div style=”float:left;padding-right:15px”>
<asp:TreeView ID=”TreeView1” runat=”server”>
</asp:TreeView>
</div>
<div style=”float:left”>
<asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”> </asp:contentplaceholder>
</div>
</form>
</body>
2.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 Chapter05 folder and select Add New Item. Add a web.sitemap with the following code:
<?xml version=”1.0” encoding=”utf-8” ?>
<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0” > <siteMapNode url=”ThemeDefault.aspx” title=”Default” description=”Default Page”>
<siteMapNode url=”ThemePage1.aspx” title=”Page1” description=”Themed Page 1” /> <siteMapNode url=”ThemePage2.aspx” title=”Page2” description=”Themed Page 2” /> <siteMapNode url=”Default.aspx” title=”SubPage” description=”Sub Page”>
<siteMapNode url=”StyledPage1.aspx” title=”Page1” description=”Page 1” /> <siteMapNode url=”StyledPage2.aspx” title=”Page2” description=”Page 2” />
</siteMapNode>
</siteMapNode>
</siteMap>
3.Now add a SitemapDataSource to the master page and set the DataSource for the TreeView control — just like you did in Chapter 3. You should now have the following code:
<body>
<form id=”form1” runat=”server”>
<div style=”float:left;padding-right:15px”>
<asp:TreeView ID=”TreeView1” runat=”server” DataSourceID=”SiteMapDataSource1”> </asp:TreeView>
<asp:SiteMapDataSource ID=”SiteMapDataSource1” runat=”server” /> </div>
<div style=”float:left”>
<asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”> </asp:contentplaceholder>
</div>
</form>
</body>
Figure 5-16 shows what you should see in Design View.
158