Hey Stephen,

Did you find a solution to this?

Matt

In 4.5 the standard umbraco sprites are defined in this css:
wwwroot\umbraco_client\Tree\menuIcons.css

if you add your own definition here like:

.menuSpr
{
  float: left;
  background-image: url(sprites.png);
   background-position: -7px -8px; 
  margin-top: 1px;
  width: 17px;
  height: 16px;
 margin: 1px 13px 1px 0px;
}

.sprNew
{
    background-position: -7px -339px;
}

it'll show up, but you should probably look into adding your own css to the backend instead to leave the standard umbraco stuff intact ;-)  -- especially if you are creating a package. I'm not sure exactly how to add your own css to work throughout the backend, but the standard tree uses ClientDependency to do so:

<umb:CssInclude ID="CssInclude3" runat="server" FilePath="Tree/menuIcons.css" PathNameAlias="UmbracoClient" Priority="11" />

taken from TreeControl.ascx in the umbraco.controls.Tree namespace.

Hope this helps you on the right track.

- Morten

Hey Morten,

Fix didn't work. Looking into it, it seems to be a little more involved as there is a CSS class always setting ins to display none. Disabling this does make the icon display, but it screws up the layout. Looking back at the source though in firebug, the markup for a standard item is:

<li>
  <a class="2 " rel="2" href="#">
    <ins>&nbsp;</ins>
    <span>
      <div class="menuSpr sprExportDocumentType"></div>
      <div class="menuLabel">Export Document Type</div>
    </span>
  </a>
</li>

Notice how the icon class is now on a div, inside the span and not on the ins element. Strangly this doesn't seem to be what is output by the js file, so I'm not sure if some other majic is going on.

Suggestion for adding a custom CSS file might be to hook into the umbracoPage.Load event and indect it? Though not sure if that applies to the tree side.

Matt

Hey Morten,

I reckon a change is needed in umbraco.controls.Tree in the Serialize method which is currently

if (action.Icon.StartsWith("."))
    {
        StringBuilder builder = new StringBuilder();
        builder.Append(string.Format("<div class='menuSpr {0}'>", action.Icon.TrimStart(new char[] { '.' })));
        builder.Append("</div>");
        builder.Append("<div class='menuLabel'>");
        builder.Append(dictionary["label"].ToString());
        builder.Append("</div>");
        dictionary["label"] = builder.ToString();
    }
    else
    {
        dictionary.Add("icon", action.Icon);
    }

As it's the divs in the first part is where the icons are actualy applied, i'd imaging you'd need something built up in a similar manor but with a BG image instead?

Matt

Ok, i'm trying to fix this by changing jquery.tree.contextmenu.js but for some reason changes aren't being applied, it's still using the same js as before even after app pool restart

This is what I'm trying to do

//if (opts.items[i].icon) str += "<ins " + (opts.items[i].icon.indexOf("/") == -1 ? " class=\"" + opts.items[i].icon + "\" " : " style=\"background-image:url('" + opts.items[i].icon + "');\" ") + ">&nbsp;</ins>";
//else str += "<ins>&nbsp;</ins>";
//str += "<span>" + opts.items[i].label + '</span></a></li>';
str += "<ins>&nbsp;</ins>";
str += "<span>";
if (opts.items[i].icon && opts.items[i].icon.indexOf("/") >= 0) {
   str += "<div class=\"menuSpr\" style=\"background-image:url('"+ opts.items[i].icon +"');\"></div><div class='menuLabel'>"+ opts.items[i].label +"</div>";
} else {
   str += opts.items[i].label;
}
str += '</span></a></li>'

I've commented out the old code, with new code below. So I am keeping the empty <ins> tag, and am recreating the divs the icon is an image, but this time with background-image style attribute.

I just need to figure out why this isn't updating on the site. How can you clear ClientDependacy cache?

Matt

For other people checkin in on this, the discussion started in this thread:
http://our.umbraco.org/forum/developers/extending-umbraco/10243-Custom-action-icons-in-context-menu-not-showing-up

and a codeplex issue has been created - please go vote it up: http://umbraco.codeplex.com/workitem/28119?ProjectName=umbraco

- Morten

Hey Guys,

I've come up with another fix, that theoreticaly, should work, even if the fix is applied, so you should be able to use custom icons now. Now it is a bit of a hack, but it does work.

Within your custom action, define your Icon as follows:

public string Icon
{
    get { return ".sprChangeMasterDocType' style='background: transparent url(/umbraco/images/umbraco/change_master_doc_type.png) center center no-repeat"; }
}

So, you first define a dummy class name, then inject the style tag to insert the custom icon.

Matt

Thanks Matt,

Just worked for me in v6.1.

is working on a reply...