Personalization

Themes and Skins

When a developer builds a Web application, it generally has a similar look and feel across all its pages. Sometimes it may be requirements of the client to make an impressive identity in the market by maintaining a consistent look across the web pages. It may also possible to make comfortable for a developer to use similar background, fonts, color designs for reducing his work by using code reusability. As per experiences, there are very little applications designed with each page dramatically different from the next. Commonly, for your applications you use similar fonts, colors, and server control styles across all the pages.

By keeping these things in mind, ASP.NET 2.0 introduces new feature called Themes and Skins which let us to centrally define common style definitions to achieve the consistency without having to manage your own CSS files

This new technique gives developer more fine control over the way the style properties are applied. You can define style definitions starting from individual control on a page to whole set of applications running on the server. To make things simple, Themes and Skins are extensions of Cascading Style Sheet (CSS) technique.

Basically a Theme is a collection of skins. A skin describes how a control will look. A skin file has the file name extension .skin and contains property settings for individual controls. A skin can define stylesheet attributes, images, color, and much more. You create .skin files in the Theme folder.

You can define skins in a separate file for each control or define all the skins for a theme in a single file. There are two types of control skins, default skins and named skins:

Default Skin

When a theme is applied to a page, the default skin automatically applies to all controls of the same type. A control skin is a default skin if it does not have a SkinID attribute. For example, if you create a default skin for button then default button control skin will be applied for all the buttons on the page, but not to LinkButton controls or to controls that derive from the Button objects. The scope of default skin depends on where you define default skin.

Named Skin

You can only set one default control-skin in a theme per control type. A named skin is a control skin with a SkinID property set. It does not automatically apply to controls by type. Instead, you explicitly apply a named skin to a control by setting the control's SkinID property. Creating named skins allows you to set different skins for different instances of the same control in an application. Named Skins do not apply for the controls by type. On the basis of scope limitation for a theme, the themes can be of two types.

Defining Themes for Page

The Page Themes define themes for a page or for entire application. By using Theme attribute of @Page directive, you can apply themes for single page as given below.

<%@ Page Language="C#" AutoEventWireup="true" Theme="MyTheme" CodeFile="Default.aspx.cs" Inherits="_Default" %>

We can define themes which apply for entire application by setting element in application configuration file as shown below.

<configuration> <appSettings/> <connectionStrings/> <system.web> <compilation debug="false" /> <authentication mode="Windows" /> <pages theme ="MyTheme" /> </system.web> </configuration>

Defining Themes for Entire Sites

You can define themes to all websites on a server, such themes are global themes. They are much alike to Page themes except that their scope is set at server level. You can define property settings, style settings and much more in a global theme. Any Web site on the server, and any page in any Web site, can reference a global theme.

Applying a theme to all applications on a server

We need to add <pages> element with Theme attribute in Machine.config file which defines global theme for whole server. You can specify the theme that you want to use within the machine.config file. Sample code is given below.

<pages buffer="true" enableSessionState="true" enableViewState="true" enableViewStateMac="true" autoEventWireup="true" validateRequest="true" enablePersonalization="false" theme="MyTheme" >... </pages>

It is important to note that the machine.config file is located at the path 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.

Create a webpage with simple server controls including textbox, button and a calendar control. When you run the page in the browser, you can observe all controls are displayed with default settings with no Themes applied.

Once you specify the theme in the web.config file, you don't need to define the theme again in Page directive of your ASP.NET pages. This theme is applied apparently to each and every page within application.

Using EnableTheming property

In ASP.NET, it is possible to enable or disable applying themes to individual control on the page using EnableTheming property. When set, any defined themes will apply style definition for the control. When not set, control will be excluded from theme definition. Suppose we want to redefine the text box control properties in web page other than one already defined in theme. You can observe in below listing where we redefined Textbox control backcolor and forecolor and set EnableTheming to false. So this new settings will override style definitions in skin file as theme is applied to every control on the page except the textbox because we set EnableTheming property to false.

Sample Code:

<asp:TextBox ID="TextBox1" BackColor="ButtonShadow" ForeColor="white" EnableTheming="false" runat="server"></asp:TextBox>

<asp:button runat="server" BackColor="lightblue" ForeColor="Black" Font-Bold ="true" ForeColor="black"/>

Similarly, you can disable applying theme at page level by setting EnableTheming attribute to false in @page directive. This setting sets the theme to nothing and no skin files are applied to page.

<%@ Page Language="C#" EnableTheming="false" Theme=" MyTheme" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Even if we disable themes at page level, you can still enable theme for specific controls on this page by setting the Enabletheming property for the control to true and applying a specific theme at the same time as shown below.

<asp:TextBox ID="TextBox1" EnableTheming="true" Theme=" MyTheme" runat="server"></asp:TextBox>

You can observe from below output even though we disabled theme for entire page still we are able to apply Theme to textbox control by setting EnableTheming and Theme properties for the textbox as shown above

Using StyleSheetTheme Attribute

You can also use StyleSheetTheme attribute that you can use to apply themes to page but the big difference you may ask between the Theme attribute and StyleSheetTheme attribute. The difference is that the when attributes are set locally on the page within a particular control, the attributes are overridden by the theme if you use the Theme attribute. They are preserved however, if you apply the page's theme using the StylesheetTheme attribute. So, local settings take precedence over theme settings when settings are defined in both places if we set StyleSheetTheme attribute.

Sample Code: <%@ Page Language="C#" EnableTheming ="true" StylesheetTheme =" MyTheme" CodeFile="Themes.aspx.cs" Inherits="Themes" %> <asp:TextBox ID="TextBox1" BackColor="chocolate" ForeColor="white" runat="server"></asp:TextBox> <asp:TextBox BackColor="Blue" ForeColor="Black" BorderColor="black" BorderStyle="Solid" runat="server"/>

In above example, the textbox BackColor theme setting is overridden by textbox local BackColor setting of chocolate color. This is because we have set StyleSheetTheme attribute in page directive. Remaining settings which doesn't have corresponding local settings set will be applied from theme as usual.

Using CSS (Cascade Style Sheet) files in themes

It may be observed by you while using a .skin file that you could define only the styles associated with server controls. But we tend to use quite a bit more than server controls like HTML server controls, raw HTML. To apply themes to this kind of controls we can include CSS files with in your themes folder. To create CSS file for your themes, right-click the MyTheme theme folder and Select Add New Item. In the list of options, select the style Sheet option to create CSS file.

Sample Code: body { font-size:x-small; font-family: Arial; color:AiceBlue; }

In CSS files, the order of 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. When you run the .aspx page with the 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 written in the .css file.

Accessing Themes Programmatically

Many times you may want to programmatically set the theme for an ASP.NET page depending on certain parameters. In ASP.NET 2.0, you can also work with themes programmatically.

protected void Page_PreInit(object sender, System.EventArgs e) { Page.Theme = Request.QueryString["MyTheme"]; }

It is very important to note that you must set the Theme property of the page property in or before the page_PreInit event for any static controls that are on the page.

Creating and Applying Custom Themes

It is very easy to create custom themes in ASP.NET. All you need to do is create a special folder named Themes and place all your skins under that folder. After placing the required .skin files under the Themes folder, they automatically become available to all the pages in the Web site.

Creating a skin

A skin is a definition of styles applied to server controls in your ASP.NET page. Skins can work in conjunction with CSS files or images. To create a theme to use in your ASP.NET applications, you use just a single skin file in the theme folder. The skin file can have any name, but it must have a .skin file extension.

Even though you have four theme folders in your application, concentrate on the creation of the Summer theme for the purposes of this chapter. Within the Summer folder in your project, create a text file called Summer.skin. If you try to right-click the Summer theme folder and select Add New Item, notice that a skin file isn't listed among the options. Therefore, select the Text File option and name the file Summer.skin. Then create a skin file as shown in sample code below.

The MySkin.skin file <asp:Label Runat="server" ForeColor="#004000" Font--Names="Verdana" Font-Size="X-Small" /> <asp:Textbox Runat="server" ForeColor="#004000" Font--Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px" BorderColor="#004000" Font--Bold="True" />

Applying Custom Themes

<%@Page Language="C#" Theme="Summer? %> <script runat="server "> void Button1_Click(object sender,System.EventArgs e) { Label1.Text ="Hello" +TextBox1.Text.ToString (); } </script>

Differences between Themes and CSS

• You cannot apply CSS to certain ASP.NET specific server controls which are not present in HTML. As CSS usually compatible with HTML code. • You can apply Themes and skins to all ASP.NET controls with less effort. Themes and skins can be uniformly applied on both windows and asp.net applications. • Themes can include graphics, but it not possible in case style sheets. • You can apply only one theme to each page while multiple style sheets can be applied to each page. • Themes don't override or cascade style definitions by default the way CSS generally do. But you can selectively override local property settings for a control using StyleSheetTime attribute in Themes. • You can include CSS files in Themes which is applied as part of Theme structure but not vice-versa.

Security concerns in using themes

Themes can cause security issues when they are used on your Web site. Malicious themes can be used to:

• Modify a control's behavior so that it does not perform as expected. • Inject client-side script, therefore posing a cross-site scripting risk. • Modify validation. • Expose sensitive information.

To manage these common threats:

• Guard the global and application theme directories with suitable access control settings. Only trusted users should be allowed to write files to the theme directories. • Use themes from safe source. Always inspect any themes from outside your organization for malicious code before using them on you Web site. • Do not render the theme name in query data. Cruel users could use this information to use themes that are unknown to the developer and thereby expose sensitive information.