Themes in Asp .Net

Themes can be used to have a consistent look for User interface elements in Asp .Net.

Add a skin by selecting Skin from Add New Item dialog, give a good name, say Blue. This will create a folder called Blue inside App_Themes special folder.

A Skin File is used to set properties for Controls.




















Select the newly created Skin file. Inside that you can specify the control properties as shown in the figure below.









Here I have specified the Text Box to have light Yellow BackColor and Button to have Light Blue BackColor.



Now go back to the Asp .Net page and create the visual interface. Set the StyleSheetTheme property of document to the newly created SkinFile.











Now the controls will inherit the properties you have specified in the skin file.

Setting site wide theme in web.config
Instead of setting StyleSheetTheme property for individual forms go to web.config and identify the Page tag and set theme attribute to the newly created skin file.







Instead of directly tweaking the properties by going to properties windows, I used to place a control in the Asp .Net page set appropriate properties then navigate to the source and cut the control's tag and paste it in the skin file. While doing so ensure that you remove the id attribute.

Adding CSS File to Themes
It is possible to have a CSS file in themes folder. Select the themes folder and select Add New Item from WebSite menu. All files related to the current selection ie. themes will appear. Select Style Sheet.
















A style sheet can be used to specify html styles.








Here I am setting the background color of the form.

Related Blog
ASP.Net Master Page for Consistant look and feel for websites

WebParts in Asp .Net