Nous passons énormément de temps dans la partie administration de Joomla. C'est un peu notre deuxième bureau et peu d'extensions sont disponibles pour le personnaliser.

Avec l'ajout d'extensions, le menu composant peut devenir très long avec des items dont les noms peu explicites et classés par ordre alphabétique ne facilitent pas leur repérage.

Nous allons voir dans cet article comment personnaliser le menu composants (ou un autre) avec une méthode simple qui subira sans broncher les mises à jour de Joomla!

Mais comme une bonne image vaut mieux qu'un long discours, voici mon menu avant et après

Le menu avant et après

Nous allons utiliser 2 méthodes pour arriver à nos fins.

  1. la mise en évidence ou le masquage des items par des règles CSS
  2. la modification des libellés avec le mécanisme des substitutions de langage de Joomla

1ère étape : les adaptations CSS

Création d'un fichier custom.css

Pour cela nous allons créer un fichier "custom.css" dans le dossier /administrator/templates/isis/css ou /administrator/templates/hathor/css selon le template utilisé pour l'administration de votre site.

Depuis la version 3.4 de Joomla, ce fichier, s'il existe, est automatiquement chargé par le template. Pour les versions antérieures, vous pouvez utiliser mon adaptation du plugin custom_css disponible sur mon site lomart.fr

Création des règles CSS

Les items des menus ne sont pas identifiés par une classe ou un id, nous allons donc recourir à une méthode de sélection peu utilisée, mais très efficace: le sélecteur d'attribut.

Il nous suffit de connaître la fin de l'url appelée par le menu. Cette URL est affichée en bas à droite de la plupart des navigateurs.

Identification du composant

Pour le composant Bannières, com_banners permet d'identifier l'action du menu.

Nous allons ajouter la règle suivant dans notre fichier custom.css:

#menu li a[href$="com_banners"] {color:#aaa;}

Cette règle spécifie que la balise "a" dont la fin ($=) de son attribut "href" est "com_banners" sera affichée en gris pour en minimiser l'importance en se laissant la possibilité d'y accéder. #menu et li sont souvent inutiles, mais indispensables pour lever une ambiguïté ou augmenter la priorité de la règle.

Identification du composant

Un petit problème, un autre item du sous-menu est également en gris. Pour éviter cela, il suffit d'être plus précis pour la valeur de l'attribut href en indiquant "option=com_banners " pour que tout rentre dans l'ordre.

Exemple

Le résultat ci-dessous est obtenu à partir des règles CSS suivantes (super-commentées).

/* LES EXTENSIONS UTILISEES SOUVENT
 * ajout d'un fond coloré pour bien les repérer
 */
li a[href$="com_osmeta"],
li a[href$="com_phocadownload"],
li a[href$="com_flexicontact"],
li a[href$="com_acymailing"] {
	background-color:beige;
}

/* LES EXTENSIONS UTILISEES SOUVENT AVEC GESTION SOUS-MENU
 * étape 1 : par défaut, on met en gris toutes les options
 * étape 2 : on ajoute le fond et la couleur du texte des options principales
 */
li a[href*="com_gmapfp"] {
	color:#aaa;
}
li a[href$="option=com_gmapfp"],
li a[href$="controller=gmapfp&task=view"] {
	color:#000;
	background-color:beige;
}

/* LES EXTENSIONS A NE PAS OUBLIER
 * Un texte rouge sur un joli fond jaune pour ne pas avoir d'excuse d'oublier la sauvegarde
 * #menu évite que le style soit appliqué au menu latéral des fenêtres "paramètres"
 */
#menu li a[href$="com_akeeba"] {color:red; background-color:yellow;}
#menu li a[href$="com_akeeba"]:after {content: " - IMPORTANT";}

/* LES EXTENSIONS DU SUPERADMIN EN CHEF */
li a[href$="com_jce"],
li a[href$="com_xmap"] {color:#333;}
li a[href$="com_dump"] {color:#ddd;}

/* LES EXTENSIONS DONT LE TEXTE N'EST PAS REMPLACABLE
 * Le libellé de J!Dump ne pouvant être modifié par la méthode des substitutions de langage, on le fait en CSS
 */
#menu li a[href$="com_dump"]:after {content: "(Debug programmation)";}

/* LES EXTENSIONS PEU UTILISEES
 * texte en gris foncé
 */
li a[href$="com_redirect"],
li a[href$="com_tags"] {color:#888;}

/* LES EXTENSIONS INUTILISEES
 * texte en gris clair
 */
li a[href$="com_postinstall"],
li a[href$="com_joomlaupdate"],
li a[href$="com_search"],
li a[href$="com_finder"],
li a[href$="com_contact"],
li a[href$="com_newsfeeds"] {
	color:#bbb;
}

/* LES EXTENSIONS CACHEES
 * une règle display:none pour ne plus les voir.
 * il est bien sûr possible, d'en certains cas, de désactiver l'extension.
 */
	li a[href$="com_banners"] {
	display:none;
}
/* LES EXTENSIONS AVEC ICONE
 * Pour le fun, il est possible d'ajouter des icônes ou d'utiliser celles disponibles dans le template
 * La notation abrégée "background" est impossible pour conserver les règles de couleur lors d'un survol
 */
#menu li a[href$="com_akeeba"],
#menu li a[href$="com_messages"] {
	background-repeat:no-repeat;
	background-position: 2px center;
}
#menu li a[href$="com_messages"] {
	background-image: url("../images/emailButton.png");
}
#menu li a[href$="com_akeeba"] {
	background-image: url("../images/akeeba.png");
}

2ème étape : la modification des libellés

Le classement alphabétique et la pertinence du nom des items ne facilitent pas leur repérage rapide dans la liste. Avec l'habitude JCE administration, nous dit quelque chose, mais laisse pantois l'administrateur débutant.

De même, il serait bien de regrouper les extensions de même but. Cela est possible, avec un nom composé de la fonction de l'extension suivi de son nom. Exemple: SEO: Redirection, SEO: OSmap

Pour réaliser cela, il faut se rendre dans la gestion des langues / substitution pour l'administration

Substitution des langues

Le bouton "Nouveau" permet de créer une nouvelle substitution

Substitution des langues

  1. on indique le libellé à remplacer puis rechercher
  2. avec un peu de chance, on va trouver le mot clé correspondant. on clique sur la ligne
  3. le mot clé ou chaine de traduction est inscrit
  4. dans la zone texte, on indique le texte désiré
  5. il ne reste plus qu'à enregistrer

Après enregistrement, on teste pour vérifier si l'on a bien trouvé la bonne chaine de traduction

Ma méthode personnelle

1 / Récupération des chaines de traduction

J'examine avec PHPmyAdmin le fichier #_menu. Le mot clé est le titre du menu en majuscule.

Pour afficher uniquement les lignes concernées, vous pouvez saisir la requête SQL suivante (en remplaçant les # par le préfixe de vos tables)

SELECT *
FROM `#_menu`
WHERE menutype = 'menu' OR menutype = 'main'
ORDER BY `#_menu`.`parent_id` ASC
LIMIT 0 , 100

L'avantage de cette méthode est que vous avez uniquement les chaines de traduction utilisées dans les menus et non toutes les variantes pour d'autres usages.

Note: certains titres ne peuvent pas être utilisés comme chaine de traduction. C'est le cas, par exemple, de J!Dump dont le point d'exclamation n'est pas apprécié.

2 / Rédaction du fichier des substitutions

Les chaînes de traduction étant connues vous pouvez les saisir avec la méthode expliquée précédemment en ignorant les points 1 et 2.

Sinon le fichier des substitutions se trouve dans le dossier \administrator\language\overrides.

Il existe un fichier par langue. La version française se nomme "fr-FR.override.ini"

Il suffit de le remplir avec par ligne la chaine de traduction et le texte désiré

CHAINE_DE_TRADUCTION="Le texte désiré"

Note: pour récupérer vos substitutions d'un site à l'autre, il suffit de copier ce fichier.

Voilà notre menu est maintenant beaucoup plus lisible et explicite pour les administrateurs débutants.

A vous maintenant d'imaginer les couleurs et les règles qui le rendront encore plus performant

Print Friendly and PDF