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

Tuto Joomla | Personnaliser un template avec ses paramètres

vidéo 27/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 avec ses paramètres
    00:00 / 15:39
    HD
    fullscreen

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

Détails de la formation

Illustrons les propose que je tenais à propos du titre news 1 tout à l’heure, nous allons reprendre le bouton inspecter, et l’idée va être d’aller affecter à ce titre la couleur du bouton un peu plus foncer qui se trouve à cet endroit là. Donc, nous allons faire pour cela, non pas comme tout à l'heure changer la couleur directement dans cette zone, mais identifier à cet endroit-ci la feuille de style associée aux templates qui gèrent bien entendu notre site actuellement et nous irons changer cette codification-ci pour aller avec la pipette rechercher exactement la couleur recherchée des échantillons de cette couleur. Je vais mettre dans mon presse-papier, sous cette forme-ci, que celle-ci est conforme en faite à celle que j’avais à cet endroit là. Déjà un premier test que je peux faire c’est, cliquer sur cette zone, à nouveau faire appel à mon presse-papier par le raccourci « contrôle v » sur PC et open v sur Mac et vous voyez que de suite mon titre prend l’apparence que je souhaite luis donner de manière définitive. Parfois, vous n’aurez pas la chance de bénéficier d’une numérotation d’une ligne dans Joomla, ce qui est notamment le cas, il faudrait plutôt passer par un éditeur de page HTML par exemple « Dreamweaver », nous allons pour cela, plutôt utiliser la sélection de toute cette codification CSS. Nous allons utiliser le presse-papier pour identifier rapidement par le bouton de recherche de Firefox, justement à quel endroit se trouve cette information. Donc, j’ai sélectionné et mémoriser par le presse-papier cette zone, alors je perds bien entendu la mémorisation de la couleur qui est là, mais vous l’aurez sur un bout de papier pour pouvoir la récupérer par la suite. Où se trouve cette feuille de « style2.CSS ? Je vais réactualiser pour vous montrer tout à l’heure les changements que nous aurons ici. Je vais fermer cette zone et nous allons retourner dans Joomla, extension et gestion des templates. Première possibilité, vous ouvrez les paramètres de votre template, vous activez un bouton « éditer le CSS », et vous avez la feuille de « style2 » qui apparait ici, il suffit de sélectionner le bouton radio et de cliquer sur éditer. L’autre possibilité, le fait d’installer au préalable le composant qui s’appelle « Quickxplorer », nous allons le ré ouvrir, identifier le répertoire de notre template, toutes nos feuilles de style sont stockées dans ce répertoire, et nous allons nous y rendre pour retrouver « style2 », et je peux directement, en cliquant sur le titre de ce fichier, faire apparaitre une fenêtre avec ici, l’ensemble des paramètres. Vous voyez qu’ici les lignes ne sont pas numérotées, d’où l’intérêt d’avoir, tout à l’heure, choisi d’aller plutôt mémoriser l’ensemble du code plutôt que de mémoriser la couleur. Contrôle f ou open f sur Mac, pour déclencher l’outil de recherche pour Firefox et contrôle v pour aller coller ce que nous avions sélectionné tout à l’heure avec Firebug et rapidement, il nous à identifier la ligne concernée, et vous voyez qu’ici apparait la couleur que j’avais tout à l’heure, donc un seul paramètre, nous allons changer cette couleur, comme j’avais noté tout à l’heure, 535D22. L’intérêt c’est que vous allez pouvoir aussi non seulement peut être conservé l’original et enregistrer sous un notre nom à la feuille de style si vous n’êtes pas sur de la manipulation que vous faites, donc il suffira simplement de redonner un autre nom en conservant tout de même l’extension.CSS. Si je veux écraser par contre la version précédente, ce que je vous conseil, je vais faire l’annulation de la saisi du code de tout à l’heure, d’aller sélectionner cet élément, de le copier et d’aller l’insérer dans une zone de commentaire. Le commentaire en CSS va se faire avec la barre de fraction et l’étoile qui se trouve ici, je rappelle mon presse-papier pour éviter d’avoir à tout re-saisir, et je ferme mon commentaire avec étoile barre de fraction. Donc, je peux, cette fois-ci sélectionner cette couleur, remettre à nouveau ce que j’avais mémorisé tout à l’heure, et je te rassure, si jamais la couleur ne me satisfait pas, de revenir à la couleur initiale.J’enregistre, je peux revenir ensuite sur le site. Actualiser, et constatez que cette couleur maintenant est inscrite définitivement pour ce titre. Nous avons pour illustrer nos propos installés un template de chez Rockettheme, nous allons revenir dans gestionnaire de template. On peut constater ici qu’il s’agit du modèle versadity 4. L’intérêt également des templates Rockettheme, c’est qu’ils ont un nombre assez impressionnant de réglages complémentaire qui ne nécessite pas que vous alliez parfois mettre la main à la pâte dans les feuilles de style. Nous avons par exemple ici, une première liste de choix où le template est décliné en 10 styles différents, nous sommes actuellement sur le numéro 2, je vais mettre sur le style numéro 3 par exemple, appliqué, et testé les modifications sur le site. Vous voyez ici, il s’agit en faite d’un jeu complet de couleur qui est automatiquement réactualisé si je choisis un autre style. Histoire de changer un petit peu, je reviens sur le site, et voyez qu’il me fait apparaitre à nouveau des couleurs et des déclinaisons de couleurs différentes sur l’intégralité du site. Autre possibilité, j’ai également des styles de menu différents, je suis actuellement sur le style numéro 3, je vais prendre le style numéro 1, j’applique, je retourne sur mon site et j’actualise, et voyez qu’ici, le style du menu principal en haut a été modifié. Un autre exemple, le fait de voir un entête qui sera soit, présente en continuité ou alors bénéficier également du fonds de notre page qui se trouve là, je vais activer la séparation, j’applique, je retourne sur le site et j’actualise. Vous voyez ici que j’ai une coupure et un marquage bien présent sur le template. On me propose également une zone où je vais pouvoir saisir très précisément la taille en pixel par exemple que je souhaite affecter à mon template, je peux dans certains cas, on va essayer de le faire ici, plutôt que de mettre une valeur en pixel, c’est de fixer une valeur en « % ». Donc, nous allons par exemple, dans un premier temps, tester le fait que nous voulons travailler plutôt en 850 pixels de large, j’applique, je reviens sur le site, j’actualise, et voyez qu’ici mon template à été réduit en largeur. Je vais éventuellement essayer, ça va être l’objet de mon test, plutôt travaillé en pourcentage. On va cette fois mettre l’unité de mesure en % puisque par défaut, il s’agit de pixel, je vais appliquer, et vois ce que cela donne côté site. Comme j’ai ici une résolution de 1024, normalement ça devrait fonctionner, vous voyez que la valeur en pourcentage ne fonctionne pas bien puisqu’il s’est mis, je pense, ici par défaut à 100 % de la largeur disponible alors je vais lui demander 90. Nous allons remettre la valeur initiale, 958 pixels. Il me propose même de le faire ici pour la bande de gauche et la bande de droite présente sur mon template, alors je vais déjà sauvegarder les changements, revenir sur les templates actualisés pour retrouve l’aspect de mon template initial, et j’ai ici le bandeau de gauche si je souhaite augmenter la largeur de 120 et passer par exemple à 250, ça pourrait être justifié si vous aviez des titres de lien un peu plus long que prévus, à ce moment-là, vous aurez d’avantages de place. J’actualise, et vous voyez que la largeur de ce bandeau augmente. Une petite nouveauté également, nous en parlions dans certaines séquences précédentes, le fait que vous ayez un éclatement des feuilles de style alors qu’avant nous avions qu’une seule feuille de style qui s’appelait « templateunderscorecss.css », quand nous cliquons sur éditer CSS, nous voyons ici qu’il y a un certain nombre de feuille de style, et en l’occurrence, quand nous choisissions tout à l’heure d’un style à l’autre, voyez qu’ici, je pense qu’ici il y a un rapport direct avec les feuilles de styles qui y sont associés. Vous avez la plupart du temps une feuille de style template ou « templateunderscorecss » comme simple, l’ancienne feuille de style qui sera plutôt dédié à une présentation générale et à une structure générale du template, et puis certains vont plutôt privilégier l’éclatement des styles liés justement aux différentes variations possibles. On pousse même le luxe jusqu’à créer une feuille de style spécifique à la mise en forme du texte. Un aspect important également des feuilles de styles, le fait que certains navigateurs n’ont pas le même comportement, et ce sera notamment le cas de l’ancienne version d’Internet Explorer, en version 6 et en version 7 parfois également, et d’autant plus en version 5.5, vous avez ici un certain nombre de paramètres. Souvent, ils sont en quantité très faible, mais ça permet de corriger certains comportements bizarroïdes que vous auriez sur ce navigateur. Comme tout le monde n’est pas dans la dernière version d’internet Explorer, mais il faut essayer de contourner ces soucis. Certains concepteurs de templates mettront également dans la partie paramétrage le fait d’avertir la personne que son navigateur étant la version 6 il serait pas mal de la mettre à jour, et à ce moment-là vous aurez un message qui apparaitra sous forme de bandeau en haut de votre page, en haut de la page du navigateur de l’utilisateur, et qui va l’inviter à cliquer sur un bouton, à mettre à jour son navigateur. Dernier aspect qui permets de personnaliser l’aspect du site, ce n’est pas forcément directement lié au template lui-même, mais plutôt au module. Nous allons pour cela, nous rendre entre autres sur le site de démonstration de Rockettheme. Sinon, vous pouvez, à cette adresse, consulter tous les templates qui sont disponibles et voir justement si l’aspect esthétique pourrait vous convenir et propose entre autres comme avantage de vous mettre à disposition, par exemple on vous dit ici 45 positions pour ce template, et vous avez parfois un schéma associé donc ça vous donne en faite un potentiel de mise en forme et de positionnement de votre contenu assez riche puisque la partie principale des articles de votre site figureront dans cette zone et toute cette zone identifier ici, left, right, user, showcases, banner, inset, etc, sont autant de zones dans laquelle vous allez pouvoir mettre des modules de manière très générale. Et puis, en parallèle, on vous propose des variations de module, ici on en compte une dizaine, et vous auriez en faite des variations qui seraient plutôt paramétrées pour des zones apparaissant plutôt en right ou en left, et des zones plus particulièrement dédiées à certaines positions par exemple la position user 1 2 3 et puis vous avez d’autres exemples un peu plus bas. Si nous souhaitons par exemple changer la couleur de notre module sur le côté gauche qui se trouve ici, on va lui affecter une couleur un peu particulière en allant faire référence au code qui est ici. Nous allons sélectionner ce code dans le presse-papier, contrôle C, revenir dans notre zone, qu’il s’agit de personnaliser par exemple cette partie-là, et nous allons pour cela dans le menu extension et gestion du module, identifier le module concerné, il s’agit ici du module « topmenu », qui gère ce groupe de menu, et nous pourrons rattacher au module et dans les paramètres avancés, utiliser le suffixe de classe de module. Donc, nous allons ici remplacer ce code existant par le code que nous avions copié tout à l’heure, nous appliquons, et votre module prendra bien entendu la coloration qui sera rattachée au style puisque là nous somme dans une dominante verte, et nous avions choisi tout à l’heure un style plutôt bleu pour voir si ces modifications ont réellement été prise en compte. Nous allons aller dans gestion des templates, « Verstatility », je crois que nous étions sur le style 2, nous allons vérifier assez rapidement. Vous voyez donc ici, il y a une association entre le code édit5 et la couleur que prend mon module ici.

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