Comment construire un nouveau menu : Différence entre versions
Ligne 93 : | Ligne 93 : | ||
Le menu d'impression (print_menu-line) imprime le contenu des rubriques du menu (en incluant les roubriques du sous-menu).<br><br> | Le menu d'impression (print_menu-line) imprime le contenu des rubriques du menu (en incluant les roubriques du sous-menu).<br><br> | ||
+ | |||
+ | Trouvez un nom de '''label''' pour chaque entrée du menu et du sous-menu, par exemple "ma Famille" et "d'où nous venons" et écrivez les lignes de code suivantes: | ||
+ | |||
+ | $menu["label"] = "<font color=green>ma Famille</font>"; | ||
+ | |||
+ | $submenu["label"] = "<font color=green>d'où nous venons</font>";<br><br> | ||
+ | |||
+ | Dessinez une '''nouvelle icône pour ce menu''' avec un programme de dessin ou cherchez en une avec Google.<br><br> Enregistrez cette icône avec un nouveau nom par exemple "nouvelleicônemenu.gif" dans le répertoire suivant: | ||
+ | |||
+ | /phpGedView/themes/cloudy/images/nouvelleicônemenu.gif | ||
+ | |||
+ | et placez-là dans votre code comme suit: | ||
+ | |||
+ | $menu["icon"] = "<font color=green>themes/cloudy/images/nouvelleicônemenu.gif | ||
+ | </font>"; | ||
+ | <br><br> | ||
+ | |||
<!-- here ends a menu (le menu se termine ici)--> | <!-- here ends a menu (le menu se termine ici)--> | ||
[[en:How To:Build a New Menu]] | [[en:How To:Build a New Menu]] |
Version du 23 août 2007 à 09:37
PhpGedView vous permet de donner une vie à votre généalogie grâce aux différents événements qui ont tracé la vie de vos ancêtres.
Parmi ces événements, les plus intéressants sont souvent les petites histoires:
- les anecdotes, les rumeurs,...
- les photos ou les dessins qui retracent ces histoires ainsi que les vrais photos.
Avec ce tutoriel, vous serez capable de construire un nouveau menu qui vous permettra d'afficher le contenu que vous voudrez.
Vous permettrez ainsi à PhpGedView de donner vie à toutes les histoires de votre famille...!
Ajouter un nouveau Menu
Avant d'effectuer toute modification, sauvegardez le thème "Cloudy" et travaillez uniquement sur une copie avec un nom différent.
Vous trouverez le code PHP qui devra être modifié dans le fichier "header.html".
Prace que chaque thème a son propre type de menu, nous vous montrerons les modifications principales à apporter à partir de l'exemple du thème "Cloudy".
Dans ce cas, dans le fichier de configuration du GEDCOM, rubrique "utilisateurs", nous avons paramétré l'option "Affichage d'une liste de choix pour changer le thème" à "Non" et nous avons choisi "Cloudy" comme "thème Standard".
Vous trouverez le fichier "header.html" du thème "Cloudy" dans ce répertoire de votre installation de PhpGedView:
/phpGedView/themes/cloudy/header.html
Ouvrez ce fichier avec un simple éditeur de texte et cherchez la ligne suivante:
$my_temp_menu= array();
Les lignes suivantes construisent la première partie du menu de PGV, visible sur la page d'accueil de PGV par l'icône "Page d'accueil".
Tout ce qui figure dans ce menu (ainsi que dans les sous-menus) est encapsulé entre des balises "<td>" et "</td>".
Chaque bloc "<td>...</td>" contient une icône du menu avec ses sous-menus.
Une douzaine de rubriques du menu sont encapsulées dans un bloc "<table>...</table>".<br/
La "structure générale du menu" ressemble à ceci:
<table> <tr> <td> 1. rubrique 1 du menu (avec toutes les rubriques des sous-menus) </td> </tr> <tr> <td> 2. rubrique 2 du menu (avec toutes les rubriques des sous-menus) </td> </tr> </tr> <td> peut-être votre propre rubrique (avec toutes les rubriques des sous-menus) </td> </tr> <tr> <td> dernière rubrique du menu (avec toutes les rubriques des sous-menus) </td> </tr> </table>
Les codes pour le menu et les sous-menus ressemblent à ceci:
<?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); ?>
Avec un "copier coller" copiez les lignes de code ci-dessus et placez-les entre deux blocs "<td>...</td>" , là où vous voulez mettre en place la rubrique de votre menu, en prenant en compte la structure générale du menu décrite plus haut.
Maintenant vous allez apprendre à modifier les principales lignes de code qui vous permettront de modifier votre menu.
Vous avez le -bloc $menu, qui construit l'icône supérieure qui apparaît sur la page de PhpGedView et le -bloc $submenu-block, qui construit le menu popup avec les entrées du sous-menu the submenu-entries sur la page de PhpGedView.
Vous pouvez copier le bloc $submenu autant de fois que vous le souhaitez, il y a un bloc pour chacune des entrées du sous-menu.
Le menu d'impression (print_menu-line) imprime le contenu des rubriques du menu (en incluant les roubriques du sous-menu).
Trouvez un nom de label pour chaque entrée du menu et du sous-menu, par exemple "ma Famille" et "d'où nous venons" et écrivez les lignes de code suivantes:
$menu["label"] = "ma Famille";
$submenu["label"] = "d'où nous venons";
Dessinez une nouvelle icône pour ce menu avec un programme de dessin ou cherchez en une avec Google.
Enregistrez cette icône avec un nouveau nom par exemple "nouvelleicônemenu.gif" dans le répertoire suivant:
/phpGedView/themes/cloudy/images/nouvelleicônemenu.gif
et placez-là dans votre code comme suit:
$menu["icon"] = "themes/cloudy/images/nouvelleicônemenu.gif
";