Table des matières

Créer son propre template pour Joomla! Open Source

:wiki:dokuwiki-128.png

Objectifs


Ce tutoriel va vous apprendre à créer votre propre template pour Joomla 1.5 ou versions antérieures en 29 étapes. Notez bien que ce n’est qu’une méthode parmis d’autres possibles.

Logiciels utilisés

On va utiliser 3 logiciels non Freeware « NamoWeb editor », « Photoshop » et «Dreamwaever ».

Mode Opératoire

1. Créé ou récuperez une image qui vous plait comme vous le voulez avec le logiciel de votre choix.

2. Découpez la avec Photoshop en tranches, en prenant soin de laisser de la place pour les composants, patways ext. Astuce, évitez de couper les images genre des visages, des photos détaillé comme des yeux, fleurs, ext couper plutôt dans « du vide, du blanc » car le template va l’éclater a l’affichage avec les modules et textes très long.

3. Sauver pour « le web » avec le nom index.htlm

4. Ouvrez ce fichier index.htlm avec Namo Web editor et convertissez le tableau obtenu en « boite de positionnement »

5. Supprimez d’un simple clique les parties de l’image que vous avez réservé pour vos modules et autres.

6. Convertissez maintenant votre boite de positionnement en tableau et arrangez le a votre goût, taille, largeur, couleur position ext.

7. Cliquez dans chaque cellules de votre tableau ou il y aura les modules et autre et choisissez dans « propriété des cellules » le texte aligné en haut et a gauche !

8. Notez que vous pouvez ajouter des trucs en plus depuis la du script, images, flash et bien plus.

9. Enregistrez et quittez.

10. Lancez dreamweaver, c’est mieux si vous avez installé « le plugin extensions spécial Joomla »

11. En premier lieu « dégagez », viré tout le texte d’en tête du code jusqu’à la balise « body » de votre code !

12. Pour Joomla « classique » Remplacez la par le header d’en tête, soit à la main, soit avec l’aide du plugin Joomla pour Dreamwaever en cliquant sur son icône.

13. Pour Joomla 1.5 ajoutez le code spécifique que vous connaissez et que j’ai pour mémoire fourni dans le poste du forum.

14. Cliquez simplement dans chaque cellule que vous avez réservée pour vos modules et attribuez grâce au plugin ou à la main le code de chacun des résultats que vous désirez voir apparaître. Pour Joomla 1.5 faite en de même mais en attribuant le code à la main obligatoirement. Pour rappel, il va de soit que vous ne devez pas mélanger le code mambo, joomla standard et joomla 1.5 !

15. Maintenant, allez en mode « code » et remplacez toutes les balises avec le chemin des images par la norme joomla, sans exception ! Exemple : on va dire que notre template s’appel « tuto » Photoshop a créé un dossier image par défaut et elles sont toutes dedans. Vous devez ajouter un chemin absolu, donc faite comme ceci : templates/tuto/images/le_nom_de_l’image_avec_son_extention_ (exemple : templates/tuto/images/mon_image.gif) (Vous pouvez aussi utiliser la fonction rechercher / remplacer)

16. Si vous regardez maintenant dreamwaever en mode aperçu, toutes les images ont disparu, c’est normal.

17. On va maintenant « nettoyer le code un maximum » afin de faciliter la validation W3C et CSS. Depuis le mode « code » vous avez l’option nettoyer le code, utiliser toutes les options possibles pour laisser le minimum, virez les balises, non Dreamwaever, World, Namo, les commentaires, tout ce qui est inutile !

18. Maintenant, sauvez votre fichier sous le nom célèbre de joomla : index.php.

19. Créé un dossier CSS avec son fichier inclus « template_css.css » pour Joomla standard que vous personnaliserez a votre goût ou un fichier « template.css » pour Joomla 1.5

20. Créez une mini-photo capture d’écran « template_thumbnail.png » du template.

21. Créez un fichier « templateDetails.xml » que vous personnaliserez à votre goût ou tout doit y figurer « images, fichier index.php ext … » sinon impossible de l’installer !

22. Pour Joomla 1.5 n’oubliez pas de modifier dans ce fichier « templateDetails.xml » en balise de début <install version=”1.5” type=”template“> et celle-ci de fin </install> et oui c’est pas pareil que <mosinstall type=”template” version=”4.5.2”> (ou 1.0.0) et </mosinstall>

23. Compressez le tout en *zip et installez votre template en local.

24. Si sa foire, virez le dossier installé en partie de votre site local dans le dossier template. Corrigez le fichier « templateDetails.xml » ou « index.php » c’est à 99, 99% la cause du crash.

25. Recompression et essayez a nouveau, si c’est ok, rendez vous en Fronted et admirez votre travail. Si le résultat et foireux voici un truc perso !

26. Ouvrez directement le fichier « index.php » avec dreamwaever depuis votre site » www en local » et corrigez votre template comme ça, a chaque modif, enregistrez sans fermez et voyez directement le résultat !

27. Si c’est bon, sauvez et quittez Dreamweaver.

28. Rendez-vous dans votre dossier « www en locale » et compressez alors votre template « corrigé » en lui donnant un autre nom par exemple.

29. Voila, c’est fini vous avez votre template qu’il ne vous reste plus qu’a vendre ou a offrir.

Eventuellement FIXME

Felichon eliopro.com 2006/09/04 16:36

Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki