Custom Tools images when using Ribbon Bar

3 posts, 1 answers
  1. Ryan
    Ryan avatar
    7 posts
    Member since:
    Aug 2012

    Posted 24 Apr 2012 Link to this post

    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:
            <module name="RadEditorStatistics" dockingZone="Bottom"/>      
        <tools name="Save" tab="Home">
            <tool name="SaveSubSection" shortcut="CTRL+S" showtext="false"/>

    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?

  2. Answer
    Rumen avatar
    14361 posts

    Posted 25 Apr 2012 Link to this post


    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:

    Kind regards,
    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. Ryan
    Ryan avatar
    7 posts
    Member since:
    Aug 2012

    Posted 25 Apr 2012 Link to this post

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