3 Answers, 1 is accepted
0
Hi,
In this specific RadEditor dialog, there are several other controls included, such as - RadFormDecorator, RadSlider, RadSplitter, etc. In order to change all of them for the Editor dialogs only, you could create for all the controls custom skins. Registering an External Skin for RadEdiotr KB article will guide you through that process.
Another option, is to use DialogsCssFile property and to load an external CSS file through it, where you could override CSS for some specific elements loaded inside the dialog:
ASPX:
CustomDialog.css:
This is an example f how to override a few of the styles inside the Dialog. To make other overrides, you should inspect elements CSS carefully and to make the necessary corrections.
Note, that this is a custom solution and Telerik does not support custom solution. Even if we try to give the some help, it is a developer`s responsibility to ensure that after the customization the control will work properly.
Regards,
Bozhidar
the Telerik team
In this specific RadEditor dialog, there are several other controls included, such as - RadFormDecorator, RadSlider, RadSplitter, etc. In order to change all of them for the Editor dialogs only, you could create for all the controls custom skins. Registering an External Skin for RadEdiotr KB article will guide you through that process.
Another option, is to use DialogsCssFile property and to load an external CSS file through it, where you could override CSS for some specific elements loaded inside the dialog:
ASPX:
<body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadEditor id="re1" runat="server" DialogsCssFile="CustomDialog.css" Skin="Simple"> <ImageManager ViewPaths="~/" UploadPaths="~/" /> </telerik:RadEditor> </form></body>CustomDialog.css:
.DialogSeparator { background-color: red !important; border-left: 1px solid blue !important; border-right: 1px solid blue !important;}html.RadForm_Simple.rfdButton a.rfdSkinnedButton, html.RadForm_Simple.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover { border: 1px solid red !important;}.RadForm_Simple.rfdButton a.rfdSkinnedButton, .RadForm_Simple.rfdButton input.rfdDecorated[type="button"], .RadForm_Simple.rfdButton input.rfdDecorated[type="reset"], .RadForm_Simple.rfdButton input.rfdDecorated[type="submit"], .RadForm_Simple.rfdButton .rfdSkinnedButton button, .RadForm_Simple.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover, .RadForm_Simple.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover * { background: none repeat scroll 0 0 yellow !important; color: blue !important;}This is an example f how to override a few of the styles inside the Dialog. To make other overrides, you should inspect elements CSS carefully and to make the necessary corrections.
Note, that this is a custom solution and Telerik does not support custom solution. Even if we try to give the some help, it is a developer`s responsibility to ensure that after the customization the control will work properly.
Regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Shekhar
Top achievements
Rank 1
Rank 1
answered on 30 Oct 2012, 01:46 PM
But This Css is not loading on IE 9,8 etc ,but working fine in other browsers ,is there any way to do that.
0
Hello,
The code is tested and it works as expected in all modern browsers, including IE8, IE9.
Did you noticed that the CSS selectors placed in CustomDialog.css file are specific for Simple skin:
Kind regards,
Bozhidar
the Telerik team
The code is tested and it works as expected in all modern browsers, including IE8, IE9.
Did you noticed that the CSS selectors placed in CustomDialog.css file are specific for Simple skin:
.RadForm_Simple - and if you use skin different than Simple, you should change the selectors prefix. For example, if you use Default skin, the Selectors should be:.DialogSeparator { background-color: red !important; border-left: 1px solid blue !important; border-right: 1px solid blue !important;}html.RadForm_Default.rfdButton a.rfdSkinnedButton, html.RadForm_Default.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover { border: 1px solid red !important;}.RadForm_Default.rfdButton a.rfdSkinnedButton, .RadForm_Default.rfdButton input.rfdDecorated[type="button"], .RadForm_Default.rfdButton input.rfdDecorated[type="reset"], .RadForm_Default.rfdButton input.rfdDecorated[type="submit"], .RadForm_Default.rfdButton .rfdSkinnedButton button, .RadForm_Default.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover, .RadForm_Default.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover * { background: none repeat scroll 0 0 yellow !important; color: blue !important;}Kind regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.