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

Saideman

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".

Stephanistephania

Thanks Robert! I'd posted the same question on the Telerik Forum and got exactly the same answer. I've managed to recreate the styles of the DatePicker, Calendar and CombBox just using my own styles now - and they size up when using the font enlarger! One other thing to note (for anyone else who is facing this issue) was that to get rid of the inline styles that are rendered for height and width (these are also fixed in pixels) use the properties of Width and Height on the relevant Control. Again, to cope with the font enlarger I've set these in em's and they work correctly. – Saideman

For me setting the properties in the markup didn't work, but settin them in the web.config was perfect – Jinks