This is a migrated thread and some comments may be shown as answers.

[Solved] Change Custom Tool Icon

8 Answers 333 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Tom asked on 15 May 2008, 03:30 PM

How do I add a custom tool icon?

Here's what I have so far:

@ Page Language="C#" AutoEventWireup="true" CodeFile="RadEdit.aspx.cs" Inherits="RadEdit" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html>
<head>
<style>
body{background-color:#f0f0f0;}

.FieldLabel{background-image: url(FieldLabel.gif);}

</style>
</head>
<body>
<form runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<telerik:RadEditor ID="RadEditor1" runat="server" Skin="WebBlue" ToolsFile="FormTools.xml"></telerik:RadEditor>
</form>
<script>
Telerik.Web.UI.Editor.CommandList["FieldLabel"] = function(commandName, editor, args) { editor.pasteHtml("<span id=\"FiledLabel\">Field Label</span>"); }
</script>
</body>
</html>

FormTools.xml:

<root>
<tools name="CustomTools" dockable="true" enabled="true">
<tool name="FieldLabel" />
</tools>
</root>

Everything works except that the default icon is not replaced by FieldLabel.gif.

Please, No Themes, Skins, Subdirectories, dropdown listboxes or any other code that might confuse the issue. It seems to me to be how the tool is referenced in the <style> tag.

8 Answers, 1 is accepted

answered on 15 May 2008, 05:02 PM

Hi Tom,

This is just a template:

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

where the <skinName> string means the name of the used editor skin, for example if you use the Default skin you should replace .rade_toolbar.<skinName> with this one: .rade_toolbar.Default.

The <commandName> string means the commandName of the button, in your case it is FieldLabel
that is why you need to replace <commandName> with FieldLabel, e.g.

<style>
.rade_toolbar.Default .FieldLabel
{
background-image: url(http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif);
}
</style>

Let me know if you need additional help.

Greetings,
Rumen
the Telerik team

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

answered on 15 May 2008, 08:55 PM

Thanks for your prompt replies. However, it seems I have found a bug in your RadEditor.

My source code references skin="WebBlue" and a GIF file in the same directory as the ASPX page and the XML file.

If I change this to Default and use a web url, the icon is replaced as it should.

If I reference any other skin, it does not work.

If I reference any local file, instead of a Web url (http:...), it does not work.

I have tried every combination skins and file paths I can think of, including none at all. Nothing works but the remote gif and .rade_toolbar.Default .FieldLabel

answered on 16 May 2008, 01:48 PM

Figured it out! As I was looking through the telerik Source Code and found the problem. It is located between lines 9191-9201 in RadEditor.js. (probably best not actually post source code). It shows that if the skin is default just return "Default" but if the skin is anything else to return "radeditor." + skin.

So in my style I simply called it

.radeditor.radeditor.Vista .FieldLabel

And it worked! So when using a skin other than default you need to say "radeditor" twice.

Anyways I think that is the only problem. I would run this by the developers at telerik as a possible bug.

Thanks