Add custom icon images to left menu - Revision history

bahtiar at 12:36, 24 November 2007

2007-11-24T12:36:38Z

← Older revision		Revision as of 12:36, 24 November 2007
Line 13:		Line 13:
	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:		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]		http://www.achievo.org/download/nightly


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

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

	'''4. Add your icons to the “menu” directory so you have:'''		'''4. Add your icons to the “menu” directory so you have:'''
Line 42:		Line 44:

	From the examples above, we can see that there are three formats supported:		From the examples above, we can see that there are three formats supported:
	Png		* Png
	Jpg		* Jpg
	Gif		* Gif

	'''5. Modify menu.tpl'''		'''5. Modify menu.tpl'''
Line 50:		Line 52:
	Replace:		Replace:

			<syntaxhighlight lang="php">
	{if (count($menuitem.submenu)>0)}		{if (count($menuitem.submenu)>0)}
	<div id="smi_{$menuitem.name}" class="submenuHover">		<div id="smi_{$menuitem.name}" class="submenuHover">
Line 62:		Line 65:
	</div>		</div>
	{/if}		{/if}
			</syntaxhighlight>

	With:		With:

			<syntaxhighlight lang="php">
	{if (count($menuitem.submenu)>0)}		{if (count($menuitem.submenu)>0)}
	<div id="smi_{$menuitem.name}" class="submenuHover">		<div id="smi_{$menuitem.name}" class="submenuHover">
Line 78:		Line 83:
	</div>		</div>
	{/if}		{/if}
			</syntaxhighlight>

	The menu.tpl file is located at:		The menu.tpl file is located at:
Line 108:		Line 114:

	Jorge Garifuna		Jorge Garifuna
	[http://www.GariSoft.com]		http://www.GariSoft.com

bahtiar at 12:35, 24 November 2007

2007-11-24T12:35:16Z

← Older revision		Revision as of 12:35, 24 November 2007
Line 1:		Line 1:
			{{howto\|easy\|Jorge Garifuna}}

	== Summary ==		== Summary ==

Jgarifuna at 23:37, 23 November 2007

2007-11-23T23:37:26Z

← Older revision		Revision as of 23:37, 23 November 2007
Line 86:		Line 86:

	From:		From:
			<syntaxhighlight lang="php">
	$config_menu_layout = "plain";		$config_menu_layout = "plain";
			</syntaxhighlight>
	To:		To:
			<syntaxhighlight lang="php">
	$config_menu_layout = "modern";		$config_menu_layout = "modern";
			</syntaxhighlight>
	'''7. Clear the theme cache'''		'''7. Clear the theme cache'''

	Remove all temporary theme files from:		Remove all temporary theme files from:

	atktmp\themes		''atktmp\themes''

	'''8. Test your icons'''		'''8. Test your icons'''

Jgarifuna at 04:40, 22 November 2007

2007-11-22T04:40:56Z

← Older revision		Revision as of 04:40, 22 November 2007
Line 81:		Line 81:
	atk\themes\YourTheme\templates\menu.tpl		atk\themes\YourTheme\templates\menu.tpl

	'''6. Clear the theme cache'''		'''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:		Remove all temporary theme files from:
Line 87:		Line 99:
	atktmp\themes		atktmp\themes

	'''7. Test your icons'''		'''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.		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.

Jgarifuna at 04:31, 22 November 2007

2007-11-22T04:31:27Z

New page

== 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. Clear the theme cache'''

Remove all temporary theme files from:

atktmp\themes

'''7. 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]