Cómo reutilizar estilos CSS de Telerik RadControls para ASP.NET Ajax

StackOverflow https://stackoverflow.com/questions/1414651

  •  06-07-2019
  •  | 
  •  

Pregunta

Telerik RadControls tiene soporte incorporado para skinning y usa CSS para diseñar todos sus controles. Sin embargo, al conectar estos controles a un sitio web existente, ¿cuál es la mejor manera de fusionar los estilos del sitio existente con los estilos propios de RadControls?

Actualización: Dadas las siguientes opciones (gracias a Zhaph):

  1. Agregar el CSS de RadControl a mi sitio
  2. Hacer que los RadControls se parezcan más a mi sitio
  3. Agregar selecciones CSS de mis sitios a las listas de estilos de RadControl

¿Cuál sería la mejor opción?

La opción 2 requeriría que mantenga dos conjuntos de estilos en el futuro. Entonces, preferiblemente la opción 1. Eso permitiría la reutilización del sistema de estilo RadControls en todo el sitio, p. los botones y controles simples tienen el mismo aspecto.

Actualización 2 (movido de mi respuesta): Terminé haciendo una combinación. El uso de el FormDecorator permite la reutilización de los estilos RadControls en mis propios botones y entradas Además, copiar las máscaras proporcionadas por Telerik en mi tema ASP.Net permitió personalizar las máscaras.

¿Fue útil?

Solución

Tengo que admitir que no he usado los RadControls por algún tiempo, usamos el CMS RadEditor en algunos sitios de CMS, y eso podría recoger automáticamente sus hojas de estilo y agregar las clases a su lista, o usted podría agregar algunos manualmente.

Mirando la documentación, algunos bits pueden ayudar:

  1. Clases CSS RadEditor y sus Uso - ¿Aunque usualmente estos controles se agregan automáticamente, pensé?
  2. El enlace para 1. también te dice cómo hacerlo
  3. Un par de opciones
    • Archivos CSS externos , que indica " Por defecto, RadEditor para ASP.NET AJAX usa las clases CSS disponibles en la página actual & Quot ;, pero también muestra cómo cargar otras hojas de estilo.
    • Uso de ToolsFile.xml - Desplácese hacia abajo hasta < !> lt; clase > elemento.

Otros consejos

Solo quería agregar; FormDecorator solo aplica CSS a ciertos tipos de controles. Si tiene un control que no tiene estilo, puede acceder a los recursos de Telerik de esta manera:

Archivo .cs: tener una propiedad pública como la siguiente: 

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

}

En la página aspx (en un RadCodeBlock), solo tenga una hoja de estilo interna para leer de esa propiedad: 

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

Encontré esto muy útil para aplicar máscaras de Telerik al control que no es de Telerik de una manera que aún sería dinámica y cambiaría con cualquier cambio de máscara.

Como una actualización de este hilo, ahora hay un & "; Style Builder &" en línea; para las herramientas Telerik AJAX y MVC que permiten la configuración / personalización visual de las máscaras integradas:

http://stylebuilder.telerik.com/

Esta herramienta elimina la necesidad de comprender las definiciones de clase CSS para cada control y le permite personalizar fácilmente uno de los temas integrados para que coincida mejor con su sitio.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top