The use of themes in ASP.NET sites
ASP.NET theme is collection of styles, property settings and graphics that define appearance of pages and controls on website. Can include
- skin files - have .skin extension. Define property settings for controls
- cascading style sheet - have .css extension. Define colours, graphics, size and placement of controls, overall appearance
- images and other resources - allows images to be switched out when theme changed
Create inside App_Themes folder within ASP.NET application root. This folder contains a sub-folder for each theme within site.
- Add App_Themes folder to web application - right click website in Solution Explorer, click "Add ASP.NET Folder" and select Theme.
- Within App_Themes define individual folder for each theme by right clicking the App_Themes folder, click "Add ASP.NET Folder" and click Theme
- Add skin files, style sheets and images to each theme folder.
- Apply theme to site. Can do this at page level by adding Theme or StyleSheetTheme attribute to @ Page directive. Alternatively, apply theme to entire website, application or folder by adding
<pages styleSheetName="themeName">element to
<system.web>section of web.config file.
If use StyleSheetTheme then settings can be overridden as properties are applied before controls properties are set. If use Theme attribute, settings cannot be overridden as properties are applied after a page's properties.
Creating global themes
Work exactly like standard themes. Global themes are stored centrally and can be specified by any website running on server => simple maintenance. Can use one of following folders:
- <iis_default_root>\Aspnet_client\System_web<version>\Themes - used for applications running under IIS
- %SystemRoot%\Microsoft.NET\Framework<version>\ASP.NETClientFiles\Themes - used for file system based web applications
Cannot use Visual Studio to directly create global themes, but can copy local themes to appropriate global location.
Visual Studio does not recognise global themes, but ASP.NET will apply theme correctly when you retrieve page within browser.
Application themes of same name causes global theme to be ignored.
Creating a Skin File
Define default settings for server control appearance attributes.
Differs from style sheet in that skin file uses attributes of actual control, not just a set of standard HTML elements. Applied at control level automatically by ASP.NET.
Style elements only applied automatically to HTML. For ASP.NET controls must set style class manually.
To add skin file:
- Right click on Theme and click "Add New Item"
- In "Add New Item" dialogue select "Skin File". Type name of skin file and click Add.
Typically create separate skin file for every control type, but can embed skins for multiple controls in single file.
Skin files contain two types:
- default - automatically applied to all controls of same type when theme applied to page. Cannot define multiple default skins for a single control type in same file.
<asp:Label runat="server" Font-Size="18px" />
- named - is a control skin with a SkinID property. Are not automatically applied to control by type, instead explicitly apply to control by setting its SkinId property. Allows you to set different skins for different instances of same control within application.
<asp:Label runat="server" SkinId="Title" Font-Size="18px" />
To add image to skin, add named skin of image control to skin file:
<asp:Image runat="server" SkinId="Logo" ImageUrl="~/image.jpg" />
And then use it within an ASP.NET page:
<asp:Image runat="server" SkinId="Logo" ID="Image1" />
ASP.NET will grab correct logo based on skin file.
Entries cannot contain the ID attribute.
Entries must include the runat="server" attribute setting.
Adding images to theme
Add named skin of the image control to the skin file, see previous section for example.
Adding CSS to theme
CSS defines how elements are displayed and where they are positioned on screen.
CSS file placed in theme folder means that CSS is automatically applied as part of theme.
Themes vs CSS
Themes can define many properties of control on page - not just styles, e.g. specify graphics for TreeView control
Themes can include graphics
Themes do not cascade. Any property values defined in a theme referenced by a page's Theme property override the values decoratively set on a control whereas a theme referenced by the StyleSheetTheme property do not.
Only one theme can be applied per page.
Rules for applying themes
A site may have multiple, conflicting style definitions for same set of controls - i.e. standard style sheet, theme and styles defined directly on control. Definition applied by following precedence:
- Theme attributes in @ Page directive
<pages theme="themeName">elements in
<system.web>section of web,config file.
- Local control attributes
- StyleSheetTheme attributes in @ Page directive
<pages styleSheetTheme="themeName">elements web,config file.
i.e. if specify Theme attribute in @ Page directive, the settings in this theme take precedence other settings you specified directly for the controls. If change Theme attribute to StyleSheetTheme attribute then the precedence has changed and the controls attributes will take priority.
Can disable themes for specific page by setting EnableTheming attribute of @ Page directive to false.
Can disable themes for control by setting EnableTheming attribute of the control to false.
Apply theme programmatically
Set page's Theme property in the Page_PreInit method
protected void Page_PreInit(object sender, EventArgs e)
Page.Theme = "BlueTheme";
To set a style sheet theme (works like theme but does not override control attributes) use the Page.StyleSheetTheme property.
Can apply skin to specific control using control SkinID property:
protected void Page_PreInit(object sender, EventArgs e)
Calendar1.SkinID = "GreenTheme";
If applying from button the button click handler will have to call Server.Transfer from event handler and change theme in Page_PreInit. Cannot change theme in event handler as this will cause an exception (the event handler being executed after the Page_PreInit method).