[Solved] ToolsFile.xml: iconurl

[Andreas Kaech]

Why you implemented the attribute "iconurl" in ToolsFile.xml?
Playing around with this attribute has no success and all help articles take the CSS-way:
.rade_toolbar.<skinName> .<commandName>
{
   background-image: url(MyImage.gif);
}
Thanks for "enlighten" me ;-)

[Rumen]

Hi Andreas,

In order to optimize the editor loading and performance we implemented its toolbar icons with a single sprite image instead of loading dozens of smaller ones. For that reason the new toolbar rendering mechanism does not support any more the IconUrl property and you should use the CSS based mechanism to set icons with styles.

.rade_toolbar.<skinName> .<commandName>
{
   background-image: url(MyImage.gif)

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Andreas Kaech]

Hi Rumen,
thanks for replying.
Now a problem occurs.
I implemented successfully my own button (with custom image :-).
But when I define this button in the ContextMenu, two things happen:
1) error, because the button-name is not registered in "RadEditor.Tools.resx" - ok, after registering, the error has gone.
2) the image cannot be found - but it is successfully implemented via .rade_toolbar.<skinName> .<commandName>

What to do?
Best regards,
Andreas

[Rumen]

Hi Andreas,

Straight to the points:

1. If you set the Text attribute in the custom button tag, you will avoid registering the localization string in the RadEditor.Tools.resx file:
   
   <telerik:EditorTool Name="Custom1" Text="Custom Button"/>
2. To display the custom context menu icon you need to set !important after the value of the background-image property:
   
   <style>
   .rade_toolbar.Default .Custom1
   {
          background-image: url(http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif) !important;
   }
   </style>

This should do the trick.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Andreas Kaech]

Hi Rumen,
yes, this did the trick :-)
One (last?) question:
Are there general rules, when to set the !important keyword?

Best regards,
Andreas

[Rumen]

Hi Andreas,

I am glad that the provided suggestions helped.

You can find the answer of your question in the following site:
What is the !important CSS rule?

You can use the !important rule when you want to set higher priority to some css property and to prevent another one to override it.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center