Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Article

Themes and Skins in ASP.NET 2.0

Rate me:
Please Sign up or sign in to vote.
4.53/5 (60 votes)
5 Oct 20054 min read 560.8K   11.7K   126   52
Introduction to themes and skins in ASP.NET 2.0.

Image 1

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:

C#
<%@ 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:

C#
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.

XML
<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.NET
<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.NET
<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.NET
<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:

C#
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.

Image 2

Image 3

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


Written By
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

 
GeneralMy vote of 5 Pin
Member 1400035728-Sep-18 15:40
Member 1400035728-Sep-18 15:40 
Generalthanks Pin
Atif Saddique28-Oct-13 5:06
Atif Saddique28-Oct-13 5:06 
GeneralMy vote of 1 Pin
Ganesh Thate23-Jun-13 18:58
Ganesh Thate23-Jun-13 18:58 
QuestionMy Vote Of 4 Pin
Alireza_13624-Mar-13 2:16
Alireza_13624-Mar-13 2:16 
QuestionFive start but... Pin
Member 878749722-Aug-12 12:08
Member 878749722-Aug-12 12:08 
GeneralMy vote of 5 Pin
Deepak Joy Jose23-Jul-12 0:09
Deepak Joy Jose23-Jul-12 0:09 
QuestionAbout global theme Pin
labshasanbd7-Jun-11 20:55
labshasanbd7-Jun-11 20:55 
Generali need SmokeAndGlass Theme Pin
leleravi20-Mar-11 21:37
leleravi20-Mar-11 21:37 
GeneralMy vote of 5 Pin
Akileo4-Jan-11 10:53
Akileo4-Jan-11 10:53 
GeneralNice! Pin
MMcintosh21-Oct-10 23:41
MMcintosh21-Oct-10 23:41 
GeneralMy vote of 5 Pin
baluafriend12-Aug-10 2:19
baluafriend12-Aug-10 2:19 
GeneralMy vote of 5 Pin
pankajupadhyay2925-Jul-10 23:52
professionalpankajupadhyay2925-Jul-10 23:52 
GeneralMy vote of 5 Pin
samirvarteji22-Jul-10 20:19
samirvarteji22-Jul-10 20:19 
GeneralMy vote of 5 Pin
Asif Huddani7-Jul-10 2:00
Asif Huddani7-Jul-10 2:00 
QuestionContent Pages - Themes Pin
RaviKrishna098-Jul-08 1:29
RaviKrishna098-Jul-08 1:29 
QuestionDynamically edit skin Pin
IhorKovetsky20-Nov-07 3:09
IhorKovetsky20-Nov-07 3:09 
GeneralDynamic Themes Pin
webert126-Oct-07 8:23
webert126-Oct-07 8:23 
Questionhindi to english conversion of text in c#.net Pin
QAZI ASIM19-Oct-07 20:42
QAZI ASIM19-Oct-07 20:42 
QuestionHow to use CSS in themes Pin
akadiwala15-Aug-07 23:54
akadiwala15-Aug-07 23:54 
i found this article very much helpful.
i have a website with extreme use of css with td'd and tr's.
now i want to upgrade my site with Themes.
can you please tell me how can we use css in themes.


Azams
AnswerRe: How to use CSS in themes Pin
venkatinaidu4-Oct-07 2:35
venkatinaidu4-Oct-07 2:35 
GeneralApply themes for AjaxControls(TabContainer&PopUp) Pin
kumar19836-Mar-07 23:28
kumar19836-Mar-07 23:28 
QuestionHow to apply themes for Ajax controls Pin
kumar19836-Mar-07 23:12
kumar19836-Mar-07 23:12 
GeneralApply theme programmatically to the whole website Pin
Claudiu_i29-Sep-06 11:17
Claudiu_i29-Sep-06 11:17 
GeneralTheme in master form Pin
Harikrk27-Sep-06 16:06
Harikrk27-Sep-06 16:06 
GeneralRe: Theme in master form Pin
Zeeshan Muhammad28-Sep-06 0:23
Zeeshan Muhammad28-Sep-06 0:23 

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

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