CODEWITHSUNDEEP
asp.netcssajaxtelerik
Peter Lillevold
Peter Lillevold

Reputation: 33910

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

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.

Upvotes: 5

Views: 7588

Answers (3)

Greg
Greg

Reputation: 11

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.

Upvotes: 1

Todd
Todd

Reputation: 5538

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.

Upvotes: 0

Zhaph - Ben Duguid
Zhaph - Ben Duguid

Reputation: 26956

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.

Upvotes: 2

Related Questions