Donc ça y est, vous avez trouvé un design sur la toile pour votre annuaire mais manque de bol, il n’est pas adapté à FreeGlobes mais à un autre script. Qu’à cela ne tienne, la transposition n’est pas si compliquée.
Exemple avec le thème Dum-Dum réalisé pour WordPress par Gaby, un thème à deux colonnes très bonbon acidulé et dont la traduction française est accessible sur Thèmes du Net.
Première chose à faire, télécharger le thème Dum-Dum et le décompresser. Vous allez voir en ouvrant le répertoire décompressé que l’arborescence d’un thème WordPress est relativement similaire à celle de FreeGlobes.
Dans le répertoire des thèmes de VOTRE FreeGlobes, créez un nouveau dossier que vous appellerez, par exemple, dum-dum-fg. Copiez-y tous les fichiers et répertoires du thème Fresh.
Dans le répertoire images de votre nouveau dum-dum-fg pour FreeGlobes, copiez toutes les images du répertoire images du thème Dum-Dum de WordPress. Beaucoup d’ “images” et de “dum-dum” dans cette phrase, j’espère que vous n’êtes pas perdus.
Voilà, c’est tout pour la préparation. Que vous soyez en ligne ou en local, pensez à modifier le thème actif de votre annuaire à l’aide du plugin adéquat pour voir les modifications que vous effectuerez au fur et à mesure.
Comparaison des fichiers style.css de Fresh pour FreeGlobes et Dum-Dum pour WordPress :
Feuille de style originale de Fresh (commentée)
Feuille de style originale de Dum-Dum
Dans un premier temps, occupons-nous du template, c’est à dire ce qui est commun à toutes les pages du site. Sont concernés les fichiers de FreeGlobes header.html et footer.html et style.css bien sûr.
Le but du jeu : passer de ça
à ça
La plus simple manière de procéder à mon avis est de coller le plus possible à la feuille de style de Fresh, et non de tenter d’y intégrer les “div” et “class” de la feuille de style du thème WordPress. Ca vous évitera bien des erreurs et des oublis, car certains styles sont figés dans FreeGlobes, notamment au niveau des plugins.
La seule grosse différence entre Fresh et Dum-Dum finalement, c’est la disparition de la colonne latérale gauche dans ce dernier. Tous deux ont un en-tête, une navigation horizontale, une colonne latérale droite et un pied de page. C’est donc relativement simple à adapter.
Design global : voir la feuille de style
Le innerwrapper est ici inutile, autant ne pas s’en encombrer.
Dans header.html, supprimer <div id=”innerwrapper”> ainsi que l’avant-dernier </div> dans footer.html.
En-tête : #header
Par comparaison avec la feuille de style du thème pour WordPress, supprimez dans la feuille de style ce qui ne sert à rien : #header h2 a (la description n’est pas un lien), #header input, #header input:hover, #header input:focus, #header form (pas de formulaire dans cet en-tête).
Dans header.html, on sort la navigation horizontale du header donc on ferme le header par un </div> et on retire celui qui se trouve après </ul>.
Navigation horizontale : ici on va utiliser les classes du thème Dum-Dum .menu1 et .menu2 à la place de #header nav et #header subnav (voir Navigation horizontale dans la feuille de style)
On supprime tous les #header #nav, #header #subnav de style.css.
Dans header.html, on remplace juste <ul id=”nav”> par
<div class="menu1">
<div class="menu2">
<ul>
sans oublier de fermer les balises :
</ul>
</div> <!-- fermeture de .menu2 -->
</div> <!-- fermeture de .menu1 -->
Colonne latérale gauche : elle disparait dans Dum-Dum donc on va transporter le contenu de “sidebar” dans sidebarright. Dans header.html, remplacer <div id=”sidebar”> par <div id=”sidebarright”>, supprimer la balise de fermeture </div> de “l’ex sidebar” ainsi que le <div id=”sidebarright”> qui suit. On se retrouve avec une seule colonne latérale droite.
Colonne latérale droite : #sidebarright.
On lui attribue les styles de la .sidebar de wordpress et dans header.html, on attribue les nouvelles classes en fonction de l’image de fond qu’on désire et c’est là qu’il faut faire très attention à conserver les titres en h2 et les listes en .subnav.
Pied de page : il n’est pas très compliqué à transposer, il suffit de comparer les feuilles de style de chaque thème et le fichier footer.html de Fresh et footer.php de Dum-Dum pour s’apercevoir qu’ils sont très similaires : #footer correspond à .footer, #footer-infos à .footertext.
Ressources en ligne sur cette page
Dans tous les cas, si vous avez un problème, commencez par vérifier que toute balise ouverte est bien fermée et au bon endroit.
Articles relatifs
6 utilisateurs ont commenté cet article
bonjour,je teins a vous remercier de partager vos connaissances.Voila j’ai fait rois essais mais pas reussi,serait possible de voir le header et feuille de style,modifier,en mettant en caractere gras,ou se situe les modifs,je ne suis pas tres fort dans ce domaine,j’aurais besoin d’etre mieux eclaire,D’avance merci,et encore felicitations .
Bonjour didiersurf,
Concernant la feuille de style commentée, elle est en lien à la fin de l’article. Dis-moi si les commentaires ne sont pas suffisants.
OK, je vais mettre aussi le header.html et le footer.html en ligne.
non les commentaires sont bien expliques,mais comme j’ai dit je suis pas tres fort dans ce domaine,un
exemple est mieux pour faire comprendre qu’un long discours.Amicalement
Voilà didiersurf, j’ai mis tous les fichiers demandés en ligne. N’hésite pas à poser toutes les questions que tu souhaites sur le thème, j’essaierai d’y répondre simplement
bonjour musky,cela c’est tres bien passe,je trouve ton systeme tres instructif,et espere qu’il y d’autres themes a nous faire decouvrir.
http://anthemis.fr.nf/essais/ .Amicalement didier
Ah ben voilà, je suis ravie. Mais on n’a pas encore tout à fait terminé avec ce thème. Il reste encore entre autres les pages sites.html et single.html à traiter.
Je suis désolée, c’est long mais ça sera sûrement plus simple pour expliquer ensuite les thèmes suivants.
En tous les cas, bravo pour tes premiers pas
Laisser un commentaire