RadControls for ASP.NET AJAX

RadControls for ASP.NET AJAX

In some scenarios you may want to use a built-in (embedded) skin, but make some minor adjustments to it. In such cases it is easier and more convenient to override styles from the embedded skin, rather than to use a complete custom skin.

In order to override a style from a built-in skin, you will have to find out the CSS rule, which must be overridden, and then construct a new CSS rule with a higher specificity. To accomplish this, it will be useful to have a general idea about the control's HTML output and CSS classes. Basic CSS knowledge is required as well.

Getting Familiar with RadControls' CSS classes and styles

Each RadControl documentation includes a help article, which lists the CSS classes of the control and describes their usage. For example the RadCalendar CSS class list states that "rcWeek is a class applied to the <TR> elements, which contain the column headers (<TH> elements)."

The built-in (embedded) RadControls skins can be reviewed as ordinary CSS files and images - they are provided in the /Skins/ subfolder located in the RadControls installation folder (if you have used an executable installer), or in the RadControls installation ZIP. The file structure is as follows:

  • / Skins / ControlName.css - the base stylesheet of a given RadControl

  • / Skins / SkinName / ControlName.SkinName.css - the skin CSS of a given RadControl

  • / Skins / SkinName / ControlName / ...images... - the skin images of a given RadControl

  • / Skins / Common / ...images... - images used by various controls and/or skins

  • / Skins / SkinName / Common / ...images... - images used by various controls

Finding out which CSS rule to modify (override)

The easiest way to discover which CSS rule is responsible for a given control style applied in the browser is to use some web developer tool such as Firebug for Firefox or Web Developer Toolbar for Internet Explorer. Such tools help inspect the HTML output and CSS styles instantly and even allow experiments and changes on the fly. Another useful opportunity these tools provide is to learn about the RadControls HTML rendering.

CSS Selectors and CSS Specificity

The CSS knowledge required to modify (override) embedded skins includes familiarity with the different types of CSS selectors and the notion of CSS specificity.

CSS Selectors Tutorial

Articles about CSS specificity:

Here is a blog post, which extends the information above with an example about overriding a RadGrid skin.

How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin