Go to page:
1 2 3 4 5 6 Next
Reprinted with permission from www.wrox.com
Themes and Skins
(continued)When you build a Web application, it usually has a similar look and feel across all its pages. Not too many applications are designed with each page dramatically different from the next. Generally, for your applications you use similar fonts, colors, and server control styles across all the pages.
You can apply these common styles individually to each and every server control or object on each page, or you can use a new capability provided by ASP.NET 2.0 to centrally specify these styles. All pages or parts of pages in the application can then access them.
Themes are the text-based style definitions in ASP.NET 2.0 that are the focus of this chapter.
Using ASP.NET 2.0 Packaged Themes
Themes are similar to Cascading Style Sheets (CSS) in that they enable you to define visual styles for your Web pages. Themes go further than CSS, however, in that they allow you to apply styles, graphics, and even CSS files themselves to the pages of your applications. You can apply ASP.NET themes at the application, page, or server control level.
To make life easy for the developer, ASP.NET comes with free prepackaged themes that you can use for your pages or applications. You find these themes located at C:\WINDOWS \Microsoft .NET \Framework \v2.0.xxxxx \ASP.NETClientFiles \Themes. The available themes that come with ASP.NET 2.0 include
Applying a theme to a single ASP.NET page
In order to see how to use one of these themes, create a basic page, which includes text, a text box, a button, and a calendar. This is shown in Listing 7-1.
Listing 7-1: An ASP.NET page that does not use themes
<%@Page Language="VB" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>INETA</title>
</head>
<body>
<form id="form1" runat="server">
<h1>International .NET Association (INETA)</h1><br />
<asp:Textbox ID="TextBox1" Runat="server" /><br />
<br />
<asp:Calendar ID="Calendar1" Runat="server" /><br />
<asp:Button ID="Button1" Runat="server" Text="Button" />
</form>
</body>
</html>
This simple page shows some default server controls that appear just as you would expect, but that you can change with one of the ASP.NET built-in themes. When the page is called in the browser, it should look like Figure 7-1.
(Full Size Image)
Figure 7-1
To instantly change the appearance of this page without changing the style of each server control on the page, you simply apply one of the ASP.NET default themes from within the Page directive:
<%@Page Language="VB" Theme="SmokeAndGlass" %>
Adding the Theme attribute to the Page directive changes the appearance of everything on the page that is defined in the SmokeAndGlass theme file provided with ASP.NET 2.0. When you invoke the page in the browser, you see the result shown in Figure 7-2.
(Full Size Image)
Figure 7-2
Applying a theme to an entire application
In addition to applying an ASP.NET 2.0 predefined theme to your ASP.NET pages using the Theme attribute within the Page directive, you can also apply it at an application level from the web.config file. This is illustrated in Listing 7-2.
Listing 7-2: Applying a theme application-wide from the web.config file
<?xml version="1.0" encoding="UTF-8" ??>
<configuration>
<system.web>
<pages theme="SmokeAndGlass" />
</system.web>
</configuration>
If you specify the theme in the web.config file, you don't need to define the theme again in the Page directive of your ASP.NET pages. This theme is applied automatically to each and every page within your application.
Applying a theme to all applications on a server
If you want to take it even one level higher, you can specify the theme that you want to use within the machine.config file. This is illustrated in Listing 7-3.
Listing 7-3: Specifying the theme in the machine.config file
<pages buffer="true" enableSessionState="true"
enableViewState="true" enableViewStateMac="true"
autoEventWireup="true" validateRequest="true"
enablePersonalization="false" theme="SmokeAndGlass" >...
</pages>
The machine.config file is located at C:\WINDOWS\Microsoft.NET\Framework\v2.0.xxxxx\CONFIG. The pages node is about one-third of the way through the file. Adding the Theme attribute to the pages node within the machine.config file causes every Web application on that server to use the specified theme. This is a great solution if the server has multiple applications that should all be using the same theme.
If you set a theme in the machine.config file, you are not in any way required to use this theme for all the applications on the server. To override the theme setting placed in the machine.config file, you just specify another theme in the application's web.config file or in the Web page's Page directive. Remember settings that are set in the web.config file override settings that are in the machine.config file. Settings that are placed in the Page directive override both settings in the machine.config and in the web.config files.
Removing themes from server controls
Whether themes are set on a server, at the application level, or on a page, at times you want an alternative to the theme that has been defined. For example, change the text box server control that you have been working with (from Listing 7-1) by making its background black and using white text:
<asp:Textbox ID="TextBox1" Runat="server"
BackColor="#000000" ForeColor="#ffffff" />
The black background color and the color of the text in the text box are specified directly in the control itself with the use of the BackColor and ForeColor attributes. If you have applied a theme to the page where this text box control is located, however, you won't see this black background or white text because these changes are overridden by the theme itself.
To apply a theme to your ASP.NET page but not to this text box control, you simply use the EnableTheming property of the text box server control:
<asp:Textbox ID="TextBox1" Runat="server"
BackColor="#000000" ForeColor="#ffffff" EnableTheming="false" />
If you apply this control to the text box server control from Listing 7-1 with the SmokeAndGlass theme applied to the entire page, the theme is applied to every control on the page except the text box. This result is shown in Figure 7-3.
(Full Size Image)
Figure 7-3
If you want to turn off theming for multiple controls within a page, consider using the Panel control to encapsulate a collection of controls and then set the EnableTheming attribute of the Panel control to False. This disables theming for each control contained within the Panel control.
About the Author
Bill Evjen is an active proponent of .NET technologies and community-based learning initiatives for .NET. He has been actively involved with .NET since the first bits were released in 2000. In the same year, Bill founded the St. Louis .NET User Group (http://www.stlnet.org), one of the world's first .NET user groups. Bill is also the founder and executive director of the International .NET Association (http://www.ineta.org), which represents more than 200,000 members worldwide.
Based in St. Louis, Missouri, USA, Bill is an acclaimed author and speaker on ASP.NET and XML Web services. He has written or coauthored Professional C#, 3rd Edition and Professional VB.NET, 3rd Edition (Wrox), XML Web Services for ASP.NET, Web Services Enhancements: Understanding the WSE for Enterprise Applications, Visual Basic .NET Bible, and ASP.NET Professional Secrets (all published by Wiley). In addition to writing, Bill is a speaker at numerous conferences including DevConnections, VSLive, and TechEd.
Bill is a Technical Director for Reuters, the international news and financial services company, and he travels the world speaking to major financial institutions about the future of the IT industry. He graduated from Western Washington University in Bellingham, Washington, with a Russian language degree. When he isn't tinkering on the computer, he can usually be found at his summer house in Toivakka, Finland. You can reach Bill at evjen@yahoo.com. He presently keeps his weblog at http://www.geekswithblogs.net/evjen.
Go to page:
1 2 3 4 5 6 Next
All
IE 7
Firefox 2.0
