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.

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

• Example from Markus (Theme "Cloudy")
• Example from Michael (Theme: slightly-modified Myst)

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)