Difference between revisions of "Build a New Menu"
Latest revision as of 16:11, 6 December 2008
Genealogy is what is in your database; the names, facts, and events. Of course, you can put stories in notes, but sometimes you wish to have separate pages where you can, for example, detail a family history, present images with commentary, or have a links page. With this tutorial, you will learn how to modify PhpGedView to show a custom menu linking to custom pages with the standard PhpGedView header and footer.
Add a new Menu
Before you make any changes, please save the theme "Cloudy" and work only on a renamed copy of it.
You will find the relevant PHP-code in the file "header.html".
Because every theme has its own menu-system, we will show you the essential changes as an example for the theme "Cloudy".
In my case, I have set the variable for User-may-change-Themes to "no" and Standard-Theme to "Cloudy".
The "header.html" for "Cloudy" you will find in the following path:
Open the file with an html-editor or with a simple text-editor.
Search for the first entry like:
The following lines build the first menu-point in PGV, shown in the PGV-page by the "Home"-icon.
All the stuff from this Home-menu (plus its submenus) is enclosed between "<td>" and "</td>" -tags.
Every next "<td>...</td>" -block encloses such a menu-icon with the concerning submenus.
A dozen menu-items are enclosed in a "<table>...</table>" -tag.
The general menu-structure looks like this:
<table> <tr> <td> 1. menu-item (with all submenu-items) </td> </tr> <tr> <td> 2. menu-item (with all submenu-items) </td> </tr> </tr> <td> maybe your own new menu-item (with all submenu-items) </td> </tr> <tr> <td> last menu-item (with all submenu-items) </td> </tr> </table>
The code for the menu and the submenus looks like this:
<?php $menu = array(); $menu["label"] = "..............."; $menu["labelpos"] = "none"; $menu["icon"] = "..............."; $menu["class"] = "menuitem"; $menu["hoverclass"] = "menuitem_hover"; $menu["flyout"] = "down"; $menu["submenuclass"] = "submenu$ff"; $menu["items"] = array(); $submenu = array(); $submenu["label"] = "..............."; $submenu["labelpos"] = "right"; $submenu["icon"] = "..............."; $submenu["link"] = "..............."; $submenu["class"] = "submenuitem$ff"; $submenu["hoverclass"] = "submenuitem_hover$ff";
With "copy and paste" take this code above and put it between two -blocks, where you would place your new menu-item, as shown in the general menu-structure above.
Now we will learn how you can change the essental code-lines to do what you want to do.
You have the $menu-block, which builds the upper-icon you will see on the PGV-page
and the $submenu-block, which builds the popup-menu with the submenu-entries on the PGV-page.
You can copy this $submenu-block as many times as you need, there is one block for every submenu-entry.
The print_menu-line prints the menu-item (including the submenu-items) to the PGV-page.
Find an meaningful label for every menu and submenu-entry, for example "my Family" and "where they came from" and write it like this:
$menu["label"] = "my Family";
$submenu["label"] = "where they came from";
Design a new menu-icon with a drawing-program or you will find an existing one with Google.
Store it with a new name for example "newmenuicon.gif" in the following path:
and call it in the code like this:
$menu["icon"] = "themes/cloudy/images/newmenuicon.gif";
You can also just use the icon PhpGedView uses for the Welcome Page.
Open an External Link
To open an external link in the same browser-window:
$submenu["link"] = "http://www.frappr.com";
To open an external link in a new browser-window:
$submenu["link"] = "http://www.frappr.com\" target=\"_blank\"";
To open an external link in a popup-window:
$submenu["link"] = "#\" onclick=\"window.open('http://www.frappr.com','',' left=50,top=50,width=600,height=320,resizable=1,scroll bars=1'); \"";
left = distance of the windows from left sideborder
top = distance of the windows from upper sideborder
width = width of the windows
height = height of the windows
scrollbars = 1 with scrollbars
scrollbars = 0 without scrollbars
Build a new HTML page
Write an HTML (or PHP) page in the usual manner and include all the stories about your family you want to show your users. Create a "pages" directory in your PhpGedView installation, and place the file here. For example, save it as http://www.mysite.com/phpgedview/pages/mypage.html.
Display the HTML page
I am not a PHP developer and cannot vouch for the security of this method. Alternately, you can create a separate page containing all the surrounding code for each page you want to make. Create a file named page.php in your PGV base installation directory, containing this text:
<?php require("config.php"); print_header("PhpGedView Page"); ?> include("pages/".$_GET["page"]); print_footer(); ?>
You can then display your pages by going to http://www.mysite.com/phpgedview/page.php?page=mypage.html. It will be shown with the standard PGV header and footer. If you want to format all your pages a certain way, like with a block similar to those on the Welcome Page, you can put the code around the include("pages/".$_GET["page"]); line, so you don't have to write it in every html file.
PGV-Sites with new Menu and Stories around
CMS-Sites with PGV inside (see also an introduction of this)
- Example from Laurie (Joomla!)
- Example from Bernd (Joomla!)
- Example from Nigelo (HTML, Theme "Wooden")
- Example from Nigelo (Joomla!)
This is a link to How to customise themes
This is a link to How to customise themes - Tutorials
This will take you to another sub heading item
--Laurie Lewis 17:34, 12 May 2006 (EST)