Comment personnaliser votre thème

Introduction

Ce tutoriel vous aidera à personnaliser l'apparence de votre site PhpGedView qui s'appelle "thème" dans le langage des initiés. Tous les fichiers référencés dans ce tutoriel existent dans le répertoire "themes" de votre installation PhpGedView et ont été conçus afin que vous puissiez effectuer des modifications autant que vous le souhaitez sans créer de dysfonctionnement au programme phpGedView, bien qu'il peut exister quelques codes PHP code inclus dans les fichiers. Une compréhension des feuilles de styles CSS stylesheets aet du langage HTML est nécessaire pour personnaliser les thèmes de votre site. Quelques connaissances de base en PHP peuvent également aider.

Les différentes étapes à suivre pour personnaliser votre thème

Les étapes suivantes vous guideront pour construire votre propre thème pour votre site PhpGedView:

1. Effectuez une copie de l'un des sous-répertoires du répertoire "themes" de votre installation PhpGedView, afin de fournir une base à la personnalisation de votre thème. Dans le répertoire "themes" de votre installation PhpGedView, vous avez les sous-répertoires suivants: cloudy, minimal, ocean, simply blue, simply green, simply red, standard, xood et xenea. Vous choisissez le sous-répertoire qui correspond au thème qui se rapproche le plus de celui que vous voulez personnaliser, et vous en faites une copie en lui donnant un nouveau nom, par exemple "mon thème". Ce nom correspondra au thème que vous allez personnaliser.

2. Dans ce sous-répertoire que vous aurez copié et auquel vous aurez donné un autre nom, vous trouverez un fichier dénomme "theme.php". Ouvrez ce fichier avec un éditeur de texte tel que Notepad++ et recherchez dans ce fichier la ligne qui commence par '$theme_name = "nom du thème"'. Ainsi par exemple, cette ligne aura la forme suivante pour le sous-répertoire standard: '$theme_name = "standard"'. Vous remplacez alors le nom du thème qui apparait entre les guillemets (par exemple standard) par le nom que vous voulez donner à votre thème (par exemple '$theme_name = "mon thème"') .Habituellement, vous y mettez le même nom que celui du sous-répertoire que vous avez donné à l'étape 1 à votre nouveau thème.

3. Si vous avez copié le sous-répertoire "Ocean" ou "Standard", il existe un fichier qui s'appelle 'header.jpg' ou 'header.png'. Cette image correspond au sigle de PhpGedView qui apparait en haut à gauche de chaque page. Vous pouvez remplacer ce fichier header.png ou header.jpg par le fichier d'une image qui vous appartient et que vous voulez voir apparaître.

4. Ouvrez le fichier 'style.css' qui se trouve dans ce répertoire avec un éditeur de texte tel que Notepad++, afin de modifier les couleurs et les bordures des différentes pages.

5. Puis ouvrez également avec ce même éditeur de texte les fichiers 'header.html, footer.html, toplinks.html, print_footer.html, print_header.html, et sublinks.html' qui se trouvent dans ce même sous-répertoire afin de modifier l'agencement de la page et la position des différents éléments qui se trouvent sur la page.

6. Ouvrez également le fichier 'theme.php', à la fin de ce fichier, pour ajuster l'agencement des diagrammes d'ascendance et de descendance. of the pedigree and descendancy charts.

7. Pour utiliser vos propres images, effectuez une copie du répertoire "images" qui se trouve dans ce sous-répertoire et donnez-lui un nouveau nom, par exemple "Mes images". Puis éditez le fichier 'theme.php' (en l'ouvrant avec un éditeur de texte tel que Notepad++) et allez à la ligne qui contient cette expression '$PGV_IMAGE_DIR = $THEME_DIR."images"'. A la place de "images", écrivez ici l'emplacement de votre répertoire "images", par exemple "Mes images" si c'est le nom que avez donné au répertoire "images" que vous avez copié. Dans ce cas, à la place de '$PGV_IMAGE_DIR = $THEME_DIR."images"', vous écrirez '$PGV_IMAGE_DIR = $THEME_DIR."Mes images"'. Dans ce répertoire "Mes images", remplacez les images qui s'y trouvent par les images que vous aurez choisies.

Comment est structurée une page ?

Une page générée par phpGedView est divisée en 5 sections:

1. L'en-tête - est définie par le fichier header.html qui se trouve dans le sous-répertoire de chacun des thèmes. Cette section "en-tête" apparait au sommet de chaque page et est la première chose qui est imprimée après la balise <body> qui se trouve dans le code html de la page. Cet en-tête ajoute les options de modification de langue si vous avez autorisé le choix de plusieurs langues dans la configuration de votre logiciel. Elle peut contenir des bannières ou tout type d'information que vous désirez voir apparaitre en haut de chacune des pages de votre site. En mode "aperçu avant impression", l'en-tête est définie par le fichier print_header.html à la place du fichier header.html.

2. Liens de navigation supérieurs - ils sont définis par le fichier toplinks.html. Cette section sera incluse immédiatement après le fichier header.html dans la construction de la page html, et contient les liens de navigation vers les différents endroits du site. Vous pouvez modifier ce fichier pour placer des images différentes ou pour ôter certains liens

3. Le corps principal de la page html - est défini par la logiciel PhpGedView. Vous ne devez pas modifier le code qui génère cette section de la page à moins que nous le vouliez vraiment.

4. Sous liens vers les individus - Sur la page de détails d'un individu il existe une section de liens de navigation qui dirige le visiteur vers différentes parties du site en fonction de l'individu qui est actuellement affiché.

5. Le Pied de page - est défini par le fichier footer.html. Cette section est incluse dans la page html une fois que le corps principal de la page a été généré par PhpGedView. Par défaut, PhpGedView imprime les liens de contacts. C'est un bon endroit pour y placer des liens vers d'autres sites web ainsi que pour y inscrire un état de copyright. En mode "aperçu avant impression", l'en-tête est définie par le fichier print_footer.html à la place du fichier footer.html.

6. Pied de page requis - phpGedView génèrera automatiquement un pied de page avec la mention suivante "Powered By PhpGedView" sous forme d'image ainsi qu'un lien vers la page d'accueil de phpGedView. Il ajoutera aussi un lien d'aperçu avant impression. Je ne peux pas vous empêcher de modifier cette section si vous connaissez le PHP, mais si vous la changez, je vous en prie, au moins, laissez le lien vers la page d'accueil de phpGedView quelque part sur chacune des pages.

Ces sections sont représentées graphiquement dans l'image ci-dessous à partir du thème "standard":

Les feuilles de style CSS

PhpGedView utilise des feuilles de style CSS sur l'ensemble des pages du site. Ces feuilles de style fonctionnent un peu selon le même principe que les styles qui sont utilisés dans un traitement de texte évolué tel que Microsoft Word ou Open Office Writer. C'est à dire que les feuilles de style permettent de définir pour les différentes zones d'une page web, les tailles de la police, le type de la police de caractère, les fonds de couleur, les bordures, l'alignement des objets,... Ces feuilles de style apportent un grand degré de flexibilité sur le contenu graphique des différentes pages du site.

Toutes les feuilles de styles sont contrôlées par le fichier style.css. C'est ce fichier sui définit le style de chaque élément de votre page web. Explorez ce fichier et regardez ce que vous pouvez faire. Si vous arrivez à faire quelque chose de créatif, alors partagez-le avec le reste de la communauté.

Visualiser les paramètres de la feuille de style CSS avec CSSViewer

Afin de visualiser l'effet produit par une feuille de style CSS, je vous conseille pour ceux qui utilisent Firefox, de télécharger l'extension CSSViewer, que vous pouvez télécharger ici: https://addons.mozilla.org/fr/firefox/addon/2104. Une fois cet utilitaire installé, affichez une page de votre site et cliquez sur "outils" --> CSSViewer. En parcourant avec votre souris les différentes zones de votre page, vous verrez affichés les différents paramètres de la feuille de style qui agissent sur la zone de la page web sur laquelle vous avez placé votre souris.

Ainsi, avec cette extension, en parcourant votre souris sur la boite de sélection des langues qui se trouve en haut à droite d'une page avec le thème standard, vous voyez ceci:

Les informations qui apparaissent dans le rectangle sont relatives au secteur entouré de pointillés rouges, secteur sur lequel pointe la souris. Ces informations nous disent que la boite de sélection des langues s'appelle ".header-select". Cette boite a des caractéristiques de police (font & text) qui sont les suivantes:

• la police utilisée est "sans"
• la taille de la police est de 12 pixels

Cette boite a une couleur de fond blanche (backgroundcolor#FFFFFF) et la couleur du texte est noire (color#000000) Cette boite a les dimensions suivantes: hauteur = 19 pixels et largeur = 175 pixels La bordure de la boite est un trait d'épaisseur 2 pixels et de couleur #E6E6E6

Définition des différentes classes de style de la feuille style.css

Les sections suivantes décrivent à quoi correspond graphiquement sur les différentes pages du site chaque classe de style qui est définie dans le fichier style.css.

Cette image correspond aux diagrammes de descendance et d'ascendance. L'image qui est intitulée ".pedigree_image_portrait" est parfois remplacée par .pedigree_image_portrait_rtl, .pedigree_image_landscape, ou .pedigree_image_landscape_rtl selon la langue utilisée et si la vue est en mode portrait ou paysage. Les zones ".name1" et ".details1" appelées classes, peuvent aussi être remplacées par .namezoom et .detailszoom lorsque l'utilisateur fait un zoom.

Cette image montre les feuilles de style qui sont appliquées à la section en-tête (header) de la page. Si les langues disponibles sont affichées sous forme de drapeaux alors la classe devrait être .flag au lieu de .header_select.

Cette image montre les feuilles de style qui sont appliquées à la section pied de page (footer) de la page.

Les feuilles de style suivantes sont dans la section "liens de navigation supérieurs" (toplinks.html) de la page: .menuitem, .menuitem_hover, .submenu, .submenuitem, et .submenuitem_hover.

Cette image montre les feuilles de style qui sont appliquées par défaut aux liens de navigation supérieurs de chaque page.

Cette image montre les feuilles de style des listes ou tables. Les listes ou tables existent pour les individus, les familles, les sources, les lieux et les objets multimedia.

Cette image montre les feuilles de style qui sont appliquées aux faits et détails personnels d'un individu. Le label .facts_label sera en fait .facts_labelred si l'événement (fact) a été supprimé. Le .facts_label sera en fait .facts_labelblue si l'événement (fact) a été ajouté/modifié. Le principe est le même pour .facts_value qui est transformé en .facts_valuered ou .facts_valueblue. La feuille de style .source_citations stylesheet est utilisée lorsque les citations des sources apparaissent dans cette fiche.

Cette image montre les feuilles de style qui sont appliquées à la section des proches parents.

La feuille de style .error s'applique aux messages d'erreur et la feuille de style .warning s'applique aux messages d'avertissement. Les feuilles de style .news_date et .news_title sont utilisées sur la page d'accueil. La feuille de style .current_day stylesheet est utilisée sur le calendrier des anniversaires dans la vue mensuelle. La feuille de style .listlog est utilisée lorsque l'on visualise le fichier de log depuis le menu d'administration. La feuille de style .label est utilisée sur le formulaire de recherche en ajout des autres lieux. La feuille de style .formfield est utilisée sur le forumaire de login. L'édition du fichier des restrictions d'accès au fichier GEDCOM utilise les feuilles de style .facts_label02, .facts_label03, et .facts_value02.

The following stylesheets are in the timeline chart: .field, .timeline_table, .person0, .person1, .person2, .person3, .persion4, and .person5.

Personnaliser les menus

Chaque thème dispose de menus en forme de liste déroulante. Ce type de menu a été fait pour être flexible et facile à modifier sans que les concepteurs aient besoin de connaitre quoi que ce soit sur le langage javascript et le DHTML qui est à la base de la programmation de ce type de menus. Vous êtes libre de modifier les menus à votre guise, ou d'utiliser votre propre style de menu si vous ne voulez pas utiliser le système de menu existant.

Ce système de menu est construit autour d'une structure de tableau en PHP array que vous avez construite dans la page et que vous avez ensuite transféré à la fonction print_menu(). Ce qui suit est une description de chacun des éléments qui constituent le tableau de menus.

Un tableau de menus basique ressemble à ceci (extrait de la documentation du code de la fonction print_menu):

$menu["label"] = "Diagrammes"; $menu["labelpos"] = "down"; // indique où le texte doit être positionné par rapport aux options de l'image: up, down; left and right (haut, bas, gauche et droite) $menu["icon"] = "images/pedigree.gif"; $menu["hovericon"] = "images/pedigree2.gif"; $menu["link"] = "pedigree.php"; $menu["class"] = "menuitem"; $menu["hoverclass"] = "menuitem_hover"; $menu["flyout"] = "down"; // les options sont down left and right (bas, gauche et droite) $menu["items"] = array(); // un tableau des différentes rubriques du menu

La rubrique $menu["label"] du tableau du menu correspond au texte de la rubrique du menu. Dans l'exemple ci-dessus, ce texte est "Diagrammes".

Le $menu["labelpos"] est la position du texte par rapport à l'icône du menu. Les options possibles sont: "up" - le texte est placé au-dessus de l'icône, "down" - le texte est placé en dessous de l'icône, "left" - le texte est placé à gauche de l'icône, "right" le texte est placé à droite de l'icône. L'option par défaut est "down".

$menu["icon"] est l'emplacement relatif de l'image que vous voulez utiliser en tant qu'icône. Si vous laissez cette option non renseignée, aucune icône n'apparaîtra et le menu sera un simple menu texte.

$menu["hovericon"] est l'emplacement relatif de l'image qui sera utilisée quand l'utilisateur passe la souris au-dessus du menu. Cela vous permet de créer des effets lors du passage de la souris dans un secteur particulier de la page.

$menu["link"] est l'adresse url vers laquelle l'utilisateur est dirigé lorsqu'il clique sur le menu.

$menu["class"] est la feuille de style CSS stylesheet qui doit être utilisée pour l'attribut de la classe correspondant au contenu du menu.

$menu["hoverclass"] est la feuille de style CSS stylesheet qui est utilisée quand l'utilisateur passe la souris au-dessus de la rubrique du menu.

$menu["flyout"] est la position de chacun des sous-menus qui apparaissent quand on passe la souris sur une rubrique du menu. Les options sont: "down" - les sous-menus apparaissent en dessous de la rubrique du menu, "right" - les sous-menus apparaissent à droite de la rubrique du menu, et "left" - les sous-menus apparaissent à gauche la rubrique du menu.

$menu["items"] est également un tableau qui contient les tableaux des différentes rubriques du menu. C'est ici que sont mentionnés tous les sous-menus qui apparaissent quand l'utilisateur passe sa souris au-dessus d'une des rubriques du menu.

Un exemple basique est détaillé ci-après pour vous montrer comment créer un menu avec une rubrique à 1 sous-menu. Des exemples de menus plus compliqués se trouvent dans les fichiers toplinks.html pour chacun des thèmes.

$menu = array();

$menu["label"] = "Menu simple";

$menu["class"] = "menuitem";

$menu["items"] = array();

$submenu = array();

$submenu["label"] = "Rubrique 1 du menu";

$submenu["class"] = "submenuitem";

$menu["items"][] = $submenu;

print_menu($menu);

Le $menu array imprimera le texte sur l'écran. Le $submenu array représente la première rubrique qui apparaîtra lorsque l'utilisateur passera sa souris au dessus du texte $menu["label"]. La ligne $menu["items"][] = $submenu; est une construction PHP pour attacher une rubrique à la fin d'un tableau. Ainsi vous pouvez créer autant de nouveaux sous-menus que vous le souhaitez et les ajouter de manière continue au tableau $menu["items"] selon l'ordre dans lequel vous souhaitez qu'ils apparaissent.

Puisqu'une rubrique d'un sous-menu a la même structure en tableau que la rubrique du menu principal, vous pouvez avoir différents niveaux de hiérarchie dans le menu. Il vous suffit simplement d'ajouter un tableau $subsubmenu au tableau des rubriques. $submenu["items"][] = $subsubmenu;

Des hiérarchies multiples n'ont pas été testées par l'équipe de développement de PhpGedView et ne sont donc pas présentes dans les codes qui sont fournis. C'est pourquoi elles doivent être utilisées avec la plus grande prudence.