Un petit article qui présente comment ajouter une position dans un template Joomla pour un module. Utile lorsque son template ne donne pas entière satisfaction et que l’on voudrait bien l’améliorer avec de nouvelles positions.

Joomla! : Ajouter une nouvelle position de module dans un template Joomla!

Joomla! : Ajouter une nouvelle position de module dans un template Joomla!

Ici je vous présente le cas d’un site avec une grande bannière. L’objectif sera de rajouter le module de recherche en haut à droite de celle-ci. Pour cela je vais rajouter un emplacement dans le template.

Pré-requis : La démonstration se passe en local, mais vous pouvez le faire sur un site en production de la même façon. Pour la démonstration en local vous devez avoir un serveur web. Ici j’utilise Wamp et si vous souhaitez l’installer vous pouvez consulter le tutoriel.

Vous pouvez consulter la vidéo :

Ou le tutoriel écrit :

Je me connecte sur mon site internet. Mon objectif est d’insérer le bouton recherche dans l’encadrer rouge en haut à droite de ma bannière. Pour le moment je n’ai pas encore de position à cet endroit dans mon template.

Template Joomla!

Je pourrais, par exemple, le vérifier en indiquant après mon adresse de site index.php?&tp=1 qui m’affichera les positions disponibles dans mon template Joomla!.

Afficher la position des modules dans template Joomla!

Maintenant, je passe aux choses sérieuses. Je clique gauche sur mon icône Wamp, ou je vais directement dans le dossier Wamp, puis j’ouvre le dossier WWW où se trouve mon site internet.

Serveur Wamp

Dans celui-ci je vais dans templates puis je rentre dans le template utilisé actuellement par Joomla!. Ici, le mien s’appelle vin13.

Sélection du template Joomla!

Je sélectionne index.php et je l’ouvre dans mon éditeur de texte. J’utilise Notepad ++ mais vous pouvez utiliser celui que vous voulez, il y en a beaucoup d’autres.

Editer un template avec notepad

Je commence la manoeuvre. Je dois insérer la ligne <div class= »nom_de_ma_position »> <jdoc:include type= »modules » name= »nom_de_ma_position » style= »xhtml » /> </div> à l’endroit où je souhaite insérer ma nouvelle position. Pour moi il s’agit de l’en-tête. Je sauvegarde et retourne dans le dossier template vin13.

Utilisation de notepad

Je sélectionne et lance dans mon éditeur de texte le fichier templateDetails.xml

Modifier template Joomla

A la fin de celui-ci, je rajoute dans la liste position, ma position avec le nom que je lui ai donnée, ce sera donc <position>nom_de_ma_position</position>. Je sauvegarde et retourne dans le dossier template vin13.

Modifier XML du template Joomla

Maintenant je rentre dans le dossier css de mon template. Je sélectionne et lance dans mon éditeur de texte template.

Modifier CSS

A la fin de celui-ci je rajoute les détails de positionnement de mon module. En l’occurrence, ceux-ci seront positionnés à droite à 20pixel de la bordure droite et 13pixels de la bordure du haut.

Pour les connaisseurs vous aurez remarqués que j’ai oublié le point-virgule après 13px. J’ai été trop vite dans la vidéo, donc il vous suffit de le rajouter. Je sauvegarde.

Panneau administration Joomla

Désormais, je me connecte sur mon panneau d’administration.

Je vais dans la gestion des modules.

Nouvelle position module Joomla!

Je sélectionne le module qui m’intéresse, en l’occurrence recherche.

Nouvelle position module Joomla!

Dans la position on voit que ma nouvelle position header apparaît. Je la sélectionne.

Nouvelle position module Joomla!

Une fois ma position header sélectionnée je sauvegarde.

Nouvelle position module Joomla!

Je peux donc voir que recherche à bien comme position header.

Nouvelle position module Joomla!

Maintenant, le moment de vérité, je me connecte sur mon site. La recherche est bien en haut à droite de la bannière. Ma nouvelle position est en place.

Nouvelle position module Joomla!

Je peux le vérifier en affichant les positions du template. Celles-ci sont bien visibles en haut à droite de ma bannière.

Nouvelle position module Joomla!

Ce tutoriel est maintenant terminé.

Pin It on Pinterest

Share This