[Solved] Unable to Display Custom Images From Editor

[Shawn]

I have a read editor that uses a toolbar from an xml - this works fine.  I am trying to display icons for the 2 tools I have created but cant get them to display properly - what am I doing wrong here?

Toolbar XML File:

 <tools name="Database" dockable="true" dockingZone="Top" enabled="true">
        <tool name="InsertImage" Text="Insert Dealer Image" value="[d_logo]" />
        <tool name="InsertDBColumns" type="dropdown">
            <item name="First Name" value="[first_name]"></item>
            <item name="Last Name" value="[last_name]"></item>
            <item name="Address" value="[address]"></item>
            <item name="City" value="[city]"></item>
            <item name="State" value="[state]"></item>
            <item name="Zip Code" value="[zip]"></item>
            <item name="Contact Person" value="[contact]"></item>
            <item name="Contact Email Link" value="[email]"></item>
            <item name="Contact Phone #" value="[phone]"></item>
            <item name="Contact Phone Ext." value="[contact_ext]"></item>
        </tool>
    </tools>

Styles From Page Header:

    <style type="text/css">

    .reToolbar.Sunset .InsertImage
    {
        background-image:url(../images/img_icon.gif);
    }
    .reToolbar.Sunset .InsertDBColumns
    {
        background-image:url(../images/db_icon.gif);
    }

    </style>

EDITOR:

<telerik:RadEditor ID="editor_DBEDITS" runat="server" Height="400px"
                                    Skin="Sunset"
                                    ToolsFile="UserControls/EditorToolbar.xml" Width="700px" OnClientCommandExecuting="OnEditorExecuting">
                                    <Content>
</Content>
                                </telerik:RadEditor>

[Martin]

Hello Shawn,

The weight of the CSS selector you are using is not enough heavy, and that is why it is overriden by CSS inheritance in our skin. You need to force your custom button settings by using the !important flag, i.e:

element
{
    property: value !important;
}

Please, have in mind that most probably you will need to use CSS background-position and background-repeat: no-repeat in order to position the image to the correct place inside the button.

Sincerely yours,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Shawn]

This isn't working:

    .reToolbar.Sunset .InsertDealerImage
    {
        background-image:url(../images/img_icon.gif) !important;
    }
    .reToolbar.Sunset .InsertDatabaseColumns
    {
        background-image:url(../images/db_icon.gif) !important;
    }

What am I doing wrong?

[Martin]

Hi Shawn,

Did you set CSS background-repeat and background-position as I have advised you in my previous email?

Please, have in mind that most probably you will need to use CSS background-position and background-repeat: no-repeat in order to position the image to the correct place inside the button.

You need to override these two properties as well. If you do not manage to put thibgs to work, send me a small running project - a page with RadEditor, your tools file and the two images for the custom commands.

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.