Beginning ASP.NET 2.0 With CSharp (2006) [eng]

Chapter 5

Figure 5-19

11.Click through to Page 1 to see the Calendar control, shown in Figure 5-20.

Figure 5-20

Page 2 (see Figure 5-21) includes the ImageButton control, and will use the red theme.

158

Styling with Themes

Figure 5-21

12.Change the Theme attribute on Page 1 to use the red theme. Save the page and view it again. It should look like Figure 5-22.

Figure 5-22

How It Works

In this example, the themes built in the previous Try It Out example have been applied to a simple collection of pages. Master pages were first discussed in Chapter 2, and in this chapter you’ve seen that when you have a page that uses a Master page, the entire rendered page is treated as a single entity.

159

Chapter 5

Remember how you set the ThemeDefault.aspx page to use the blue theme, but you didn’t specify any Theme property on the Master page? The truth is that you can’t actually specify a theme directly on a Master page in any case. Your pages in this example showed how changing the Theme property on each page styled the entire page (including the TreeView control added to the Master page) with the same consistent look and feel. That style can easily be switched on different pages, as you saw with Page 1 in this Try It Out.

The main pieces of code that you need to be aware of are the Theme property in the Page directive and the SkinID attribute on server controls. Adding just these two pieces of information to a page resulted in the finished pages. Take ThemePage2.aspx as an example:

<%@ Page Language=”C#” MasterPageFile=”~/ThemedMaster.master” Title=”Untitled Page”

Theme=”Red” %>

<asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”>

Page 2<br />

<asp:ImageButton ID=”ImageButton1” SkinID=”homeImage” runat=”server” PostBackUrl=”ThemeDefault.aspx” />

</asp:Content>

The Theme attribute at the top of the page specifies which theme should be applied to the entire page, including the contents of the Master page that it’s connected to. The SkinID property specifies which skin of an ImageButton control to apply to the ImageButton on the page, so if you had many different ImageButton control styles defined in your skin file, this attribute would specify which one to use on your page.

In the preceding example, you used the Theme attribute specified at the top of each page to indicate which theme to use to style a page. There is another attribute that you can use to style the elements on a page: the StyleSheetTheme attribute. Both the Theme attribute and the StyleSheetTheme attribute take the name of the theme to apply as the value, and both are used to style pages using themes, but the attribute you choose to use can result in slightly differently rendered pages. Here’s why.

Customization Themes — You Have Control!

The pages in the previous example used the Theme attribute, which means that you have just used Customization themes to style each of the pages in the example. A Customization theme has total control over the styling of elements on a page. If you manually style elements on a page controlled by a Customization theme, those styles will only be applied if the elements to which they are added are not already styled by the theme.

Stylesheet Themes — CSS for Server Controls

If you’d prefer to use your themes like a style sheet, you can easily choose to do so by using the StyleSheetTheme attribute at the top of a page. This change in attribute means that you can still give developers the freedom to add some small amounts of styling to controls using style attributes on each tag, while providing a common look and feel for a site in the theme itself.

The best way to see the differences between Stylesheet themes and Customization themes is to have a play, so in this Try It Out you modify the previous example to see the differences.

160

Styling with Themes

Try It Out

Customization and Stylesheet Themes

1.Open ThemeDefault.aspx and add Font-Bold=”true” to the code for the Styled label. Alternatively, switch to Design View, select the Styled label, select the Font node from the Properties tab, and specify that the font should be bold:

<asp:Label ID=”Label1” SkinID=”textLabel” runat=”server”

Text=”Styled label” Font-Bold=”True”></asp:Label>

2.Run the page and you’ll see a bold label, as depicted in Figure 5-23.

Figure 5-23

3.Edit the label declared with the SkinId=”textLabel” in the BlueBits.skin file and add the following bolded declaration:

<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Century Gothic”

Font-Size=”10pt” ForeColor=”MidnightBlue” Font-Bold=”False”></asp:Label>

4.Run the page again and the label will no longer be bold, as shown in Figure 5-24.

Figure 5-24

161

Chapter 5

5.Change the Theme attribute at the top of the ThemeDefault.aspx page to read StyleSheetTheme instead of Theme. Alternatively, in Design View, edit the properties for the page and specify that the page’s StyleSheetTheme should be Blue, and delete the Theme property. Run the page again and you’ll see that the label is now bold once more.

How It Works

The first step in this exercise was to add a Font-Bold=”True” attribute to the label. Because the bold attribute hadn’t been specified in the Customization theme, the style in the page was applied successfully and the control was rendered with bold blue text.

However, adding a Font-Bold=”False” to the skin’s textLabel control overrides the style in the page because the page is still using the Customization theme (the Theme attribute at the top of the page). As a result, the second time you ran the page, you saw that the page now has a non-bold blue label.

The last step was to change to using a StyleSheetTheme instead of a Theme attribute at the top of the page. This enabled the page’s styles to once more take priority, and so the bold blue label returned the third time the page was run.

Using a Stylesheet theme or a Customization theme is completely up to you. Choosing a Customization theme gives your designer a bit more control over the look and feel of a site, whereas the Stylesheet theme lets you play with control rendering yourself. Bear in mind, though, that if you start adding your own style attributes to controls, you may find that your site appears somewhat strange if you ever decide to change the contents of the theme, or switch to a completely different theme.

Using Both Stylesheet Themes and Customization Themes

No rules in ASP.NET specify that you can only use a Stylesheet theme or a Customization theme in your pages. If you want to have two levels of styling available to your pages, some mandatory and some optional, you can use both types of theme on your site.

For example, you may specify that major page elements must stay consistent from page to page. The <body> tag of a page must always be in a certain font, and the Menu control must always contain a certain style of node, but you may want to only use styling on Label controls as a guideline or default style. You can therefore create one theme that defines rules for main page elements and Menu controls and specify that theme to be used as the Customization theme. You can then create a different theme with some other style information in it that you can apply to a site as you create it and override certain element styles, and then apply the second theme as a Stylesheet theme. The following is the order of application when it comes to styling:

1.

2.

3.

4.

Stylesheet theme

CSS styles

Element styles

Customization theme

Styles specified in a Customization theme will always override all other settings.

162

Styling with Themes

Themes and CSS Together

CSS is a great way to style a site, so it’s great that there’s a really simple way to integrate style sheets in your themes. All you need to do is add a style sheet file to the theme’s directory and slot it in right next to your skin files. Your non-ASP.NET designer will certainly be pleased that you can easily integrate his designs in your server-side pages.

Because this isn’t a tough concept, you can jump straight in with a quick example that shows how this works.

Try It Out

Integrating CSS and Themes

1.Return to VWD, right-click the Blue theme folder, and select Add New Item. In the dialog box that pops up, add a new style sheet and call it BlueStyleSheet.css.

2.In the newly created style sheet, add the following code:

body

{

font-family:Arial;

}

.bigtext

{

font-size:xx-large;

}

3.Return to ThemeDefault.aspx and add a CssClass attribute to the unstyled label, with a value of “bigtext”:

<asp:Label ID=”Label2” CssClass=”bigtext” runat=”server” Text=”Unstyled label”>

</asp:Label>

4.Run the page and you’ll see that the label has xx-large text style applied (see the CSS style sheet definition), and the default font for the page (everything within the <body> tag) is formatted using Arial as the font face, as shown in Figure 5-25.

Figure 5-25

163

Chapter 5

5.Go to the BlueBits.skin file and add another Label control definition. Set its SkinID to “bigLabel”, give it a CssClass attribute of “bigtext”, and save the file:

<asp:Label SkinId=”bigLabel” runat=”server” CssClass=”bigtext”></asp:Label>

6.In ThemeDefault.aspx, remove the CssClass attribute from the label and set its SkinID attribute to “bigLabel”:

<asp:Label ID=”Label2” SkinID=”bigLabel” runat=”server” Text=”Unstyled label”>

</asp:Label>

Notice that the IntelliSense in VWD kicks in here and helps out by giving you the option of specifying which label style to use (see Figure 5-26), because you now have more than one available in your selected theme.

Figure 5-26

Note that you will get the IntelliSense support here only if you have saved the skin file before going back into the ThemeDefault.aspx page.

Running the page again will render the same result. The only differences are whether the skin file or the page contains the styling information.

How It Works

By adding a CSS style sheet to a theme folder, that style sheet is now available to all pages that use that theme. After the theme has been applied, whether it’s a Customization theme or a Stylesheet theme, the styles in the style sheet are available both to the skin files within the theme’s folder, and within the page itself.

The same rules apply to CSS-styled server controls from a Customization versus Stylesheet theme perspective — if you apply a CSS style to an element in a theme and apply a different style to an element on a page, the result will vary according to which type of theme you have applied. If you apply a Customization theme, the theme defined in the skin file will overrule any styles or CSS classes specified in the .aspx page, whereas the opposite is true if you specify that your theme be used as a Stylesheet theme.

164

Styling with Themes

Applying Styling to a Site

In most situations, you will likely want to apply a consistent look and feel to all pages within a site. Although you could just specify that all of your pages in the site use the same theme, it’s quicker and easier to specify the default theme for the site in a central location. In ASP.NET 2.0, you can add a value to the Web.config file for your site to specify the default theme for your pages. You used the Web.config file in Chapter 4 when you specified site access permissions for different user accounts. Because a Web.config file is the central location for all site-wide settings, this is where you can store default theme settings for your site. The basic syntax for this is as follows:

<?xml version=”1.0”?> <configuration>

<appSettings/>

<connectionStrings/>

<system.web>

<pages theme=”myTheme” styleSheetTheme=”myOtherTheme” />

You can specify both a Stylesheet theme and a Customization theme in the Web.config file. If a theme is specified in the Web.config file and no theme is specified in a page, the theme in the Web.config will be applied. Additionally, if your Web.config specifies a Customization theme for a site and you specify a Stylesheet theme for your page, the Customization theme from the Web.config will be applied. Here’s a slightly amended order of application for themes, including the Web.config themes:

1.

2.

3.

4.

5.

6.

Web.config Stylesheet theme

Page Stylesheet theme

CSS styles

Element styles

Web.config Customization theme

Page Customization theme

If you want to completely control the appearance of an entire site, use a

Customization theme in the Web.config file.

In the next Try It Out, you quickly specify a site-wide theme for the pages in the small application you’ve been building in this chapter so far.

Try It Out

Applying Themes to a Site

1.If you don’t have a Web.config file in your project, right-click the Chapter05 folder and select Add New Item. In the dialog box, create a new Web configuration file (Web.config) and click OK.

2.Add the following line of code (highlighted in bold) to the Web.config file and save the file:

<?xml version=”1.0”?> <!--

Note: As an alternative to hand editing this file you can use the

165

Chapter 5

web admin tool to configure settings for your application. Use the Website->Asp.Net Configuration option in Visual Studio.

A full list of settings and comments can be found in machine.config.comments usually located in \Windows\Microsoft.Net\Framework\v2.x\Config

--> <configuration>

<appSettings/>

<connectionStrings/>

<system.web>

<pages theme=”red” styleSheetTheme=”blue” />

3.Remove all Theme and StyleSheetTheme attributes from all of the pages used in this chapter and run the application. All of the pages in the site will now be rendered in the red theme, but note in Figure 5-27 the result in the ThemeDefault page.

Figure 5-27

How It Works

The resulting output in the ThemeDefault.aspx page seems to be a bit of a mixture of two different themes, yet you specified that all pages in a site should use the red Customization theme. However, in the previous example, you added a CSS file and some additional style information to the blue theme. Because the blue theme is set as a Stylesheet theme for the site, and because there are no equivalents for these styles in the red theme, these styles are picked up from the blue theme and applied to the body text and the “Unstyled label” label control.

The first line of HTML code is part of the body of the page:

Default page!<br />

This is styled using the blue theme’s body style from the BlueStyleSheet.css file:

body

{

font-family:Arial;

}

166

Styling with Themes

The next item in the code for this page is the “Styled label” control, which has a SkinID of textLabel:

<asp:Label ID=”Label1” SkinID=”textLabel” runat=”server” Text=”Styled label” Font-Bold=”True”></asp:Label>

Because this SkinID exists in both themes, the red theme is applied, because this theme is set to be the Customization theme in the Web.config file:

<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Garamond” Font-Size=”11pt” ForeColor=”DarkRed” />

Here’s the line of code in the Web.config again:

<pages theme=”red” styleSheetTheme=”blue” />

Remember that the theme attribute represents the Customization theme. However, the specified Customization theme in this case, the red theme, has no SkinID for a “bigLabel”, so the blue theme is used instead:

<asp:Label ID=”Label2” SkinID=”bigLabel” runat=”server” Text=”Unstyled label”></asp:Label>

The last item on the page is styled according to the blue theme:

<asp:Label SkinId=”bigLabel” runat=”server” CssClass=”bigtext”></asp:Label>

The Label control is still part of the body of the page, and because no additional font information has been specified for the control, it also inherits the CSS style for the body of the page from the blue theme.

The final example in this chapter concerns themes used in the Wrox United application. The following section takes a quick look at the themes and styling in the application.

Themes in Wrox United

The themes defined for the Wrox United site control the appearance of the team’s site. Two themes are available for the site: a red theme and a blue theme. The normal, everyday theme is the red theme, and it reflects the team’s home outfit in blocks of bold red and yellow. The other theme available to contrast with the red theme is the blue theme, which is designed mainly to show up the differences between two different themes being applied to a site. Figure 5-28 shows the site in its traditional Wrox Red colors.

The way that themes are applied in Wrox United is slightly different from the techniques that you’ve looked at in this chapter, because it relates to user preferences. As you saw in Chapter 4, you can add user accounts to a web site to enable users to log in to a site. When a user is logged on to the Wrox United site, there is some code that enables that user to store personal information (the user’s name, address, and so on), and to store personal preferences, such as the theme to apply to the site when the user logs on.

167