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

Tuto Joomla | Personnaliser un template existant : choisir les bons outils et les utiliser

vidéo 26/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
    Personnaliser un template existant : choisir les bons outils et les utiliser
    00:00 / 11:25
    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, aborder un élément fondamental qui est l’aspect personnalisation de votre template. A partir du moment où vous installez un template, qui est soit gratuit ou payant, il a la particularité d’être commun finalement à toutes les personnes qui vont l’installer sur leur site et donc l’intérêt c’est d’y apporter votre touche personnalisée. Avant que nous commençons cette partie-là, un petit conseil, d’abord d’utiliser Firefox pour personnaliser cet aspect graphique de votre site, et puis également, 2 extensions pour firefox, l’une qui s’appelle « firebug », qui vous permettra rapidement, en passant en revu votre template, d’identifier d’un seul coup les zones à la fois html de votre page, mais également tous les styles qui sont associés à ce code html. Nous allons pour cela aller dans le menu outils, module complémentaire, aller tour à tour installer firebug dont je vous parlais à l’instant, et « colorzila » qui est un outil vous permettant d’échantillonner les couleurs sur votre écran. Vous allez cliquer sur obtenir des extensions, si vous avez la version 3 2 Firefox, l’information se trouverait plutôt dans le haut en allant chercher des éléments complémentaire. Compléter les extensions des catalogues, je crois de mémoire, qu’il s’agit de ce titre et de ce lien. Nous allons cliquer sur « obtenir des extensions », Firefox nous renvoie vers un moteur de recherche que nous allons utiliser pour aller dans un premier temps, rechercher l’extension qui nous intéresse, chose qu’il a trouvée. Il se trouve que la version actuelle de firebug, comme il est écrit sur le côté, est seulement compatible avec une version 3.5 bêta 4 qui est la version maximum que vous puissiez utiliser avec cette extension, nous allons cliquer sur le lien de la version plus ancienne puisque nous somme actuellement plutôt en version 2 de Firefox. Vous pouvez bien entendu le vérifier en allant dans le menu « ? » à propos de Mozilla Firefox et vous avez la version qui s’affiche ici. Je trouve une version équivalente à ce que je souhaitais. Une petite remarque assez importante liée à l’installation d’extension, pour que ces extensions soient valides, il est obligé de redémarrer votre navigateur donc, quand vous installez comme cela des extensions, veuillez à ne pas avoir trop d’onglets ouvert, car tout à l’heure, à m’obligera à me déconnecter du backoffice de Joomla avant de pouvoir bénéficier des outils que je suis en train d’installer. Nous allons cliquer pour ajouter cette version, je vais plutôt prendre celle-ci, puisque les autres sont des versions bêta, j’installe, et comme je vous l’indiquais, il vous propose de redémarrer. Nous n’allons pas faire le redémarrage tout de suite, je vais plutôt aller télécharger la deuxième, colorzila. Vous avez ici un souci différent du premier puisqu’on n’a pas de problème de version, si ce n’est qu’il vous propose parfois aussi des déclinaisons avec ici, une mise en garde avec le fait que ce soit une extension expérimentale et donc à utiliser avec prudence. Nous allons plutôt utiliser cette extension-là, nous allons l’installer à nouveau, fermer cette partie-là et puis nous débarrasser de toutes les fenêtres qui sont ouvertes, penser à nous déconnecter proprement du backoffice de Joomla et procéder au redémarrage standard de votre navigateur. Ceci étant fait, nous allons retourner sur notre site, je vais charger également ma page côté public et vous constatez en bas de l’écran qu’il y a dorénavant 2 petits pictos sur le côté droit et le côté gauche sous forme de pipette, et sur le côté droit une espèce de scarabée qui bien se glisser à cet endroit là. Si nous utilisons colorzila qui est ici nous pourrons cliquer, clic gauche, faire apparaitre le curseur qui nous permet de nous déplacer dans notre écran et à chaque fois que nous survolons une couleur, la couleur viendra s’identifier sur la pipette si vous cliquez, l’identification est arrêtée, et vous voyez qu’on est stoppé sur cette partie-là, je clique droit, et je vais avoir ici, tout un tas de déclinaison de cette couleur, soit avec un mélange rouge, vert, bleu, soit, codifier directement en hexadécimale pour le web, ce qui nous intéressera doublement ici. Et à chaque fois que vous aurez besoin de réutiliser assez régulièrement cette couleur, je vous invite a utiliser la zone « rajouter cette couleur aux favoris ». Si je stocke cette couleur, je vais pouvoir ensuite retourner par un clic droit, visualiser ma palette de favoris, celle qui se trouve à cet endroit et vous avez ici « favorites », qui est en faite la palette des favoris. Vous voyez qu’on retrouve la couleur que j’ai échantillonnée tout à l’heure, si jamais, je reprends à nouveau mes pipettes et que je vais plutôt chercher cette couleur un peu plus sombre, je clic dessus, clic droit, « rajouter cette couleur aux favoris », clic droit à nouveau, « palette des couleurs », vous voyez qu’ici, j’ai une couleur supplémentaire. Couleur, dont les détails apparaissent aussi dans cette zone. Concernant firebug, quand on clic dessus, il sépare en faite notre écran en deux zones distinctes, la partie haute sera pour notre site, la partie base sera dédié à firebug, cet écran se divise également en deux bandes droites et gauche. Cette bande de gauche parlera plutôt du code html, cette bande de droite parlera plutôt des réglages CSS de notre page. Vous avez également, deux manières, côté CSS, d’avoir des informations. Principalement ici, d’avoir la liste des styles et vous aurez dans apparences la possibilité de récupérer les tailles des éléments sur lesquels nous allons passer tout à l’heure. En allant inspecter cette page, si je clic sur « inspecter, vous allez voir que sur tous les éléments sur lesquels je passe, ils vont venir s’entourer de bleu et vous voyez qu’à chaque fois il me donne en faite la cotation de cet élément, je cliquer maintenu pour vous décrire cette fenêtre, donc nous avons ici, les détails complets avec les marges qui sont identifiées en jaune, les bordures qui vont être sélectionnés, la marge intérieure et la taille réelle du bloc. Donc ici, 168x167 représentent réellement la largeur et la hauteur de ce bloc, hors marges, que ce soit des marges internes ou marges externes, et également les bordures. La bordure ici est égale à 1, que ce soit la bordure du haut, la gauche, la droit ou du bas. Si je retourne aux styles, j’aurai également lors de l’inspection, si je veux identifier les informations liées à ce titre d’article, quand je vais cliquer dessus, je vais avoir ici un certain nombre d’informations pour identifier notamment par exemple la couleur qui a été employée pour cette zone. Si je le souhaite, je peux également tester une autre couleur, je vais par exemple changer la couleur de cet élément en mettant plutôt du noir, et vous voyez que de suite mon titre prend la couleur noire. Il est clair que je n’ai pas changé les aspects de ce site qui ne m’appartient peut-être pas, qu’il ne s’agit pas du mien, simplement quand vous allez réactualiser votre page, votre page reprendra cet aspect initial qu’elle avait. L’autre avantage, c’est le gain de temps assez important qui nous permettra notamment dans Joomla d’aller identifier la feuille de style qui va gérer ce paramètre, voyez qu’ici il y a un certain nombre de paramètres de classe qui apparaît, ces classes vont se situer dans un fichier particulier qui s’appelle « style2.CSS et les informations qui sont contenues et ce paramètre si je souhaitais de manière définitive comme je l’avais fait tout à l’heure en test, affecter cette couleur noire au titre, il me faudrait naviguer jusqu’au fichier style2.CSS jusqu’à la ligne 11. Concernant cet écran, je peux également lire de manière un petit peu différente les éléments qui sont sur ma page, je constate en faite que la zone que j’avais sélectionnée tout à l’heure fait partie de la cellule d’un tableau puisqu’il m’indique cette fois-ci dans la partie de gauche ici qu’il s’agit d’une balise html TD, mais vous voyez qu’au survole, il me permet de sélectionner les éléments tour à tour pour aller identifier par exemple ici que les pictos qui se trouvent sur le côté droit de mon article sont aussi compris dans des cellules. On a en faite des tableaux ici qui ont tout simplement une ligne et sur cette ligne, 3 colonnes, ce qui signifie ici, vous voyez au survole, j’identifie les 4 cellules qui ont chacune d’elle un réglage particulier. Si je clic sur cette cellule ci, je vais avoir les styles CSS qui sont associés. Et j’ai bien entendu, à chaque détail, la possibilité d’étendre ou de réduire les parties du code qui m’intéresseront. Tout cela parait bien compliqué, mais il est d’autant plus compliqué d’interpréter le code de cette page en passant par des chemins plus traditionnels par exemple le clic droit, « code source de la page», l’équivalent de la manipulation que j’ai fais tout à l’heure devrait maintenant se faire à cet endroit-ci, et un aspect, d’une part la difficulté d’interprétation et de recherche des informations comme vous l’aurez constaté, mais l’autre avantage c’est qu’on a bien entendu, en juxtaposé à la fois les informations liées à la partie html et la partie CSS.

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