How do I change the default widget icon for a custom user control? - General Discussions - General Discussions - Progress Community
 General Discussions

How do I change the default widget icon for a custom user control?

  • How do I change the default widget icon for a custom user control?
  • 248532_how-to-change-control-icon.png
    How do I change the default widget icon in the "Drag Widgets" pane for a custom user control that I have built and installed? The default icon is a dashed square. I would like to provide my own image instead.
  • 249141_cssclass.png
    Hi Dan,

    When you register a widget you can set the CssClass property. You should load the css class on the page. This will allow you to set image url.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Cool - that works for any of the built in icons. Is there a way for me to append my own icon to that sprite sheet or do I need to include a separate icon image in the CSS?
  • Hi Dan,

    You should load your custom stylesheet where you reference your image. This will allow you to override the default image.

    All the best,
    Ivan Dimitrov
    the Telerik team
  • Hello admin

    Can you publish a css  demonstrating how we can accomplish that?

    Thanks a lot

    Thiago Santos
  • Hi ,

    If you are going to use sprite images you should set background with an !important for the following classes

    RadDock_Sitefinity .rdTable .rdTitleBar div

    All the best,
    Ivan Dimitrov
    the Telerik team
  • Has anyone found an example of this?
  • this is what I do:

    i. put this in a .css file (embedded in dll, so the WebResource instruction is subtituted)
    .sfWidgetsWrp div.BannerImage           width:195px;height:40px;min-height:40px;margin:0px; background-image: url('<%=WebResource("Namespace.Resources.icon.png")%>') !important; background-repeat:no-repeat !important;

    ii. while I'm at ToolboxesConfig.config, I set cssClass to "BannerImage"

    iii. you need to figure out how to load the css file in the designer... what I do is I include a widget in the template so it'll load on all the pages, which will pull the css file into context.