Removing all CSS from telerik controls

Question

I'm using Telerik RadControls for ASP.NET and wondered if there was any way to turn off/stop the CSS that is automatically downloaded with the controls.

I don't want to remove any of the class names that are applied to the telerik HTML elements, I just want a clean slate so that I can style them exactly how I want.

The reaon I ask is that I'm trying to apply an font enlarger for people with impaired vision to my site. I can overwrite the current styles with something like:

html body .RadInput_Default .riTextBox, div.RadComboBox_Default input.rcbInput {
  font-size: 0.9em !important;
  height: 1.4em !important;
  line-height: 1.3em !important;
  width: 6em !important;
}

I have to write !important to overwrite the styles that are coming down with the .axd file taht comes down with the Telerik control. The problem with this though is that if I try and enlarge the font (I'm using javascript to increase the default size of the font in ems) the font-size for the Telerik control always remains at 0.9em.

Any ideas?

Thanks for your time

Answer 1

That each telerik control has:

• EnableEmbeddedSkins
• EnableEmbeddedBaseStylesheet

Setting both of these to false will disable all of telerik's embedded stylesheets.

A quick warning though - some controls, e.g. the panelbar, won't work without some of the built in CSS (the expanding/collapsing of child elements won't work) unless you add the necessary styles yourself, so tread with care.

More info can be found here:

• Disabling embedded resources - especially the part entitled "Disabling embedded skins".