Comment modifier un thème

autres possibilités de personnalisation des thèmes, aussi n'hésitez pas à écrire vos bonnes idées ici même en ajoutant votre propre contribution.

Outils

Vous aurez besoin d'un bon éditeur de texte, n'utilisez pas Notepad qui laisse des caractères aléatoires dans vos scripts qui peuvent être gênants. Il y a quelques bons éditeurs de texte gratuits tels que Notepad2, Notepad++ et Crimson Editor qui créeront du code propre. Pour ceux qui utilisent Linux, Kedit, Kwrite (sous environnement KDE) , ou Gedit (sous environnement Gnome) sont parfaits. EditPlus est très bien et utilise peu de ressources système, mais il n'est pas gratuit.

Si vous avez un éditeur HTML WYSIWYG, il peut également convenir, mais n'est pas vraiment nécessaire à moins que vous ne désiriez réécrire la page entière. NVU et Bluefish sont d'excellents éditeurs HTML libre. Si vous avez Dreamweaver (qui est payant) c'est bien évidemment parfait !

Dans les faits vous n'aurez besoin que d'ouvrir la page web dans votre navigateur. Firefox est parfait pour celà parce qu'il dispose de fonctionnalités supplémentaires dans le menu qui apparait lorsque vous faites un clic droit, telles que par exemple la fonction de visualisation de l'image d'arrière plan. Cette fonctionnalité vous indique ainsi quelle est l'image que vous voyez à l'écran et où vous pouvez la trouver.

Vérifiez toujours le résultat de votre travail en utilisant Internet Explorer si vous utilisez Firefox parce que quelques détails peuvent apparaitre de manière différente selon que vous utilisiez l'un ou l'autre de ces navigateurs. Il est par exemple très utile de conserver ces deux navigateurs ouverts en permanence et de rafraichir leur affichage afin d'avoir en permanence un oeil sur le résultat de l'affichage de votre travail dans chacun de ces navigateurs.

Pour modifier les couleurs d'un thème, je vous recommande un utilitaire gratuit très utile: La boite à couleurs. Ce logiciel écrit pour Windows par Benjamin Chartier permet de sélectionner avec une pipette n’importe quelle couleur présente sur l’écran. Il donne alors le code hexadécimal exact de la couleur sélectionnée et vous permet de modifier cette couleur en agissant sur la balance rouge / vert / bleu et sur la teinte / luminosité / saturation.

Etapes

Gestion des fichiers

La première étape consiste à copier et renommer le thème que vous voulez modifier afin que vous puissiez travailler sur ce nouveau thème. L'exemple détaillé ici utilise le thème Xenea qui se trouve dans le répertoire themes/xenea du répertoire dans lequel vous avez installé PhpGedView, mais cet exemple s'applique à l'identique pour tous les autres thèmes qui existent dans PhpGedView.

Tous les fichiers dont avez besoin se trouvent dans le répertoire themes de votre répertoire PhpGedView. Ces fichiers sont les suivants: header.html, toplinks.html, style.css et theme.php. Le fichier header.html contient l'ensemble des informations de mise en forme de l'en-tête des pages du site. Le fichier toplinks.html contient l'ensemble des informations qui permettent d'afficher les icônes et les liens présents sur les différentes pages. Le fichier style.css contient l'ensemble des règles de style des différentes pages du site. Le fichier theme.php est le fichier qui contient les informations générales relatives au thème.

Copiez le répertoire themes/xenea dans un autre répertoire et donnez lui un nouveau nom qui vous convienne, par exemple : themes/xenea_gris, n'utilisez aucun espace dans le nom, utilisez plutôt des underscores _ à la place. En effet, les serveurs n'aiment pas les espaces dans les noms de répertoires. Après avoir renommé le nom du répertoire themes/xenea en themes/xenea_gris' vous trouverez à l'intérieur de ce répertoire le fichier theme.php que devrez modifier. Si vous ouvrez le fichier theme.php dans votre éditeur de texte, vous devriez trouver ceci aux environs de la ligne 27:

$theme_name = "Xenea";		//-- the name of this theme (le nom du thème)

Changez cette ligne par la ligne suivante:

$theme_name = "Xenea_Gris";

ou donnez lui le nom que vous voulez. De même à la ligne 37, vous verrez apparaître ce code:

$PGV_IMAGE_DIR = "themes/xenea/images";		//-- directory to look for images

Ce code indique l'endroit où se trouvent les images utilisées par le thème Xenea. Comme vous êtes en train de fabriquer un nouveau thème "Xenea_Gris", vos images seront dans le nouveau répertoire themes/xenea_gris. Il faut donc changer cette ligne par la ligne suivante:

$PGV_IMAGE_DIR = "themes/xenea_gris/images";		//-- répertoire dans lequel se situent les images utilisées par le thème xenea_gris

Ensuite, copiez le répertoire ainsi modifié dans le répertoire themes de PhpGedView, puis allez sur la page d'administration de votre site, et choisissez ce thème par défaut pour votre site.

Vous pouvez alors visualiser en direct ce thème que vous allez modifier et voir ainsi les conséquences des modifications que vous allez lui apporter en rafraichissant votre navigateur à chaque fois que vous modifiez votre thème.

Changer le thème

Maintenant, ouvrez le programme La boite à couleurs sur votre page web et trouvez le code hexadécimal des couleurs de la partie de la page que vous voulez modifier. Placez simplement votre curseur sur la partie de la page que vous voulez modifier, et lisez le code à 6 caractères que vous affiche La boite à couleurs. Ce code ressemble à quelque chose comme #FFFFFF, qui correspond au code de la couleur blanche. Ce code est en fait une combinaison de chiffres et de lettres.

Ensuite, cherchez dans les quatre fichiers qui sont présents dans votre répertoire themes/xenea_gris et qui sont mentionnés plus haut (header.html, toplinks.html, style.css et theme.php) les lignes sur lesquelles apparaissent ce code hexadécimal. Utilisez l'option "rechercher et remplacer" de votre éditeur de texte pour remplacer le code hexadécimal de la couleur que vous voulez changer par le nouveau code, ainsi vous n'aurez qu'à taper votre nouveau code une seule fois pour qu'il soit remplacé dans la totalité du fichier. N'effectuez pas le remplacement automatique, remplacez chaque ligne proposée l'une après l'autre. A chaque fois que vous remplacez une ligne, sauvegardez le fichier, rafraichissez votre navigateur et regardez le résultat obtenu. Si vous n'aimez pas le changement effectué ou si vous avez fait une erreur, vous n'avez qu'à cliquer sur "annuler" dans le menu de votre éditeur de texte afin qu'il annule votre dernière modification, puis sauvegarder votre fichier, rafraichir votre navigateur, et votre thème retrouvera son aspect précédent.

Vous pouvez aussi changer des graphiques ou des images, ou placer des commentaires dans le script afin que ces commentaires ne se voient pas à l'écran. Il est recommandé de placer un underscore au début du nom de l'image afin que vous puissiez la réutiliser éventuellement plus tard si vous changez d'avis. Il y a des couleurs d'arrière-plan qui sont définies dans les quatre fichiers mentionnés plus haut: ces couleurs d'arrière plan s'appellent "background". Il suffit de modifier le code hexadécimal qui apparait juste derrière ce terme.

Vous pouvez maintenant changer à loisir les couleurs des différents thèmes de PhpGedView, et si le résultat ne vous plait pas ou si vous vous vous trompez, ne vous inquiétez pas, il vous suffit de supprimer le répertoire que avez créé et de recommencer. PhpGedView utilisera le thème par défaut s'il n'en trouve pas d'autre. Si par erreur vous veniez à supprimer ce thème par défaut, il vous suffit de le recopier à partir du fichier zippé que vous avez téléchargé et de le réinstaller.