How to reuse css styles from Telerik RadControls for ASP.NET Ajax

Question

Telerik RadControls have builtin support for skinning and uses CSS to style all their controls. However, when plugging these controls into an existing website, what is the best way to merge the styles of the existing site with RadControls own styles?

Update: Given the following options (thanks to Zhaph):

1. Add the RadControl's CSS to my site
2. Make the RadControls look more like my site
3. Add my sites CSS selections to the RadControl style lists

What would be the best option?

Option 2 would require that I maintain two sets of styles going forward. So preferably option 1. That would enable reuse of the RadControls style system across the site, e.g. have buttons and simple controls look the same.

Update 2 (moved from my answer): I ended up doing a combination. Using the FormDecorator enables reuse of the RadControls styles on my own buttons and inputs. Also, copying the skins provided by Telerik into my ASP.Net theme enabled customizing the skins.

Answer 1

I have to admit, I've not used the RadControls for some time - we used the CMS RadEditor on a few CMS sites, and that could automatically pick up your style sheets, and add the classes to its list, or you could add some manually.

Looking that the documentation, some bits might help:

1. RadEditor CSS Classes and Their Use - Although usually these are added automatically by the controls I thought?
2. The link for 1. also tells you how to do this
3. A couple of options
   • External CSS Files, which states "By default RadEditor for ASP.NET AJAX uses the CSS classes available in the current page", but also shows how to load other style sheets.
   • Using the ToolsFile.xml - Scroll down to the <class> element.

Answer 2

As an update to this thread, there is now an online "Style Builder" for the Telerik AJAX and MVC tools that enables visual configuration/customization of the built-in skins:

http://stylebuilder.telerik.com/

This tool eliminates the need to understand CSS class definitions for each control and lets you easily customize one of the built-in themes to better match your site.