This is a migrated thread and some comments may be shown as answers.

Image Manager Dialog Customization

3 Answers 179 Views
Editor
This is a migrated thread and some comments may be shown as answers.
AB
Top achievements
Rank 1
AB asked on 04 Jun 2012, 09:31 AM
Hello, how can I change the colors of this dialog (borders and backgrounds) for the Simple skin?

How can I change the fonts of the labels?

Thank you

AB

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 06 Jun 2012, 02:38 PM
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:

<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
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
Bozhidar
Telerik team
answered on 31 Oct 2012, 07:27 AM
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: .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.
Tags
Editor
Asked by
AB
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Shekhar
Top achievements
Rank 1
Share this question
or