Build a New Menu
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.
Contents
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:
/phpGedView/themes/cloudy/header.html
Open the file with an html-editor or with a simple text-editor.
Search for the first entry like:
$my_temp_menu= array();
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";
print_menu($menu);
?>
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:
/phpGedView/themes/cloudy/images/newmenuicon.gif
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.
Examples
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!)
For Markus
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)
