如何重用Telerik RadControls for ASP.NET Ajax的CSS样式

时间:2009-09-12 08:38:50

标签: asp.net css ajax telerik

Telerik RadControls内置了对皮肤的支持,并使用CSS来设置所有控件的样式。但是,将这些控件插入现有网站时,将现有网站的样式与RadControls自己的样式合并的最佳方法是什么?

更新:鉴于以下选项(感谢Zhaph):

  1. 将RadControl的CSS添加到我的网站
  2. 让RadControls看起来更像我的网站
  3. 将我的网站CSS选择添加到RadControl样式列表
  4. 什么是最好的选择?

    选项2要求我保持两套样式。 因此优选选项1.这将使得能够在整个站点上重用RadControls样式系统,例如,按钮和简单的控件看起来一样。

    更新2(从我的回答中删除): 我最终做了一个组合。使用the FormDecorator可以在我自己的按钮和输入上重用RadControls样式。此外,将Telerik提供的外观复制到我的ASP.Net主题中,可以自定义外观。

3 个答案:

答案 0 :(得分:2)

我必须承认,我有一段时间没有使用RadControls - 我们在一些CMS网站上使用了CMS RadEditor,这可以自动获取样式表,并将类添加到其列表中,或者您可以手动添加一些。

查看文档,有些内容可能会有所帮助:

  1. RadEditor CSS Classes and Their Use - 虽然通常这些是我想到的控件自动添加的吗?
  2. 1.的链接也告诉您如何执行此操作
  3. 有两种选择
    • External CSS Files,其中指出“默认情况下,ASP.NET AJAX的RadEditor使用当前页面中可用的CSS类”,但也显示了如何加载其他样式表。
    • Using the ToolsFile.xml - 向下滚动到< class>元件。

答案 1 :(得分:1)

我只是想补充一下; FormDecorator仅将css应用于某些类型的控件。如果您有一个未设置样式的控件,您可以访问Telerik资源,如下所示:

.cs文件 - 拥有如下公共财产:

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;
   }
}

}

在aspx页面中(在RadCodeBlock中),只需要一个内部样式表来从该属性中读取:

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

我发现这对于将Telerik皮肤应用于非Telerik控件非常有用,其方式仍然是动态的,并随着皮肤的任何变化而变化。

答案 2 :(得分:0)

作为此线程的更新,现在有一个用于Telerik AJAX和MVC工具的在线“样式生成器”,可以对内置外观进行可视化配置/自定义:

http://stylebuilder.telerik.com/

此工具无需了解每个控件的CSS类定义,您可以轻松自定义其中一个内置主题,以便更好地匹配您的网站。