Custom Tools images when using Ribbon Bar

[Ryan]

Hi there,

I have set up a Rad Editor and created a custom tool to handle the saving function.

I got all functionality working and the tool icon was displaying correctly with my own custom logo which was specified with the following css:

.reTool .SaveSubSection
{
   background-image: url(../Images/save_Icon.png) !important;
}

I then moved onto using a full tools.xml file using the ribbon bar feature. 

Here is a section showing my custom tool declaration:

<root>
    <modules>
        <module name="RadEditorStatistics" dockingZone="Bottom"/>
    </modules>
    <tools name="Save" tab="Home">
        <tool name="SaveSubSection" shortcut="CTRL+S" showtext="false"/>
    </tools>
</root>

The button still produces the required functionality, however my custom logo does not show, it has been replaced with the "i" in a speech bubble icon.

How does my CSS have to change to get custom icons when using the rad ribbon bar within the Rad Editor?

Regards
Ryan

[Rumen]

Hi,

All you need to set an icon for the Ribbonbar's custom button  is to set the ImageUrl attribute in the ToolsFile.xml file, e.g.

<tool name="AddFields" shortcut="Ctrl+L" ImageUrl="~/Images/Fields.gif"/> 

You can find more information in the following document: Adding-Custom-Button-in-RadEditor-RibbonBar.zip.

Kind regards,
Rumen
the Telerik team

[Ryan]

Thanks for that. It's simple when you know how.