Click here to Skip to main content
15,867,453 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

 
QuestionApply theme at User control? Pin
Imran Zubair21-Mar-06 7:54
Imran Zubair21-Mar-06 7:54 
AnswerRe: Apply theme at User control? Pin
Zeeshan Muhammad22-Mar-06 0:51
Zeeshan Muhammad22-Mar-06 0:51 
AnswerRe: Apply theme at User control? Pin
Sue H2-Oct-06 6:57
Sue H2-Oct-06 6:57 
GeneralRequest object throwing NullReference Pin
harryteck16-Mar-06 4:57
harryteck16-Mar-06 4:57 
GeneralRe: Request object throwing NullReference Pin
Zeeshan Muhammad16-Mar-06 8:06
Zeeshan Muhammad16-Mar-06 8:06 
GeneralRe: Request object throwing NullReference Pin
harryteck17-Mar-06 3:15
harryteck17-Mar-06 3:15 
GeneralRe: Request object throwing NullReference Pin
Zeeshan Muhammad20-Mar-06 9:38
Zeeshan Muhammad20-Mar-06 9:38 
Generalfunny - i just read the&quot;your&quot; article in another persons book Pin
stellablue798-Dec-05 9:15
stellablue798-Dec-05 9:15 
Huh... rearrange a word here and there and call it your own. Sorry but that's plagerism.
you use the same examples and everything from a book that i just bought. ASP.NET 2.0 Upgraders Guide by Mike Murach.
You better ben careful what you rip off anMad | :mad: d call your own. People get arrested for that.
GeneralRe: funny - i just read the&amp;quot;your&amp;quot; article in another persons book Pin
Zeeshan Muhammad10-Dec-05 8:54
Zeeshan 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
julesr18-Nov-06 13:26 
GeneralRe: funny - i just read the&quot;your&quot; article in another persons book Pin
akadiwala16-Aug-07 3:12
akadiwala16-Aug-07 3:12 
GeneralNice article !! Pin
Tittle Joseph12-Oct-05 18:41
Tittle Joseph12-Oct-05 18:41 
GeneralRe: Nice article !! Pin
Zeeshan Muhammad12-Oct-05 22:38
Zeeshan Muhammad12-Oct-05 22:38 
QuestionWhat about CSS? Pin
nmosafi11-Oct-05 6:31
nmosafi11-Oct-05 6:31 
AnswerRe: What about CSS? Pin
Zeeshan Muhammad12-Oct-05 22:19
Zeeshan Muhammad12-Oct-05 22:19 
GeneralRe: What about CSS? Pin
Member 1110894525-Sep-14 1:27
Member 1110894525-Sep-14 1:27 

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.