Theme

What is Theme?

Theme is a collection of control styles applied to webcontrols on website. It gives the common looks and feel to all webcontols in a simple way. Its allows to abstract the styles so that it can be reused. So from the software engg point of it satisfy the reusability and easy maintainance quality.

• Theme only works for WebControls
• MasterPage can not define Theme but Theme can be set in the content pages.
• Control style defined in Theme will override the control style define in a page.
• Doesnt work at Design Time but StyleSheetTheme works
• Its collection of .skin and .css files
• Themes doesnt apply to page or control if EnableTheming="false" declare on it.
• If themes applied dynamically (runtime) then it should be set in before Page_Preinit.

How do i apply Theme to my site?

To apply a Theme to app user need to create a folder with name App_Themes under application root directory and then create a folder with the name of Theme within App_Themes folder.

For example if I want to create a Blue theme for my WebSite then folder structure will look like as shown in image.

To Set Theme for the entire site define a theme in web.config file like

<system.web>
<pages theme="Blue" />
</system.web>

To apply Theme to a page define a theme in a page directive like

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

To apply Theme dynamically (at runtime)

protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "Blue";
}

What is a .skin file?

Thats the file which will contain the styles applied to webcontrols.
eg.
<asp:Label runat=server Text="ThemedLabel" BackColor="Red" /> (This is called default skin for label)
If the Theme containing above skin file is applied to a page then all the labels on a page will
be shown with Text="ThemedLabel" BackColor="Red"
If there is no skinid defined in the control defination then that its consider as a default skin for that control.

• Controls defined in the .skin file should NOT contain ID.
• Error will be thrown if two default control skin is declared for the same type of control in .skin file.
• Any kind of code or expressions are not allowed in skin file.

How to defind different Style(skin) for the same control?
Using SkinID different skin for a control is defined.
eg.
<asp:Label runat=server Text="ThemedLabel" BackColor="Red" /> - Default skin for Label

<asp:Label runat=server SkinId="BoldLabel" Text="ThemedLabel_WithSkinId" BackColor="Blue" Font-Bold="true"
/> - BoldLabel skin for Label
So if Themed page contain a label without any SkinID then default skin will be applied to that
label and if there is any Label exists with SkinID="BoldLabel" then Label will be
shown with Text="ThemedLabel_WithSkinId" BackColor="Blue" Font-Bold="true"

Different ways to organize the theme folder contents.

Since theme folder can contain many .skin files. so you can
organise your theme folder in different ways. All the skin files get merged before
theme is applied to page.

• Just one .skin file that contain all control skin definations.
• Create one .skin file for each control.
• Group same the SkinIDs in one .skin file

Is there a way to share Theme between different Apps?

Using Global Theme is way to share Theme between different Apps.eg if you want to create a Global Theme called theme1

• For Cassini server create a Theme1 folder inside framework folder like
  \WINDOWS\Microsoft.NET\Framework\v2.0.xxxxx\ASP.NETClientFiles\Themes\Theme1
• For IIS server create a Theme1 folder inside like \Inetpub\wwwroot\aspnet_client\system_web\v2.0.xxxxx\Themes\Theme1

Application level Theme will override the Global theme. ie if Theme named Blue is defined at Global and Application level then application level Blue theme will be applied to the site.

http://weblogs.asp.net/vimodi/articles/ThemesFaqs.aspx