Try Now
More in this section

Forums / Designing with Sitefinity / RadEditor: How to use images for enumeration?

RadEditor: How to use images for enumeration?

2 posts, 0 answered
  1. Carsten Koster
    Carsten Koster avatar
    12 posts
    05 Sep 2006
    25 Aug 2009
    Link to this post
    Hello everyone,

    I want to embed my own icons for enumeration in the RadEditor. I can't find a way to get make this happen.

    I successfully embedded my own paragraphs, css classes (and so on..) with the help of the EditorToolsFile.xml.

    My goal is this: you simply mark your text and choose a css-class (e.g. icon1) and this css-class/enumeration takes care of the rest.

    Currently I tried it this way, but the images doesn't get shown (even if I enter "url("../icons)" or "url("projectname/icons")...

    style_telerik.css (file):

    .icon { 
            background: transparent url(“~/icons/enum/nav_up_right_green.png”) no-repeat 0px 50%; 
            padding-left: 20px; 


      <class name="icons" value=".icon" /> 
        <item name="~/App_Themes/xxxxxxx/css/style_telerik.css" /> 

    Another way was to create a dropdown field in the toolbar of the RadEditor. The images get shown, but the drag & drop logic behind is missing and I'm not sure where I have to put it :)

        <tool name="Icons" Name="icons" type="dropdown" PopupWidth="200px" PopupHeight="150px"
         <item name="&lt;img src='/projectname/icons/enum/nav_up_right_green.png'/> " value="~/icons/enum/nav_up_right_green.png" /> 
         <item name="&lt;img src='/projectname/icons/enum/nav_up_right_red.png'/> " value="~/icons/enum/nav_up_right_red.png" /> 

    I hope you can follow me :) Every answer is gladly appreciated.

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    19 Oct 2016
    28 Aug 2009
    Link to this post
    Hello Carsten Koster,

    Can you try the following way:

    1. Crate a simple css class under your Theme folder ( App_Themes/MyTheme)

        background-color: Lime; 

    2. In this folder - MyTheme create new folder - Images ( so you will have the following structure MyTheme/Images.

    In Images folder put your image.

    3. Then load the css file and our img class.

     public void Page_Load(object sender, EventArgs e) 
            textEditor.CssClasses.Add("Img Class"".img");  

    Sincerely yours,
    Ivan Dimitrov
    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.
2 posts, 0 answered