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.

Answer 3

In case you want to reuse an image of the current CME (Content Manager Explorer) you can use the following:

#PT_PagePublisher.item .image
{
    background-image: url({ThemePath['CME']}/Sprites/cme_5_v6.1.0.55920.0_.png);
    background-position: 0px -480px;
    height: 16px;
    width: 16px;
}

This example shows the publish icon from a 2011 SP1 install. So you can use {ThemePath['EditorName']} to access the theme path of any editor which is configured actually.

Also in some cases I have found that my images would not load on either the ribbon toolbar or the context menu, that appeared to be an authorization issue on the editors virtual directory in IIS.

I solved it by adding a Web.config file to my Theme (root) directory which will allow access to all users for the theme files (css and images).

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.web>
        <!-- allow all users access to theme files -->
        <authorization>
            <allow users="?" />
        </authorization>
    </system.web>
</configuration>