Now it's time to customize Menu in your web application that generated with PHPMaker 9. We will add the icons (16 x 16 pixels) or small images as well as the icons on the menu items. Now you can beautify your menu display by adding the icons or images that sit on the left of the menu text. We will add the source code for this purpose from the PHPMaker application.
In addition, since PHPMaker 8+ has changed the css of its menu, there is a condition where you will see some blank space before the menu text item. I have found the solutions regarding .css modification in order to decrease the left-padding of the menu item, so that the menu item will not consume many blank space anymore before the menu text itself.
All we have to do is customizing the PHPMaker template file and also adding some modification from the Multi-Languages Property Editor section of PHPMaker. In other words, we will not customize the generated script files.
Updated on July 22, 2012: This customization has been implemented in PHPMaker version 9.0.3, it matches to each other, and as a result, it works properly.
Updated on September 5, 2012: This customization has been implemented in PHPMaker version 9.0.4, it matches to each other, and as a result, it works properly.
Updated on November 29, 2012: This customization has been implemented in PHPMaker version 9.1.0, it matches to each other, and as a result, it works properly.
Updated on February 9, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.
[hidepost]
-
Open your \Script\yui290\build\menu\assets\skins\sam\menu-skin.css file, and find this code (only for PHPMaker version < 9.2.0):
.yui-skin-sam .yuimenubaritemlabel { padding: 0 10px;
then replace it with this following code:
.yui-skin-sam .yuimenubaritemlabel { padding: 0 5px; /* Before: padding: 0 10px */
This modification for the parent menu; especially if you are using the horizontal menu layout.
-
Still in the same file at the step number one above, find again this code (only for PHPMaker version < 9.2.0):
.yui-skin-sam .yuimenuitemlabel { padding: 0 20px;
then replace it with this following code:
.yui-skin-sam .yuimenuitemlabel { padding: 0 15px 0 9px; /* Before: padding: 0 20px */
-
Open your \Script\yui290\build\menu\assets\skins\sam\menu.css file, and find this code (for PHPMaker version <= 9.2.0):
.yui-skin-sam .yuimenubaritemlabel{padding:0 10px;
then replace it with this following code:
.yui-skin-sam .yuimenubaritemlabel{padding:0 5px;
This modification for the sub-menu; either if you are using the horizontal or vertical menu layout. You will see that the difference between the parent and the child menu is 2px (7px minus 5px). This will make the indentation for your sub-menu against its parent menu.
-
Still in the file at the step number three above, find again this code (for PHPMaker version <= 9.2.0):
.yui-skin-sam .yuimenuitemlabel{padding:0 20px;
then replace it with this following code:
.yui-skin-sam .yuimenuitemlabel{padding:0 15px 0 9px;
- Go to your PHPMaker application, and click on Tools menu, and then click on Multi-Language Property Editor, and you will see a Multi-Language Property Editor window appears.
-
On the left pane, click on the Menu Text item, then you will see on the right pane, there are some menu items you have. Change the menu text by adding the image tag to the proper image or icon.
For example, this is the code of your menu item which has been added an icon named customer.ico into one of a menu item named Customers:<img src='phpimages/customer.ico' border='0' style='vertical-align:middle' > Customers
It is strongly recommended that this .ico file is a 16 x 16 pixels; with Horizontal/Vertical Resolution = 96 dpi; Bit Depth 32; Frame Count = 1. Don't forget to copy that customer.ico file into your \Script\images\ sub-directory of your unzip template files, because this file will be used by your menu starting today. Please note, since PHPMaker 8+, the location of all your images should be placed in /phpimages/ sub-directory under your root web application instead of the old one; /images/.
- Re-generate all of your script files, then you will see the result. Enjoy it! 😀
[/hidepost]
Claudiu Banut says
Any workaround for 8.x version to use icons in menu?
Masino Sinaga says
Sorry, I won’t try it in the older version anymore. I suggest you to upgrade to the latest version. Many advantages you will get when you use the latest version.
Masino Sinaga says
However, if you are still using 8.x version, follow this article: How to Add Icon on Menu in Website Created With PHPMaker 8.0.3.
Claudiu Banut says
Thanks, I found it alaready. How about changing the menu background color and font color? For background I found .yui-skin-sam .yuimenu .bd {
background-color: #426FD9;; in the ewmenu.css but the font color of the menu?
Masino Sinaga says
Simply customize your phpcss/ewmenu.css file.