Image Manager Dialog Customization

4 posts, 0 answers
  1. AB
    AB avatar
    26 posts
    Member since:
    Jan 2010

    Posted 04 Jun 2012 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 06 Jun 2012 Link to this post

    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.
  3. Shekhar
    Shekhar avatar
    1 posts
    Member since:
    Sep 2012

    Posted 30 Oct 2012 Link to this post

    But This Css is not loading on IE 9,8 etc ,but working fine in other browsers ,is there any way to do that.
  4. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 31 Oct 2012 Link to this post

    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.
Back to Top