Click here to Skip to main content
Click here to Skip to main content

Themes and Skins in ASP.NET 2.0

, 5 Oct 2005
Rate this:
Please Sign up or sign in to vote.
Introduction to themes and skins in ASP.NET 2.0.

Introduction

Themes in ASP.NET 2.0 is another cool new feature added to the plethora of additions and improvements made into the next version of the programming model. Using themes, you can easily customize your server controls with the pre-defined looks bundled with the .NET Framework or can make your own themes according to the look and feel of your website. Designing a website was never this easy before.

What are themes

Themes are introduced in ASP.NET 2.0 to counter the troubles faced by developers to define the layout of server controls and make them look coherent to the overall application, with minimum possible efforts. Default or Global themes are contained in a special folder inside the framework and can be declared in the source as well as class files. However, custom made themes can also be saved inside the predefined "App_Themes" folder inside ASP.NET applications, making them easier to manage and interpolate according to your needs. The essential part of themes are skin files with .skin extension. Besides skin files, a theme can be composed of styles sheets .css files as well as images for added support for the layout of the website.

Global themes

Built-in themes are saved in a special location under the installation path of the .NET Framework 2.0:

[Editor coment: Line breaks used to avoid scrolling.]

%SystemRoot%\Microsoft.NET\Framework\VX.X.XXXX\
                        ASP.NETClientFiles\Themes\

The actual name of the subdirectory labeled vX.X.XXXX changes according to the build of ASP.NET 2.0 that you're considering. Themes defined in this path are visible to all applications running on the machine. However, ASP.NET 2.0 Beta 2 users will not find this folder in the specified location because ASP.NET team has dropped the Global Themes support from the beta 2 release of the product. But they will provide pre-defined themes as an add-on when Microsoft launches Visual Studio 2005 in November this year. These add-on themes can be purchased or downloaded separately and will be installed in the specified folder above.

How to apply themes

Themes can be used by a variety of methods. The following examples show you how you can define a theme named "SmokeAndGlass" in your application by different methods:

<%@ Page Theme="SmokeAndGlass" Language="C#"%>

Themes can be set programmatically under the Page_PreInit event handler. It is necessary to define them in this event handler as all the looks are applied to the server controls defined in a particular theme before the page loads. Here is how you can set themes programmatically:

protected void Page_PreInit(object sender, EventArgs e)
{
    // Applying theme to a particular page
    Page.Theme = "SmokeAndGlass";
}

Themes can also be stored in the web.config file which will be applied to the overall application. Themes declared in this file are therefore not required to be declared in any other file under the @Page tag.

<configuration>
    <system.web>
        <pages theme=“SmokeAndGlass” />
    </system.web>
</configuration>

Creating themes

You can create your own themes for applying to your site or individual pages. A page theme is defined in a special App_Themes folder under the root of a web application. In the page theme you define control skins - settings for individual controls such as Buttons, TextBoxes, hyperlinks and DataGrid etcetera. You typically define a control skin for each type of control that you want to use in your application and set the control properties so that all the controls have a similar look. However, note that themes configure only the visual properties of a control and does not alter their runtime behaviour. Here's is a typical example of a skin file:

<asp:Label runat="server" ForeColor="#585880" 
       Font-Size="0.9em" Font-Names="Verdana" />

<asp:Calendar runat="server" BorderStyle="double" 
  BorderColor="#E7E5DB" BorderWidth="2" BackColor="#F8F7F4" 
  Font-Size=".9em" Font-Names="Verdana">
    <TodayDayStyle BackColor="#F8F7F4" BorderWidth="1" 
          BorderColor="#585880" ForeColor="#585880" />
    <OtherMonthDayStyle BackColor="transparent" 
                                ForeColor="#CCCCCC" />
    <SelectedDayStyle ForeColor="#6464FE" 
                       BackColor="transparent" 
                       cssclass="theme_highlighted" />
    <TitleStyle Font-Bold="True" BackColor="#CCCCCC" 
          ForeColor="#585880" BorderColor="#CCCCCC" 
          BorderWidth="1pt" cssclass="theme_header" />
    <NextPrevStyle Font-Bold="True" ForeColor="#585880" 
                            BorderColor="transparent" 
                            BackColor="transparent" />
    <DayStyle ForeColor="#000000" BorderColor="transparent" 
                                 BackColor="transparent" />
    <SelectorStyle Font-Bold="True" ForeColor="#696969" 
                                     BackColor="#F8F7F4" />
    <WeekendDayStyle Font-Bold="False" 
             ForeColor="#000000" BackColor="transparent" />
    <DayHeaderStyle Font-Bold="True" ForeColor="#585880" 
                                 BackColor="Transparent" />
</asp:Calendar>

All global themes that were released with Beta 1 can be found inside the .zip sample application. These files can help you understand the skin files better.

Named skins

Skins without SkindID's are called default skins while skins with SkindID's are known as Named skins. Named skins define different layouts for two or more server controls with unique ID's. IDs can be defined in the same file or you can make different files with different ID's, it all depends on your personal approach and likings. SkinID can be referenced to call named skins. Here is an example:

Named skins

<asp:Label runat="server" ForeColor="#585880" 
   Font-Size="0.9em" Font-Names="Verdana" SkinID="LabelHeader" />

<asp:Label runat="server" ForeColor="#585980" Font-Size="0.8em" 
                       Font-Names="Arial" SkinID="LabelFooter" />

Referencing named skins

<asp:Label id="Header" runat="server" SkinID="LabelHeader" />

<asp:Label id="Header" runat="server" SkinID="LabelFooter" />

Dynamically applying themes

Themes can be dynamically applied to your application by adding a few lines of code. This will give users an option to select themes according to their taste. Here is an example showing you how to achieve this functionality:

protected void Page_PreInit(object sender, EventArgs e)
{ 
    string theme = ""; // setting the value to none
    if (Page.Request.Form.Count > 0) 
    {
        // "Themes" is the ID of dropdownlist
        theme = Page.Request["Themes"].ToString(); 
        if (theme == "Default")
        {
            theme = "";
        }
    }
    this.Theme = theme; // applying themes to the overall page
}

All the controls defined in your Web Forms inherit the properties defined in the theme you select from the DropDownList with ID="Themes". You have to add all the global as well as custom made themes under the "App_Themes" folder in your application, the above mentioned example will not access themes inside the global themes folder.

Conclusion

ASP.NET 2.0 themes are somewhat identical to the Windows XP and Windows Server 2003 themes and provide skins for a variety of controls. Themes are the next big thing in styling after CSS style sheets. Themes can be manipulated programmatically unlike style sheets. All in all, ASP.NET 2.0 themes and skin files are a huge leap forward in providing the best styling experience for web developers in the shortest possible time.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Zeeshan Muhammad

Pakistan Pakistan
Zeeshan Muhammad is a senior student of Department of Electronic Engineering at NED University of Engineering and Technology, Karachi. He has been actively involved in International .NET Association (INETA) MEA/Pakistan activities since July 2003 and is serving as an executive committee member for INETA Pakistan Chapter. He is a .Net Evangelist and love to speak at various knowledge sharing sessions. He authored a number of articles for local publishers and holds some Brainbench Certifications. He was honored to be awarded as the best volunteer in the Middle East / Africa Region by INETA MEA on October 24, 2004.
 
Find more about him at: http://zishu.serveblog.net

Comments and Discussions

 
Generalthanks PinmemberAtif Saddique28-Oct-13 5:06 
GeneralMy vote of 1 PinmemberGajanan Thate23-Jun-13 18:58 
QuestionMy Vote Of 4 PinmemberAlireza_13624-Mar-13 2:16 
QuestionFive start but... PinmemberMember 878749722-Aug-12 12:08 
GeneralMy vote of 5 PinmemberDeepak Joy Jose23-Jul-12 0:09 
QuestionAbout global theme Pinmemberlabshasanbd7-Jun-11 20:55 
Generali need SmokeAndGlass Theme Pinmemberleleravi20-Mar-11 21:37 
GeneralMy vote of 5 PinmemberAkileo4-Jan-11 10:53 
GeneralNice! PinmemberMMcintosh21-Oct-10 23:41 
GeneralMy vote of 5 Pinmemberbaluafriend12-Aug-10 2:19 
GeneralMy vote of 5 Pinmembercode in play25-Jul-10 23:52 
GeneralMy vote of 5 Pinmembersamirvarteji22-Jul-10 20:19 
GeneralMy vote of 5 PingroupAsif Huddani7-Jul-10 2:00 
QuestionContent Pages - Themes PinmemberRaviKrishna098-Jul-08 1:29 
QuestionDynamically edit skin PinmemberIhorKovetsky20-Nov-07 3:09 
GeneralDynamic Themes Pinmemberwebert126-Oct-07 8:23 
Questionhindi to english conversion of text in c#.net PinmemberQAZI ASIM19-Oct-07 20:42 
QuestionHow to use CSS in themes PinmemberAkajasimafat15-Aug-07 23:54 
AnswerRe: How to use CSS in themes Pinmembervenkatinaidu4-Oct-07 2:35 
GeneralApply themes for AjaxControls(TabContainer&PopUp) Pinmemberkumar19836-Mar-07 23:28 
QuestionHow to apply themes for Ajax controls Pinmemberkumar19836-Mar-07 23:12 
GeneralApply theme programmatically to the whole website PinmemberClaudiu_i29-Sep-06 11:17 
GeneralTheme in master form PinmemberHarikrk27-Sep-06 16:06 
GeneralRe: Theme in master form PinmemberZeeshan Muhammad28-Sep-06 0:23 
GeneralRe: Theme in master form Pinmembersrisant18-Feb-09 19:47 
GeneralPage_PreInit Pinmemberfigo247716-Aug-06 15:55 
AnswerRe: Page_PreInit Pinmembervenkatinaidu4-Oct-07 2:51 
GeneralRe: Page_PreInit Pinmembervenkatinaidu4-Oct-07 2:58 
QuestionI want to buy themes PinmemberCalvin Fabre14-Aug-06 16:14 
AnswerRe: I want to buy themes Pinmemberloveheda12-Feb-12 19:26 
Generaldoes it work on vs 2003 PinmemberHeart2Soul15-Jul-06 20:06 
GeneralRe: does it work on vs 2003 PinmemberZeeshan Muhammad15-Jul-06 22:36 
QuestionSkins not applying at user control? PinmemberImranZubair29-Mar-06 7:01 
QuestionChange Skin of Usercontrol at runtime? PinmemberImranZubair28-Mar-06 8:29 
AnswerRe: Change Skin of Usercontrol at runtime? PinmemberZeeshan Muhammad28-Mar-06 9:29 
QuestionApply theme at User control? PinmemberImranZubair21-Mar-06 7:54 
AnswerRe: Apply theme at User control? PinmemberZeeshan Muhammad22-Mar-06 0:51 
AnswerRe: Apply theme at User control? PinmemberSHARHI2-Oct-06 6:57 
GeneralRequest object throwing NullReference Pinmemberharryteck16-Mar-06 4:57 
GeneralRe: Request object throwing NullReference PinmemberZeeshan Muhammad16-Mar-06 8:06 
GeneralRe: Request object throwing NullReference Pinmemberharryteck17-Mar-06 3:15 
GeneralRe: Request object throwing NullReference PinmemberZeeshan Muhammad20-Mar-06 9:38 
Generalfunny - i just read the&quot;your&quot; article in another persons book Pinmemberstellablue798-Dec-05 9:15 
GeneralRe: funny - i just read the&amp;quot;your&amp;quot; article in another persons book PinmemberZeeshan Muhammad10-Dec-05 8:54 
GeneralRe: funny - i just read the&quot;your&quot; article in another persons book Pinmemberjulesr18-Nov-06 13:26 
GeneralRe: funny - i just read the&quot;your&quot; article in another persons book PinmemberAkajasimafat16-Aug-07 3:12 
GeneralNice article !! PinmemberTittle Joseph12-Oct-05 18:41 
GeneralRe: Nice article !! PinmemberZeeshan Muhammad12-Oct-05 22:38 
QuestionWhat about CSS? Pinmembernmosafi11-Oct-05 6:31 
AnswerRe: What about CSS? PinmemberZeeshan Muhammad12-Oct-05 22:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140814.1 | Last Updated 5 Oct 2005
Article Copyright 2005 by Zeeshan Muhammad
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid