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):

Add the RadControl's CSS to my site
Make the RadControls look more like my site
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.

Do you mean how to add the RadControl's CSS to your site, or how to make the RadControls look more like your site, or how to add your sites CSS selections to the RadControl style lists? — Zhaph - Ben Duguid
– Zhaph - Ben Duguid, Commented Sep 12, 2009 at 9:54
Whichever is the easiest. I know RC can be styled to look like my site, but then I would have to maintain two sets of styles going forward. — Peter Lillevold
– Peter Lillevold, Commented Sep 12, 2009 at 9:59

Zhaph - Ben Duguid · Accepted Answer · 2009-09-12 10:23:44Z

2

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:

RadEditor CSS Classes and Their Use - Although usually these are added automatically by the controls I thought?
The link for 1. also tells you how to do this
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.

answered Sep 12, 2009 at 10:23

Zhaph - Ben Duguid

27k5 gold badges88 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dove · Accepted Answer · 2012-11-29 08:32:57Z

I just wanted to add; the FormDecorator only applies css to certain types of controls. If you have a control that isn't styled you can access the Telerik resources like this:

.cs File - have a public property like follows:

public string HeaderDivBackgroundURL
{
   get
{
{
     string backgroundURL = string.Empty;
     string skin = ((MainMaster)Page.Master).AppSkin;
     backgroundURL = Page.ClientScript.GetWebResourceUrl(typeof(RadSplitter), "Telerik.Web.UI.Skins." + skin + ".Splitter.slideTitleContainerBgr.gif");
     return backgroundURL;
   }
}

}

In the aspx page (in a RadCodeBlock), just have an internal style sheet to read from that property:

<tel:RadCodeBlock runat="server">
    <style type="text/css">
        .telerikBackgroundMock
        {
            background: url('<%= HeaderDivBackgroundURL %>') repeat-x;
        }
    </style>
</tel:RadCodeBlock>

I found this very useful for applying Telerik skins to non-Telerik control in a way that would still be dynamic and change with any skin changes.

Todd · Accepted Answer · 2010-09-01 14:48:16Z

0

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.

answered Sep 1, 2010 at 14:48

Todd

5,5181 gold badge33 silver badges34 bronze badges

1 Comment

Samuel Over a year ago

Not the answer to the question

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related