Elliott1961 at 14:11, 6 December 2008

2008-12-06T14:11:01Z

New page

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 [[How_To:Customize_Themes|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 "<nowiki><td></nowiki>" and "<nowiki></td></nowiki>" -tags. 
Every next "<nowiki><td></nowiki>...<nowiki></td></nowiki>" -block encloses such a menu-icon with the concerning submenus. 
A dozen menu-items are enclosed in a "<nowiki><table></nowiki>...<nowiki></table></nowiki>" -tag. 
The general '''menu-structure''' looks like this:

<pre>
<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>
</pre>

The code for the '''menu''' and the '''submenus''' looks like this:


<td valign="middle" width="1" >
<?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);
?>
</td>


With "copy and paste" take this code above and put it between two <td>-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''':
<pre>
$submenu["link"] = "http://www.frappr.com";
</pre>
To open an external link in a '''new browser-window''':
<pre>
$submenu["link"] = "http://www.frappr.com\" target=\"_blank\"";
</pre>
To open an external link in a '''popup-window''':
<pre>
$submenu["link"] = "#\" onclick=\"window.open('http://www.frappr.com','','
left=50,top=50,width=600,height=320,resizable=1,scroll bars=1'); \"";
</pre>

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
* [http://www.lau-net.de/baerlocher/phpGedView Example from Markus (Theme "Cloudy")]
* [http://www.finison.com Example from Michael (Theme: slightly-modified Myst)]

CMS-Sites with PGV inside
(see also an [[How_to:Integrate_with_CMS|introduction]] of this)
* [http://www.thelewisfamily.id.au Example from Laurie (Joomla!)]
* [http://www.zeisberg-laudert.de Example from Bernd (Joomla!)]
* [http://www.colt49.com/familyhistory Example from Nigelo (HTML, Theme "Wooden")]
* [http://www.our-families.info Example from Nigelo (Joomla!)]

********** 
For Markus 
[[How To:Customize Themes|This is a link to How to customise themes]] 
[[How To:Customize Themes#Tutorials|This is a link to How to customise themes - Tutorials]] 
[[How To:Build a New Menu#Open a HTML-Text|This will take you to another sub heading item]] 
--[[User:Laurie|Laurie Lewis]] 17:34, 12 May 2006 (EST)

[[Category:How To]]


[[fr: Comment construire un nouveau menu]]

Build a New Menu - Revision history

Elliott1961 at 14:11, 6 December 2008