ASP.NET & CSS: Using skins to “zero out” default style and set default CSS class namesPosted: February 10, 2008 Filed under: Uncategorized | Tags: ASP.NET, CSS 5 Comments
ASP.NET includes a feature called “Themes” that allows you to organise styling artifacts including CSS stylesheets and images into logical units that can be easily applied to a page or entire site through configuration. Part of this feature is the ability to create .skin files that set default values for certain properties of ASP.NET server controls as part of a theme.
Not all properties of ASP.NET controls are skinnable. Indeed the initial intention of .skin files was to enable the setting of default values for properties such as FontColor and BorderWidth, which when serving to CSS supporting browsers ASP.NET will render as inline style attributes on the emitted HTML controls. So what place do they have when we apply all of our style rules via way of attached CSS stylesheets and selectors (the way we should)?
Despite their evil initial purpose we can put .skin files to good use for two purposes:
- Assigning CSS classes to all instances of particular ASP.NET server controls; and
- Zeroing out the default inline style that ASP.NET sets on some controls.
So how does this work?
In your theme folder add a new .skin file called Controls.skin:
Now we want to add some declarations to the file to:
- Zero out the inline style of the ASP.NET validator controls; and
- Assign a default CSS class name to the Button, LinkButton, TextBox and validator controls.
<asp:RequiredFieldValidator runat="server" ForeColor="" CssClass="validation-error" /> <asp:RangeValidator runat="server" ForeColor="" CssClass="validation-error" /> <asp:CompareValidator runat="server" ForeColor="" CssClass="validation-error" /> <asp:RegularExpressionValidator runat="server" ForeColor="" CssClass="validation-error" /> <asp:CustomValidator runat="server" ForeColor="" CssClass="validation-error" /> <asp:LinkButton runat="server" CssClass="button" /> <asp:Button runat="server" CssClass="button" /> <asp:TextBox runat="server" CssClass="text-box" />
And that’s it! Now when ASP.NET renders these controls when they appear on a page (or in a site) with your theme configured, they’ll automatically pick up properties defined in this .skin file.
[…] controls to “validation-error”. The easiest way to achieve this is by using a skin file. See this post for more details on how to do […]
your post is useless. missing a lot of steps
pls publish full code
Also need to assign theme to the web pages using:
in web.config and add the following to css file:
Very helpful article.
In web.config add to pages tag: theme=”Theme1″
(this was filtered from my original post)