Within a Tridion GUI Extension, how to add an icon to the context-menu?

Question

How do I add an icon to my Tridion 2011 GUI Extension context-menu item?

Is it in the theme or GUI Extension config?

Is the size 16px?

Answer 1

Yes the icon is 16 x 16.

I've always done it using CSS, I hope this explanation makes sense:

1) In your editor.config, you specify the css file and other resources you need

<cfg:groups>
  <cfg:group name="PowerTools.Resources.Base" merge="always">
    <cfg:fileset>
        <cfg:file type="style">/PowerTools/Client/Shared/Theme/styles.css</cfg:file>

2) When you configure the context menu, you have the ID attribute in the ContextMenuItem (shown below as PT_PagePublisher)

<ext:contextmenus>
  <ext:add>
    <ext:extension name="PowerToolsContextMenu" assignid="PowerToolsContextMenu" insertbefore="cm_refresh">
      <ext:menudeclaration externaldefinition="">
        <cmenu:ContextMenuItem id="PowerToolsMenuGroup" name="Power Tools">
          <cmenu:ContextMenuItem id="PT_PagePublisher" name="Page Publisher" command="PT_PagePublisher"/>

3) In your CSS file you'll have something like:

.PT_PagePublisher .image {background-image:url({ThemePath}/Icons/pagepublisher_16.png);}

See how the name of the CSS class (PT_PagePublisher) maps to the ID in the ContextMenuItem node.

I hope this helps!

Answer 2

You use the theme CSS. I have the following in the CSS for an extension in my dev image:

.tridion .contextmenu #TweetThis .image
{
    background-image:url({ThemePath}/images/icons/twitter-icon16x16.png);
}

TweetThis is my context menu item id, as deifined in the extension config.