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

[Solved] Need help with CSS and Custom Tool

3 Answers 113 Views

Editor

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

Pat Huesers asked on 04 Sep 2009, 08:22 PM

I am trying to get radEditor to show a custom Icon in the tool bar and am having no luck. The issue is I am clueless as how CSS works!

Here is what I have
ASPX Code

telerik:RadEditor ID="reBody" Runat="server" Width="900px"

ToolsFile="toolsfile.xml" OnClientCommandExecuting="OnClientCommandExecuting">

<Tools>

<telerik:EditorToolGroup >

<telerik:EditorTool Name="InsertOEMInterchange" Text="Insert OEM Interchange List" />

</telerik:EditorToolGroup>

</Tools>

Content>

telerik:RadEditor>

The Icon Image is located at

/APP_Themes/Skins/Default/Editor/OEMInterchange.gif

I have tried placing this CSS code (and other variants!)

.rade_toolbar.Default

.InsertHollInterchange

{

}

.rade_toolbar.Default .InsertOEMInterchange

{

}

.reTool .InsertHollInterchange

{

}

.reTool .InsertOEMInterchange

{

}

in the Following CSS files

/App_Themes/Skins/Editor.css
/App_Themes/Skins/Default/Editor.css

The editor is set for the Default skin.

This is on a master / content page.

I also stuck this in the master and the content page.
<style type="text/css">

.reToolbar.Default.InsertOEMInterchange

{

}

</style>

But no matter what I do I cannot get the icon to show up. I really need help! What am I doing wrong?

Thanks in advance.

3 Answers, 1 is accepted

answered on 07 Sep 2009, 07:22 AM

Hello Pat Huesers,

Everything with your CSS seems fine, however I cannot be sure because the code you have pasted is not well-formatted. The approach you have used is correct, which makes me believe that issue is either in the weight of your selector (although you have forced the icon URL with !important, our selector may still be heavier) or the path to the images is incorrect. That's why I'd like to ask you for a sample project - include a page with RadEditor and your App_Themes folder and I will do my best to help.

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 10 Sep 2009, 08:03 AM

Hello Pat Huesers,

Here is the CSS that fixes the issue you were experiencing:

<style type="text/css">
span.InsertHollInterchange,
span.InsertOEMInterchange
{
background-image: url('App_Themes/Skins/Default/Editor/OEMInterchange.gif') !important;
}
</style>

In short - your CSS was okay, however you added it in the external .css for RadEditor, which is loaded only when EnableEmbeddedSkins and EnableEmbeddedBaseStylesheet are set to false, i.e. when you are using a custom skin. In your case, the CSS file was not loaded at all, and therefore, your setting for custom commands was not applied.

Another one, not related to directly to your question - in the thread info, I read that you are using 2009.2 826, however theassembly version of the .dll in the project you sent is 2008.3.1105.35. If you intend to upgrade, or your real project is really using 2009.2 826 the fix may need to be changed (probably).

Sincerely yours,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.