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édiatment 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. Toutes les feuilles de styles sont contrôlées par le fichier style.css. Ces feuilles de style apportent un grand degré de flexibilité sur le contenu graphique, sur les couleurs, sur les polices de caractères, sur les bordures, etc... des différentes pages du site. 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é. Les sections suivantes décrivent à quoi correpond 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 aui 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.