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

Unable to Display Custom Images From Editor

3 Answers 59 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 1
Shawn asked on 24 Jun 2009, 06:06 PM
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> 




3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 25 Jun 2009, 09:09 AM
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.
0
Shawn
Top achievements
Rank 1
answered on 29 Jun 2009, 04:59 PM
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?


0
Martin
Telerik team
answered on 02 Jul 2009, 06:40 AM
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.
Tags
Editor
Asked by
Shawn
Top achievements
Rank 1
Answers by
Martin
Telerik team
Shawn
Top achievements
Rank 1
Share this question
or