Click here to Skip to main content
15,886,664 members
Articles / Web Development
Article

Themes

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
11 Oct 2013CPOL2 min read 8.6K   2  
Asp.net 2.0 came with a new feature called a theme. A theme is a collection of property settings that allow you to define the look of pages and

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

Asp.net 2.0 came with a new feature called a theme. A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.

Themes are made up of a set of elements: skins, cascading style sheets (CSS), images, and other resources. Skins provide the ability to apply server-side styling to a control on the server side.  By providing a SkinID for the skin, this skin can be applied to a control that matches the skin type and SkinID; otherwise, if the SkinID is left null, then the skin will be applied globally.  For instance, take a look at the example below:

 <asp:Button SkinID="One" runat="server" BackColor="Blue" />

This skin is applied to any button that has a SkinID of "One".  However, the following skin is applied to every button:

<asp:Button runat="server" BackColor="Yellow" />

A button with a SkinID set will use that skin over the skin that's globally applied.  At a minimum, a theme will contain skins, but it's common to include CSS files. Themes are defined in special directories in your Web site or on your Web server.  You can apply Themes dynamically also, but the theme should be applied only in the page_Preinit event by assigning a value to the Page.Theme property.

You can also can theme third-party controls by adding them into a .skin and adding (if required) their reference.

Best practices

When to use themes/skins

  • foreground images cannot be controlled by CSS
  • CSSClasses have to be applied by hand for a control to change it's look and feel.
  • For advanced controls and collections
  • Switch image files based on the current theme

What belongs in a theme

  • CSS file specific to ASP.NET controls
  • Images used for the advanced controls or other foreground images

What does not belong in a theme

  • Shared CSS files/styles
  • Print CSS files/styles
  • Global images
  • Any content that has nothing to do with the content affected by the theme/skin

WhitePapers/Blogs

Video

  • Customize my Site with Profiles and Themes?
This article was originally posted at http://wiki.asp.net/page.aspx/299/themes

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
This is a Collaborative Group

754 members

Comments and Discussions

 
-- There are no messages in this forum --