How to Customize Menu in Websites that Created with PHPMaker 9.0.2

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]

1. 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.

2. 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 */
   

3. 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.

4. 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;
   

5. 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.
6. 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/.

7. Re-generate all of your script files, then you will see the result. Enjoy it! 😀

[/hidepost]