Themes and CSS
Folders inside the Theme folder in ASP.NET web sites can contain skin files, CSS files, images and text files. These folders are automatically compiled into classes so the names of folders should not conflict with class names already in use.
Here are several rules for the use of Themes:
Skin files should be replaced by CSS files, because CSS more closely follows web standards, maximizes caching of CSS files in browsers, reduces bloated web pages and the extra processing time used to add control properties to every control affected. You also loose the separation of content and presentation, because the properties of skin files are written in the page with the control itself.
Skin files are used to change the appearance only of ASP controls and not their behavior. They can have any naming convention, but it is recommended to name them after the control they affect, if one skin file is applied to a control. Multiple controls can have their appearances changed by one skin file.
The controls assigned in a skin file, must have a runat=”Sever” command and for granular control they can have a SkinID attribute to assign the appearance to only those controls that also have the SkinID attribute. The control must be a matching control of the skin file. If no SkinID is named, the skin is called a default skin and only one default skin is allowed to apply to a change.
The theme can be assigned at the page level with a Theme=”name of folder” in the page directive. To assign on a directory wide level, you can assign themes in the web.config file with <pages theme=”name of folder”/>
You can also use StyleSheetTheme in the same fashion. StyleSheetTheme behaves more like CSS files, because the properties set in a Theme file will be overridden by any control properties set on the page itself. With a Theme, all local properties set on controls will be ignored.
You can override themes on a page with the EnableTheming=”false” in the page directive.
Any CSS found in Theme folders will be automatically applied if the theme is called, and ASP controls can have classes applied with the CssClass property.
If you have CSS files in the theme folder, be sure to watch how they are named, because they are imported in the page alphabetically, which means any properties set in a file named zebra.css will overwrite properties in a file named apple.css.
It is possible to dynamically assign themes. If you assign a theme with page directives, you will have to use the Page_PreInit event of the page life cycle, but if you use CssClass, you can use the Page_Load event.
You can use a dropdown list with the CssClass method, because the control tree has been created after the PreInit event and before Load, so you can use the following code in the Page_Load: control.CssClass = dropdownlist.SelectedItem.Text.
With the PreInit method you can use a hyperlink to send a querystring and then access it with: Profile.userTheme = Request["Theme name"] and then use a switch case to move through the variables and finish with Theme = Profile.UserName.
Of course you will need to add the following to the web.config file:
<profile>
<properties>
<add name="UserTheme"/>
</properties>
</profile>
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Comments
No comments yet.
Leave a comment