Comment personnaliser votre thème : Différence entre versions

De PGVWiki
Sauter à la navigation Sauter à la recherche
Ligne 7 : Ligne 7 :
 
Les étapes suivantes vous guideront pour construire votre propre thème pour votre site PhpGedView:
 
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.  
+
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 forem 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.  
+
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 forem 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.
  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.   
+
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.  
  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épertoir 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.
+
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épertoir 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.

Version du 30 avril 2007 à 15:52

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 forem 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épertoir 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.