Accueil » Code » Joomla » Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation

Tuto Joomla | Créer votre template

vidéo 29/43
  • Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

    Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

    La suite de cette vidéo est accessible après achat de la formation.
    previous
    summary
    resume
    next
    play
    Créer votre template
    00:00 / 22:00
    HD
    fullscreen

Ce cours vidéo fait partie de la formation Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation

Détails de la formation

Nous allons dans cette séquence voir plus en détail l’utilisation de cette extension Dreamweaver qui va nous aider à concevoir des templates pour Joomla. Nous avions dans la précédente séquence vu comment installer un nouveau site, nous allons procéder autrement et par le biais d’un bouton qui nous est proposé justement dans ce panneau, le mapfile que vous avez ici. En cliquant dessus, cet élément va en faite va vous ramener, si je clique sur ‘annuler » exactement au même endroit que la zone que vous avez ici « nouveau site » donc je vais cliquer là-dessus. Nous n’allons pas en faite remplir toutes les zones qu’il faudrait parcourir tour à tour dans le cas d’une installation standard, nous allons simplement faire en sorte d’avoir de quoi non seulement de concevoir des templates dans Dreamweaver mais également de pouvoir les stocker directement dans le site Joomla que nous avons installé et testé au fur et à mesure également l’aspect que prendra notre template au fur et à mesure de sa construction. Nous allons dans un premier temps renommer ou donner un nom à ce site, virtuel mon premier site, je vais lui dire ensuite où localement cet élément se situe, donc il s’agit du chemin standard, programmes files, XAMPP, Htdocs, mon premier site et je vais lui repréciser que physiquement les éléments sont à stocker dans ce dossier template. Nous allons ensuite préciser à quelle adresse il va falloir que nous naviguions pour tester notre site, donc il s’agit cette fois-ci de l’URL qui reprend en faite le même nom que le répertoire par défaut que nous avons dans Htdocs, mon premier site et nous allons ici désactiver le cache, ce qui n’aura pas, en tout cas pour ce que nous aurons à faire, d’intérêt. Nous n’allons pas non plus ici utiliser d’information distante, qui serait la plupart du temps plutôt orienté sur une connexion de type FTP, il s’agit de tester, de travailler localement donc nous n’aurons pas de transfert de fichier à faire aussi bien du local vers le distant que du distant vers le local. Nous allons rester tout simplement sur ce premier réglage. Je vous rappelle un nom de site, le je chemin jusqu’au répertoire du site dans un premier temps, ensuite du sous répertoire template et vous aurez après le chemin et l’URL pour que l’on puisse visualiser le site en temps réel ; cliquons sur « ok ». Autres réglages également que vous pouvez faire à partir de ce panneau, le fait que vous alliez gérer les réglages vous concernant, puisque vous allez devenir auteur de template. Vous avez ici dans le panneau Settings, le Satup Profile, vous aurez en faite systématiquement le rattaché à vos templates Joomla 1.5 un fichier XML à la fois de description bien entendu de l’auteur de template mais également ce fichier XML va lister entre autres toutes les positions que vous aurez utilisées dans votre template. Nous allons compléter rapidement cette zone, on va faire un petit peu de publicité et le site de l’auteur et vous mettez à jour ce profil. Nous pouvons déjà procéder à un premier test, le bouton servant à démarrer un nouveau template va se situer dans la partie « outils » avec ce bouton Make best template Files, nous allons cliquer dessus et la première des choses bien entendu sera de lui donner un nom, par la suite vous pourriez finaliser cette installation ou ce paramétrage avec une vignette qui voyez par défaut va être d’une taille de 206 pixels par 150. Je vous rappelle également que cette vignette doit porter un nom bien précis, elle se trouve donc dans votre répertoire template, vous aurez bien entendu un répertoire qui sera créé lors de la validation de cette zone et vous avez ici un fichier point PNG à générer dans la taille, voyez que c’est inscrit en faite ici, avec bien entendu le même nom. Je reviens au dossier précédent, dans Dreamweaver donc je vais l’appeler ici « mon premier template », je valide et j’ajoute. Petite vérification rapide, vous voyez qu’ici en fonction du ma page que nous avons faite tout à l’heure dans la gestion du site qui je vous rappelle se trouve ici, ou à travers du bouton Map Files, nous avions indiqué le répertoire template comme étant la zone qui devait s’afficher ici par défaut et vous voyez qu’il est bien créé, le répertoire mon template ; alors, nous pouvons également le vérifier de l’autre côté, côté disque dur, nous avons bien ici le répertoire et voyez que l’extension a tout simplement lors de cette création créer toute la structure nécessaire et pour partir sur une base satisfaisante avec notamment un certain nombre d’éléments présents dans le dossier CSS un certain nombre d’images également, quelques éléments java script qui serviront notamment si vous mettez en place un menu de type Saker fiche qui est un menu avec des aspects d’ouverture en déroulement et puis bien entendu, dans un éditeur d’image vous iriez concevoir une image de 206 pixels par 150 pixels servant à l’illustration de votre template. Donc, il y a tous les éléments pour travailler, nous allons également jeter un coup d’œil sur un fichier que nous vous décrivions tout à l’heure, qui était le fichier XML, il se trouve à cet endroit-ci donc template details.xml, je double clic pour entrer dans Dreamweaver et j’ai ici notamment toutes les informations que j’avais posées tout à l’heure dans le bouton settings qui, je vous rappelle, est à cet endroit-là, le Setup Profiles. Vous avez en faite les informations qui viennent se glisser à cet endroit là, si je démarre mon site en lançant d’abord mon navigateur et en saisissant l’adresse, je me logue sur le back-office Joomla, je vais dans le menu extension, gestion des templates, je constate ici vous voyez que j’ai l’intégralité des templates déjà existants et mon premier template. Avant d’aller tester et de voir l’aspect à mon template, je vais tout simplement retourner dans Dreamweaver et montrer qu’en faite l’essentiel du travail va se faire sur deux fichiers principaux, le fichier index.php qui aidera à structurer la partie HTML de votre template et également la partie php lié aux positions de vos modules. Vous aurez également une zone particulièrement importante qui est la zone ici CSS. Donc si j’ouvre le fichier Index.php, je constate en faite que ce fichier dans la partie affichage création est vide de contenu, si je me mets en mode code, j’ai un code également qui intègre tout le code de base de mon template, vous voyez que la zone body est complètement vide et vous allez voir la conséquence que ça va avoir quand je vais définir ce template par défaut. Nous allons d’ailleurs le faire de suite, je retourne dans Joomla, je défini ce template comme mon template par défaut, je pré visualise et je vais constater en faite, une jolie page blanche en face de moi. Si jamais je vais rechercher un autre template, je constate ici qu’il ne s’agit pas d’un plantage puisque mon site contient bien des informations. Joomla a dans sa base de données suffisamment de contenu, en tout cas pour démarrer et afficher les informations, seulement vous constatez que c’était justement mon discours de tout à l’heure, nous n’avions en faite aucune information dans le fichier Index.php et dans la partie body. Nous pouvons également choisir la méthode de fractionnement, pour avoir d’une part dans la partie haute le code et dans la partie basse l’environnement plutôt visuel.
Première conception sur ce template, nous allons créer une structure relativement simple au travers, par exemple, d’un site comportant et figurant dans une structure de type tableau avec un tableau que nous allons insérer dans le menu insertion tableau et nous allons faire en sorte que ce tableau ait par exemple une zone d’entête, une zone principale et une zone de pied et puis également trois colonnes donc, trois lignes et trois colonnes. Nous allons fixer par exemple ici un tableau qui aura 900 pixels de large, des bordures avec une largeur de 0 et ok. La structure étant réalisée, je vais par exemple demander ici à aménager cette zone et par un clic droit je vais pouvoir trouver les fonctionnalités liées à mon tableau et notamment le fait de fusionner mes cellules, je vais faire de même pour la partie basse et ces zones pourraient représentées par exemple ma zone de pied et ma zone d’entête du template ; et donc ici je vais faire en sorte d’aller positionner une zone où je pourrais glisser par exemple la position left et je vais glisser également dans cette partie-là, la position right même si initialement dans le site actuel je n’ai pas cette position et de module publié, mais nous irons en publié un de suite. J’ai par exemple sélectionné cette zone et vous allez voir en faite que l’extension va faciliter notre travail. J’ai dans la partie Settings la possibilité en cliquant sur nine ici de lister toutes les positions qui sont disponibles par défaut dans l’installation que je viens de faire dans cette extension donc voyez qu’on retrouve les positions classiques comme le left, le right, nous avons également la partie Top, etc.. Quelques users également qui y figurent. Si vous aviez besoin de rajouter des positions, il suffit tout simplement de cliquer sur «+ » et de leur donner un nom, attention de ne pas employer des noms qui soient déjà utilisés dans la liste. Une petite remarque importante, dès que vous avez rajouté les positions, cela nécessitera que vous redémarriez Dreamweaver pour que l’extension GT4 prenne en considération votre demande, donc là nous allons fermer et la liste que je vous présentais est la même en terme de contenue que celle que vous avez ici. C’est ce que nous allons justement utiliser, nous allons nous positionner dans la case souhaitée, voyez qu’actuellement dans le code HTML il s’agit ici d’une cellule avec la basse liste D qui est vide de contenu, simplement la codification de l’espace et nous allons ici cliquer dans la liste choisir la position left et nous ajoutons cette position. Dans la partie visuelle figurera ce petit picto et vous constatez de suite, alors je vais remettre le code entièrement en visu, vous avez ici tout le code associé qui vous permettra justement de voir entre autres qu’il s’agit d’une zone de type module avec ici le nom de la position. Je refractionne à nouveau ce code. Si je me contente simplement de cette insertion, je vais enregistrer mon travail et pour cela je vais le faire à partir du menu fichier enregistré. Je peux également utiliser sur le panneau de cette extension le bouton enregistrement « save all ». Save all signifie tout simplement que si vous aviez en plus du fichier Index.php, voyez que je viens de créer et qui n’est pas encore modifier et enregistrer surtout puisque l’étoile apparaît, j’aurai pu également en parallèle modifier des feuilles de style qui serait ouvert à l’écran et je souhaite enregistrer le tout d’un seul coup. Alors vous l’équivalant également dans cette zone « enregistrer tout » c’est l’équivalent de ce bouton que vous avez là. Par simplicité parfois, il est plus rapide d’aller sur ce bouton, c’est ce que je vais faire et vous constatez que le fichier Index.php a été enregistré. Je retourne sur mon site, sur ma jolie page blanche j’actualise et je constate vous voyez que toutes les modules qui sont publiés côté left dans la partie administration, vous voyez que si je vais dans gestion des modules et que je filtre sur la position left, alors je vais faire en sorte de n’afficher que ce qui est activé, dans un premier temps, vous voyez que j’ai bien Top menu et Login form qui figurent en faite, sur le côté. Si jamais je dépubli Login Form, que je réactualise, vous voyez qu’ici le fonctionnement optimal tel qu’on a l’habitude de voir les modules fonctionner dans Joomla, donc je vais réactiver ce module, je retourne dans Dreamweaver, si je veux y ajouter une position right sur le template, je peux le faire de manière soit j’utilise la méthode que j’avais employée tout à l’heure right et je clic sur add module, je peux également créer en faite une insertion de type conditionnel. Cela signifie que j’aurai ici bien entendu une position right qui apparaitra, simplement si je n’ai aucun module de positionné ou de publié dans cette zone, cette zone va automatiquement se rendre disponible au profil justement de la zone qui est juste à côté qui sera dédié à mon contenu principal. Alors comment fait-on se genre de chose, on se met dans la position du tableau, dans la cellule et je vais cliquer sur le bouton « add conditions », je sélectionne la position que je veux rajouter, alors je suis en parallèle des informations qui sont situées pour l’instant, je vais ajouter simplement une position classique et standard, je clique et il m’intègre en faite le même code que tout à l’heure si ce n’est que, il me fait précédé un « if » pour justement voir si cette position ou si des modules sont publiés, il suffit d’un module publié pour qu’il aille directement accepter le fait de le publier en position right. Si j’ai souhaité bien entendu le publier à cet endroit là. Je clique à nouveau sur « save all », je reviens sur mon site côté public, j’actualise et je vais retrouver mon formulaire d’identification et voyez que pour l’instant, je n’ai rien en position right, je vais vérifier quand même. Je retourne dans gestion des modules, vous voyez qu’actuellement je n’ai aucun module de publié, je vais publier par exemple « le petit sondage », je reviens sur le site et vous voyez que de suites se position l’élément que j’avais souhaité. Je vais revenir dans Dreamweaver, je vais ensuite m’occuper de la partie centrale, j’aurai ici non pas une position qui sera dédiée à cela, mais j’ai des boutons en faite qui se situent à cet endroit-ci et je vais retrouver par exemple le fait de vouloir, dans ma structure HTML, intégrer ce que l’on appelle le fil d’Ariane qui vous permet en faite, de localiser l’endroit où vous vous trouvez sur le site, côté public bien entendu et d’utiliser ce fil d’Ariane, avec des intitulés comme liens hypertextes, qui vous permettent de revenir à des éléments parents de l’endroit où vous vous situez. Je vais, moi, plutôt utiliser le bouton qui est juste à côté qui est le bouton Main composant, il s’agit en faite ici du code qui intègre justement la zone principale. Je vais ensuite enregistrer, vous pouvez également si vous le souhaitez faire simplement un « contrôle S » pour enregistrer les modifications, ce qui est un peu plus rapide que d’aller chercher le « save all » ici simplement pour un fichier. Je reviens sur le site, j’actualise et je vais me retrouver en faite avec une partie de mes articles présents à cet endroit-là, voyez qu’ici comme je n’ai pas précisé le type d’alignement verticalement qu’avaient mes éléments, mes cellules de tableau, je me retrouve en faite avec des éléments qui sont par défaut verticalement positionnés plutôt au milieu. Comme j’ai beaucoup d’articles, je me retrouve avec les éléments qui sont à utiliser constamment la navigation verticale. Alors, je vais corriger rapidement cet élément, côté Dreamweaver, je vais par exemple sélectionner cette cellule et dans Dreamweaver demander un alignement vertical de types haut. Je vais faire de même pour la cellule qui est ici et également pour ceci même si ce n’est pas forcément utile de le faire partout. Pour m’en assurer, je le fais sur toutes les cellules de cette ligne. Je reviens sur mon site, j’actualise et j’ai bien ici, vous voyez petit à petit mon site va prendre forme. Poursuivons la personnalisation en rajoutant par exemple un bandeau d’entête à ce site, nous allons pour cela cliquer dans la partie haute ici et classiquement insérer une image. Dans le répertoire de mon template, j’ai une image que je vais utiliser pour cela, qui est ce petit bandeau que vous avez ici, que j’intègre et à partir du moment où je sauve, je reviens sur mon site et j’actualise, vous allez constater en faite que cette image ne se charge pas. Je reviens sur le site, une chose à faire c’est qu’actuellement vous avez en faite une intégration on va dire standard de cette image dans le code HTML, il faut plutôt réagir avec une intégration d’une image qui va faire partie d’un site dynamique, donc en relation avec une base de données et pour cela nous allons bénéficier d’un bouton qui va nous permettre de tester et d’intégrer correctement cette image en allant cliquer sur le bouton « image » que vous avez ici, qui est l’équivalent de ce que nous avions fait tout à l’heure dans le menu, mais qui va intégrer ça également d’un point de vu dynamique. Si l’image est déjà présente, nous allons utiliser ce bouton, alors qu’il rend impossible l’affichage de cette image, mais qui va intégrer correctement sous la forme d’un code php cette image. Nous allons procéder à l’enregistrement, à une actualisation et vous voyez que par cette manipulation, j’ai intégré le bandeau en haut. Si je souhaite par contre continuer à le voir dans Dreamweaver, je peux cliquer sur ce bouton et avoir un aperçu, vous voyez que je peux sans aucun problème, après remodifier ce code dans un sens ou dans l’autre. Je vais tout simplement sur cette zone t’aider et faire en sorte que mon image soit par exemple centrée. J’enregistre et je réactualise une dernière fois.

Cette formation Joomla est également disponible dans les packs suivants

0 Notes et avis
Note moyenne:
5 5 0 1
1
Donnez votre avis sur la formation Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation !
Vous devez acheter cette formation pour écrire des commentaires