[Solved] problem getting custom images to appear for custom toolbar buttons in radEditor

[Joseph Alfano]

Hi,

We are using RadControls "Prometheus", with a version of 2007.3.1425.35 for Telerik.Web.UI.dll.  I am using the RadEditor, and adding a custom toolbar button via modifying the ToolsFile.xml file.  I would like to use a custom image for the custom toolbar button.

I can get everything to work when the Skin of the RadEditor is set to Web20.  I do the following:

1) Set up my ToolsFile.xml file as follows:

 

 

<root>
  <tools>
  <tool type="custom" name="NewCustomButton" Text="Add Premium Image"/>
  </tools>
</root>

2) Add the following style to the ASPX page:

    <style>
        .retoolbar.Web20 .NewCustomButton
        {
           background-image: url(../../images/icons/flag-g.gif);
        }

    </style>

(I also have tried naming the style .rade_toolbar.Web20 .NewCustomButton, and that works also.  Your documentation seems to suggest that you can name it either way.)

3) And finally, add the control to the page:

                 <telerik:radeditor ID="RadEditor1" runat="server"
                    ToolsFile="~/XMLConfigFiles/ToolsFileDemo.xml" EditModes="All" Height="400px"
                    Skin="Web20" ToolbarMode="ShowOnFocus" Width="670px">

                 </telerik:radeditor>

This works fine for the Web20 skin.  However, when I change to a different theme, such as WebBlue, and rename the css style to .retoolbar.WebBlue .NewCustomButton, the image does not appear on the toolbar.  When I look at the HTML that gets generated by the radEditor, it seems that if the Web20 code works, the WebBlue code should work also.

Please let me know how I can get the custom button to appear for the WebBlue skin.

If you need any more information from me or if you'd a more complete code sample, please just let me know.

Thanks so much for the assistance!

Joe

[Joseph Alfano]

After poking around your forums, I found a reference for a similar problem here. As the post suggested, I used the CSS  !important flag to increase the weight of the style rule, and the image started to appear in the WebBlue skin.  So I think my problem is resolved. 

Thanks.

Joe