This following modification will add the icons (16 x 16 pixels) or small images as well as the icons on the menu items in websites that created with PHPMaker. 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 the menu, there is a condition where you will see some blank space before the menu text item. I have found solutions regarding css modification in order to decrease the left padding of the menu item, so that it will not use 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.
Please click on the following image to watch the demo:
[hidepost]
-
Open your \Script\yui290\build\menu\assets\skins\sam\menu-skin.css file, and find this code:
.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:
.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:
.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:
.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]
Arab Salem says
Working perfectly. Thanks 🙂
Masino Sinaga says
You are very welcome. Glad to hear good news from you.
Thanks for letting us know. 🙂
Ahmad Ibrahim says
count records at each menu item like customers(20) please help thanks
Masino Sinaga says
You may use “Menu_Rendering” server event to manipulate the menu items. Please read “Server Events and Client Scripts” in the help file from PHPMaker for more information.