Next


Themes

• As you know in the previous concept, the CSS styles are used to apply common design styles. But the limitation of CSS is, CSS styles are always executed at client level.
• The CSS styles can’t be applied at sever level. So that, using CSS, you can set the general properties like font styles, colors, cursors, borders etc., but you can’t set the special properties related to the server controls.
• For example, you can’t set the “TextMode” property of a textbox using CSS. In the same way, you can set the “NavigateUrl” property of a hyperlink using CSS.
• In this case, to replace the usage of “CSS styles”, the “Themes” are introduced.
• The advantage of themes is, those can set the any property of the server controls. For example, you can do the above two examples using “Themes”.
• The themes can be implemented in a “skin file” (with .skin extension), and placed in the “App_Themes” folder.
• When you create a theme, it’s skin file is placed in the “App_Themes” folder.
• Note: The themes are completely dynamic. It’s effect would not be displayed in the “Design” view.

Implementation of Themes:

• First, add a skin file by clicking on “Web Site” menu – “Add New Item” – “Skin File”.
• Enter the name of the theme. Ex: MyTheme.skin
• Click on “Add”.
• It asks for confirmation, to create “App_Themes” folder. Click on “Yes”.
• Then the skin file will be created as follows:
Theme
• In the skin file, you can write the tags for server controls like etc., along with few properties. The tag should contain runat=server attribute.
Ex: <asp:Label runat=”server” BackColor=”Pink” />
• To impose the theme in the required .aspx page, simply write the Theme=”theme name” attribute the <%@ Page> directive.
Note: If the properties between the control and the theme, the theme properties will be applied at run time.
Note: To disable the themes for a specific tag instance, simply use EnableTheming=”false” attribute for the required tag.

ThemeExample

MyTheme.skin
<asp:TextBox runat="server" Font-Name="Comic Sans MS" Font-Size="20px" BackColor="Green" ForeColor="Yellow" />
<asp:ListBox runat="server" SelectionMode="Multiple" Font-Name="Tahoma" BackColor="LightYellow" />>


Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="MyTheme" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div style="text-align: center"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /><br /> <asp:TextBox ID="TextBox2" runat="server" EnableTheming="False"></asp:TextBox><br /><br /> <asp:ListBox ID="ListBox1" runat="server"> <asp:ListItem>First item</asp:ListItem> <asp:ListItem>Second item</asp:ListItem> <asp:ListItem>Third item</asp:ListItem> <asp:ListItem>Fourth item</asp:ListItem> <asp:ListItem>Fifth item</asp:ListItem> </asp:ListBox><br /><br /> <asp:ListBox ID="ListBox2" runat="server" EnableTheming="False"> <asp:ListItem>First item</asp:ListItem> <asp:ListItem>Second item</asp:ListItem> <asp:ListItem>Third item</asp:ListItem> <asp:ListItem>Fourth item</asp:ListItem> <asp:ListItem>Fifth item</asp:ListItem> </asp:ListBox> </div> </form> </body> </html>