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

Tuto Joomla | Adapter un gabarit HTML en template Joomla! : structure et styles

vidéo 31/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
    Adapter un gabarit HTML en template Joomla! : structure et styles
    00:00 / 08:33
    HD
    fullscreen

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

Détails de la formation

Nouvelle séquence consacrée à la création de template sur Joomla 1.5, nous allons dans ce cas de figure partir sur une structure HTML déjà existante et nous allons petit à petit poser les jalons de ces templates. Pour récupérer cette structure, nous allons aller récupérer un gabarit HTML qui se trouve disponible en le téléchargement sur le site d’elephorm, notre elephormateur Laurent a conçu un DVD sur XHTML et CSS, nous propose gracieusement d’aller utiliser le fruit de son travail, et nous allons télécharger gratuitement son gabarit comme indiqué, il s’agit d’un zip que nous allons extraire, et nous allons nous intéresser à un gabarit en particulier, le gabarit numéro 7. Ce gabarit est fourni avec 2 feuilles de styles, dont nous allons également récupérer la feuille de style de base et également une feuille de style spécifique à ce gabarit, la feuille de style gabarit 07. Nous allons récupérer l’intégralité, c'est-à-dire à la fois le fichier HTML et le répertoire entier style, nous utilisons le presse papier pour transporter tout cela dans notre zone de stockage, mon premier site, template, et nous créer un répertoire à cet endroit, dans lequel nous collons les sources. Retour dans Dreamweaver pour jeter un coup d’œil sur ce que nous avons copié, gabarit HTML, nous allons ouvrir cet élément, donc l’objectif va être d’aller intégrer dans ce template et dans cette structure HTML tous les éléments et tous les composants nécessaire à l’affichage du contenu de Joomla. Première étape, la création du template avec l’extension JTK, nous allons cliquer sur « Make best templates », et nous allons l’appeler « récup HTML » et nous ajoutons. Si la création s’est bien passée, nous devrions normalement récupérer un répertoire entier RecupHTML, nous allons le déployer et nous intéresser au fichier « index.php ». On va mettre, dans un premier temps, en mode code, et faire également de même sur le fichier HTML et nous allons récupérer grossièrement toute la partie comprise dans le « body » ici et dans la fin de cette balise « body » en bas. Comme ceci, nous allons copier l’information, et dans le fichier index, nous retrouvons également, toute la partie entête qui est quand même nécessaire pour Joomla et vous avez également ici une balise «body » dans laquelle nous allons tout simplement coller. Si on se met en mode fractionné, qu’on actualise dans Dreamweaver, vous voyez qu’ici, pour l’instant, la structure n’apparait pas bien, mais la mise en forme n’est pas respectée puisque la liaison avec la feuille de style n’est encore pas faite. Nous allons de suite fermer le fichier HTML qui n’est plus d’actualité, et revenir dans le répertoire où nous avions notre gabarit, nous allons tour à tour ouvrir la feuille de style base CSS et également la feuille de style associée à notre gabarit. Je vais récupérer l’intégralité, donc tous sélectionner, je vais plutôt faire « contrôle a » pour sélectionner l’intégralité, « contrôle c » pour copier et je vais retourner dans mon fichier index.php. Il va me falloir intégrer ce code CSS dans la feuille de style de mon template Joomla, je vais avoir pour cela un certain nombre de feuilles de style, je vais ouvrir la feuille de style template CSS et vous voyez ici que les choses ne se passent pas comme normalement on aurait dû voir les choses se produire puisque la feuille de style ne s’ouvre pas. Donc nous allons faire une petite manipulation au préalable, et cliquer sur le bouton « add local » que vous avez ici qui va faire la liaison avec les feuilles de style natives prévu par JTK et nous allons revenir sur la feuille de style et ici l’interface a un peu changé et je me retrouve, grâce à la manipulation que j’ai faite, avec un template a, en tout cas, une liaison puisque si j’ouvre ce template en double cliquant dessus, je vais avoir non seulement un certain nombre d’éléments CSS mais je vais aussi avoir ici de quoi dans ce template, charger toutes les feuilles de style et qui sont ici, alors concrètement nous avons ce fichier template et vous avez toutes les feuilles de style secondaire qui apparaît en dessous, je vais naviguer un peu vers le bas pour vous les montrer et j’ai également, les fichiers qui sont situés dans le dossier CSS de mon template. Je vais dans un premier temps supprimer l’intégralité, sauf bien entendu la partie haute, donc je sélectionne tout ça et je supprime, je vous rappel qu’il y a quelques instants nous avions sélectionné et copier les éléments que nous allons intégrer dans le templates. CSS. Nous allons retirer les commentaires qui sont à la fin. Éventuellement, ce que l’on peut faire si ça n’est pas déjà fait, nous allons préciser ici en commentaire qu’il s’agit de l’élément issu de CSS base.CSS, si nous avions besoin de faire à nouveau référence, nous nous remettons en bas, par simplicité, évidemment copier cette information, ce qui nous évitera de la re saisir en bas, et donc ici, je vais plutôt aller chercher les éléments de gabarit 07. Une nouvelle fois, je vais dans l’autre feuille de style, gabarit 07.CSS de mon template HTML, je récupère également l’intégralité, on va essayer cette fois-ci de ne pas récupérer les notes en bas du document comme ceci, je copie à nouveau, je retourne dans template, dans la zone commentée, j’intègre par « contrôle v », « open v » sur Macintosh les informations puis cliquer sur actualiser pour remettre les informations à jour. J’enregistre bien entendu mon template, je reviens sur index.php, et voyez qu’ici, les choses prennent un meilleur aspect finalement qu’elles avaient tout à l’heure. J’enregistre également, « contrôle s », j’aurais pu également, dans JTKtools, je vous le rappelle, cliquer sur le bouton « save all »qui aurait eu pour incidence de sauvegarder tous les fichiers où il y avait eu des modifications. Je n’ai plus besoin de CSS donc je vais fermer ce fichier, je vais fermer également gabarit 07 et je me retrouve avec mon template.

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