Click here to Skip to main content
11,705,098 members (61,346 online)
Click here to Skip to main content

Themes and Skins in ASP.NET 2.0

, 5 Oct 2005 441.7K 10.9K 124
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

You may also be interested in...

Comments and Discussions

 
Generalthanks Pin
Atif Saddique28-Oct-13 5:06
memberAtif Saddique28-Oct-13 5:06 
GeneralMy vote of 1 Pin
Gajanan Thate23-Jun-13 18:58
memberGajanan Thate23-Jun-13 18:58 
QuestionMy Vote Of 4 Pin
Alireza_13624-Mar-13 2:16
memberAlireza_13624-Mar-13 2:16 
QuestionFive start but... Pin
Member 878749722-Aug-12 12:08
memberMember 878749722-Aug-12 12:08 
GeneralMy vote of 5 Pin
Deepak Joy Jose23-Jul-12 0:09
memberDeepak Joy Jose23-Jul-12 0:09 
QuestionAbout global theme Pin
labshasanbd7-Jun-11 20:55
memberlabshasanbd7-Jun-11 20:55 
Generali need SmokeAndGlass Theme Pin
leleravi20-Mar-11 21:37
memberleleravi20-Mar-11 21:37 
GeneralMy vote of 5 Pin
Akileo4-Jan-11 10:53
memberAkileo4-Jan-11 10:53 
GeneralNice! Pin
MMcintosh21-Oct-10 23:41
memberMMcintosh21-Oct-10 23:41 
GeneralMy vote of 5 Pin
baluafriend12-Aug-10 2:19
memberbaluafriend12-Aug-10 2:19 
GeneralMy vote of 5 Pin
code in play25-Jul-10 23:52
membercode in play25-Jul-10 23:52 
GeneralMy vote of 5 Pin
samirvarteji22-Jul-10 20:19
membersamirvarteji22-Jul-10 20:19 
GeneralMy vote of 5 Pin
Asif Huddani7-Jul-10 2:00
groupAsif Huddani7-Jul-10 2:00 
QuestionContent Pages - Themes Pin
RaviKrishna098-Jul-08 1:29
memberRaviKrishna098-Jul-08 1:29 
QuestionDynamically edit skin Pin
IhorKovetsky20-Nov-07 3:09
memberIhorKovetsky20-Nov-07 3:09 
GeneralDynamic Themes Pin
webert126-Oct-07 8:23
memberwebert126-Oct-07 8:23 
Questionhindi to english conversion of text in c#.net Pin
QAZI ASIM19-Oct-07 20:42
memberQAZI ASIM19-Oct-07 20:42 
QuestionHow to use CSS in themes Pin
Akajasimafat15-Aug-07 23:54
memberAkajasimafat15-Aug-07 23:54 
AnswerRe: How to use CSS in themes Pin
venkatinaidu4-Oct-07 2:35
membervenkatinaidu4-Oct-07 2:35 
GeneralApply themes for AjaxControls(TabContainer&PopUp) Pin
kumar19836-Mar-07 23:28
memberkumar19836-Mar-07 23:28 
QuestionHow to apply themes for Ajax controls Pin
kumar19836-Mar-07 23:12
memberkumar19836-Mar-07 23:12 
GeneralApply theme programmatically to the whole website Pin
Claudiu_i29-Sep-06 11:17
memberClaudiu_i29-Sep-06 11:17 
GeneralTheme in master form Pin
Harikrk27-Sep-06 16:06
memberHarikrk27-Sep-06 16:06 
GeneralRe: Theme in master form Pin
Zeeshan Muhammad28-Sep-06 0:23
memberZeeshan Muhammad28-Sep-06 0:23 
GeneralRe: Theme in master form Pin
srisant18-Feb-09 19:47
membersrisant18-Feb-09 19:47 
GeneralPage_PreInit Pin
figo247716-Aug-06 15:55
memberfigo247716-Aug-06 15:55 
AnswerRe: Page_PreInit Pin
venkatinaidu4-Oct-07 2:51
membervenkatinaidu4-Oct-07 2:51 
GeneralRe: Page_PreInit Pin
venkatinaidu4-Oct-07 2:58
membervenkatinaidu4-Oct-07 2:58 
QuestionI want to buy themes Pin
Calvin Fabre14-Aug-06 16:14
memberCalvin Fabre14-Aug-06 16:14 
AnswerRe: I want to buy themes Pin
loveheda12-Feb-12 19:26
memberloveheda12-Feb-12 19:26 
Generaldoes it work on vs 2003 Pin
Heart2Soul15-Jul-06 20:06
memberHeart2Soul15-Jul-06 20:06 
GeneralRe: does it work on vs 2003 Pin
Zeeshan Muhammad15-Jul-06 22:36
memberZeeshan Muhammad15-Jul-06 22:36 
QuestionSkins not applying at user control? Pin
ImranZubair29-Mar-06 7:01
memberImranZubair29-Mar-06 7:01 
QuestionChange Skin of Usercontrol at runtime? Pin
ImranZubair28-Mar-06 8:29
memberImranZubair28-Mar-06 8:29 
AnswerRe: Change Skin of Usercontrol at runtime? Pin
Zeeshan Muhammad28-Mar-06 9:29
memberZeeshan Muhammad28-Mar-06 9:29 
QuestionApply theme at User control? Pin
ImranZubair21-Mar-06 7:54
memberImranZubair21-Mar-06 7:54 
AnswerRe: Apply theme at User control? Pin
Zeeshan Muhammad22-Mar-06 0:51
memberZeeshan Muhammad22-Mar-06 0:51 
AnswerRe: Apply theme at User control? Pin
SHARHI2-Oct-06 6:57
memberSHARHI2-Oct-06 6:57 
GeneralRequest object throwing NullReference Pin
harryteck16-Mar-06 4:57
memberharryteck16-Mar-06 4:57 
GeneralRe: Request object throwing NullReference Pin
Zeeshan Muhammad16-Mar-06 8:06
memberZeeshan Muhammad16-Mar-06 8:06 
GeneralRe: Request object throwing NullReference Pin
harryteck17-Mar-06 3:15
memberharryteck17-Mar-06 3:15 
GeneralRe: Request object throwing NullReference Pin
Zeeshan Muhammad20-Mar-06 9:38
memberZeeshan Muhammad20-Mar-06 9:38 
Generalfunny - i just read the&quot;your&quot; article in another persons book Pin
stellablue798-Dec-05 9:15
memberstellablue798-Dec-05 9:15 
GeneralRe: funny - i just read the&amp;quot;your&amp;quot; article in another persons book Pin
Zeeshan Muhammad10-Dec-05 8:54
memberZeeshan Muhammad10-Dec-05 8:54 
GeneralRe: funny - i just read the&quot;your&quot; article in another persons book Pin
julesr18-Nov-06 13:26
memberjulesr18-Nov-06 13:26 
GeneralRe: funny - i just read the&quot;your&quot; article in another persons book Pin
Akajasimafat16-Aug-07 3:12
memberAkajasimafat16-Aug-07 3:12 
GeneralNice article !! Pin
Tittle Joseph12-Oct-05 18:41
memberTittle Joseph12-Oct-05 18:41 
GeneralRe: Nice article !! Pin
Zeeshan Muhammad12-Oct-05 22:38
memberZeeshan Muhammad12-Oct-05 22:38 
QuestionWhat about CSS? Pin
nmosafi11-Oct-05 6:31
membernmosafi11-Oct-05 6:31 
AnswerRe: What about CSS? Pin
Zeeshan Muhammad12-Oct-05 22:19
memberZeeshan 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 | Terms of Use | Mobile
Web03 | 2.8.150819.1 | Last Updated 5 Oct 2005
Article Copyright 2005 by Zeeshan Muhammad
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid