Share via

Tip#101: Did you know… How to scope Theme

  • Article

Themes are a way to define properties of pages and controls, and can be used to provide consistent look across pages. There are several different levels of applying a theme to an individual control, a page, or an application.

  1. Control Level
    Define a named skin (an entry in a .skin file having the SkinID property set) and then apply it to an individual control
        <asp:Button runat="server" ID="MyButton" SkinID="BlueButton" />
  2. Page Level
    A defined theme can be applied to an individual page by specifying the Theme or StyleSheetTheme attribute of the @Page directive of the page
        <%@ Page Theme="MyTheme" %>
  3. Application Level
    To define the theme for the whole application, set the theme attribute of the pages element in the web.config file of the application
    <configuration>
       <system.web>
        < pages theme="MyTheme" />
       </system.web>
    </configuration>
  4. Global Level
    Theme can also be applied globally to all the web sites on the same server. Global themes are defined the same way as Page themes, except that they’re defined in aTheme folder that is global to the server. Then you set the theme attribute of the pages element in the machine.config file.

Do you wonder if there is any difference between setting the Theme and StyleSheetTheme attribute of a @Page directive? Yes, there is. The difference is the precedence of the themes specified by the attribute. If you use the Theme attribute, the local settings will be overwritten by the Theme settings. If you use the StyleSheetTheme attribute, the local settings will be applied, regardless of what being defined in the Theme folder.

Also, a point that is worth mentioning is the designer of Visual Studio doesn’t support the Theme attribute. If you want to use the designer when developing your page, you might consider using the StyleSheetTheme attribute, then switch to using the Theme attribute for deployment.

Anh Phan

SDET, Visual Web Developer

Comments

  • Anonymous
    January 26, 2010
    Hi, i liked your Post about theme. I have confusion. pls solve it. Difference between Skins and themes. And Situation in which we choose between them.

  • Anonymous
    January 28, 2010
    Hi I like your article. I have confused about theme and StyleSheetTheme  attributes before.Now I  clearly know about that.Thanks your for your post.

  • Anonymous
    February 03, 2010
    Hi, thanks for your post. it is more helpful for me. Thanks again

  • Anonymous
    May 06, 2010
    I don't know how to scope them untill reading your post Anh Phan. :-) But maybe my asp.net developer should learn this. I'll forward to him this URL. Thanks Anh Phan,