Telerik blogs
In the era of the "classic" RadControls for ASP.NET modifying a skin required opening

~ / RadControls / [ControlName] / Skins / [SkinName] / styles.css

and making the necessary changes. The new RadControls for ASP.NET AJAX (formerly known as "Prometheus") by default use skins, which are embedded in the assembly. This simplifies deployment but sacrifices customization. Or does it?

Actually, making a change to an embedded skin of a RadControl for ASP.NET AJAX is quite easy, given that one keeps in mind a couple of notable things. Namely:

(1) Since the embedded skin cannot be modified, the custom styles need to be placed elsewhere. For example  in a <style> tag in the <head> section of the page or in an external CSS file (no matter whether in a АSP.NET theme or not). Using external CSS stylesheets is highly recommended, so that structure and content are properly separated from presentation.

(2) The embedded skins are registered automatically on the web page using <link> tags, which are appended at the end of the <head> section of the web page source HTML. In other words, the embedded skins are always applied last by the browser.

 

Why does (2) matter? Browsers adhere to certain rules, when deciding which one of two (or more) conflicting CSS style declarations to apply. Simply put, if two CSS rules have the same specificity, the latter specified wins. (Very roughly stated, specificity is the number of HTML elements, CSS classes and Client IDs, which take part in a CSS selector. In turn, a selector is a single comma-separated chunk before the opening bracket "{" of a CSS rule. If there is only one chunk, there are no commas.)


So, since RadControls' embedded skins are always the last stylesheets to be appended, you must supply a rule with greater specificity in order to override an embedded skin style. Supplying a CSS rule with the same level of  specificity will not work. Here is an example:

In the Default RadGrid skin there is a CSS rule:

.RadGrid_Default 
    border:1px solid #828282
    background:#fff
    color:#333


The specificity of the CSS selector is 10 points (one CSS class is worth 10 points). If we want to override this CSS rule, we should use for example:

div.RadGrid_Default 
    backgroundyellow
    colorblue


The above selector has a specificity of 11 points (1 + 10) and this is enough to override the skin. Adding "div" to the selector is just a small trick - the RadGrid_Skin CSS class is always applied to divs, so the CSS selector will select the same HTML elements, but now the CSS rule has higher weight than the skin's rule.

Some people are aware that by using the !important clause one can a CSS rule of random specificity. For example:

.RadGrid_Default 
    backgroundyellow  !important ; 
    colorblue  !important ; 


However, using !important is not recommended, firstly because it is not needed, and secondly, because further overriding it later may become rather hard in certain occasions.

Here is another example, which discusses a slightly different aspect of skin overriding. We will use again RadGrid's Default skin:

.RadGrid_Default .rgAltRow 
    background:#f2f2f2

(specificity 20)

As we mentioned earlier, we can override the above CSS rule by adding an appropriate HTML element to the selector:

 
.RadGrid_Default tr.rgAltRow
    backgroundblack ; 
    coloryellow ; 

(specificity 21)

However, this will influence all RadGrids with the Default skin in our web application. We might want to override only several instances of RadGrid.

In this case the smart thing to do is assign a custom CSS class to all RadGrids to be modified:

<telerik:RadGrid  CssClass="MyCustomClass"  /> 


Now this CSS class can be used to create a custom CSS rule with a higher specificity:

 
.MyCustomClass  tr.rgAltRow
    backgroundblack ; 
    coloryellow ; 

(specificity 21)


Probably, there are 2 questions that come into your mind after reading the above:

1. How can one find out the specificity of the CSS rule, which has to be overridden?
We strongly recommend using Firebug for Firefox and/or Web Developer Toolbar for Internet Explorer. They are able to display all styles being applied to a selected HTML element, and where they come from.

2. How can one find out more about a control's HTML output and CSS classes, so that creating custom CSS rules becomes easier?
You can consult the related help articles in our online documentation, for example: RadGrid CSS classes, RadCalendar CSS classes, etc. In addition, all embedded CSS files for all RadControls are included in the installation packages - look for the Skins subfolder in the root folder of the installation.

Finally, here are some CSS specificity-related articles worth reading:

CSS Specificity Things You Should Know About

Cascading Order (W3C CSS Standard)

CSS: What Happens When a Conflict Occurs

About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.