Add custom icon images to left menu

From Achievo/ATK Wiki

Summary

Starting from ATK 6.2 a new feature has been added to ATK by Lineke to include icon images to the left menu items. Below I intend to show how to take advantage of this new feature to beatify the left menu of ATK applications.

Requirements

ATK 6.2+

If this version is not officially released at the time of this reading, you may download the latest nightly build after November 21, 2007 from:

http://www.achievo.org/download/nightly

Implementation

1. Create theme directory within your module:

yourModule/themes/default/icons/menu

2. Create the “themedef.inc” file within the default directory so you have:

yourModule/themes/default/themedef.inc

3. Add the following code to the newly create “themedef.inc” file:

<?php
   $theme["menu_icons"] = 'icons/menu/';
?>

4. Add your icons to the “menu” directory so you have:

yourModule/themes/default/icons/menu/yourModule_menuLabel.png

For example, if you had a module called “Garifuna” and a menu item with the display label “software”, your icon should be named “Garifuna_software.png” or “Garifuna_software.jpg” or “Garifuna_software.gif”. The above path would now look like:

yourModule/themes/default/icons/menu/Garifuna_software.png

From the examples above, we can see that there are three formats supported:

• Png
• Jpg
• Gif

5. Modify menu.tpl

Replace:

  {if (count($menuitem.submenu)>0)}
    <div id="smi_{$menuitem.name}" class="submenuHover">
      {$menuitem.header}
      {foreach from=$menuitem.submenu item=submenuitem}
         {if $submenuitem.enable && $submenuitem.name!=='-'}
           <a class="menuItemLevel2" onclick="window.open('{$submenuitem.url}','main','')" onmouseover="this.style.cursor = 'pointer'; this.style.color = '#9a1010';" onmouseout="this.style.color = '#414141';">
             {$submenuitem.name}
           </a>
         {/if}
      {/foreach}
    </div>
  {/if}

With:

  {if (count($menuitem.submenu)>0)}
    <div id="smi_{$menuitem.name}" class="submenuHover">
      {$menuitem.header}
      {foreach from=$menuitem.submenu item=submenuitem}
         {if $submenuitem.enable && $submenuitem.name!=='-'}
           <a class="menuItemLevel2" onclick="window.open('{$submenuitem.url}','main','')" onmouseover="this.style.cursor = 'pointer'; this.style.color = '#9a1010';" onmouseout="this.style.color = '#414141';">
               '''{if isset($submenuitem.image)}<img src="{$submenuitem.image}">{/if}'''
             {$submenuitem.name}
           </a>
         {/if}
      {/foreach}
    </div>
  {/if}

The menu.tpl file is located at:

atk\themes\YourTheme\templates\menu.tpl

6. Change menu layout to “modern”

Change the following line on the config.inc.php file:

From:

$config_menu_layout = "plain";

To:

$config_menu_layout = "modern";

7. Clear the theme cache

Remove all temporary theme files from:

atktmp\themes

8. Test your icons

To test your icons, reload the left menu and if everything was done right, you should be able to see the icons next to the menu item.

Until next time,

Jorge Garifuna http://www.GariSoft.com