RenderMode=auto and (icons for) custom dialogs

[Marja]

When adding custom dialogs (as explained at http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/dialogs/custom-dialogs) we provide a toolbar icon for each dialog.

Those custom icons are used in the default 'classic' rendering mode of the editor. 
But... when using RenderMode=auto, those icon-images are replaced with gear wheels.

How can we provide our own icons for other rendering modes than the 'classic' mode?

 

[Ianko]

Hi Marja,

With the Lightweight rendering switched to the rendering of RadEditor, its dialogs and all elements are different now. Thus, you should update the CSS that decorates the icons according to the new rendering. 

Can you please, provide a simple markup example of the customization you have on your end, so that I could better understand which icons have been customized? And suggest you possible CSS rules that you can use for the new rendering.

Regards,
Ianko
Telerik

[Marja]

No need to provide our own example, as we've implemented our custom dialogs as explained in the Telerik documentation at http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/dialogs/custom-dialogs
You can see what we've done and how we've done it there.

So if you can point me to documentation about the new Lightweight way of working, I would be much obliged.

[Ianko]

Hello Marja,

I am sorry, I was confused that the dialog icons need customization. 

With Lightweight rendering mode, you can use these styles:

<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="InsertSpecialLink" Text="Insert Special Link" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
        Sample Content
    </Content>
</telerik:RadEditor>

<style type="text/css">
.reToolBar .reTool.reInsertSpecialLink {
    background-image: url(http://demos.telerik.com/aspnet-ajax/editor/examples/customtools/Icons/custom.gif);
    background-repeat: no-repeat;
}

    .reToolBar .reTool.reInsertSpecialLink:before {
        display:none;
    }
</style>

Regards,
Ianko
Telerik