Les éléments .contentpane, .button, .inputbox, label

Cliquez sur le lien "FAQs" du "Menu Principal", vous constatez un débordement du texte. Idem pour le lien "Rechercher":

A cette occasion, pourquoi le bloc de droite "droit" n'est plus affiché?

Le bloc "droit" affiche les modules publiés en position "right". Si vous consultez la console d'administration via l'url: http://localhost/MonSitePerso/administrator/, vous vous apercevez que les modules de la position "right" sont paramétrés pour n'être publiés qu'en page d'accueil:

Pour résoudre le problème de débordement du texte, plusieurs solutions sont possibles selon ce que vous projetez mettre dans votre site:

1. si vous ne comptez pas utiliser le bloc "droit" en dehors de la page d'accueil, vous pouvez utiliser cet espace libéré à droite de la page pour le lien "FAQs". La solution consiste à adapter la disposition des blocs div selon la valeur d'une fonction php mosCountModules('right') qui est bien expliquée dans le tutoriel avancé.
2. Une autre solution au débordement du texte, est de laisser l'espace "droit" pour d'éventuels affichages et "centre" occupe uniquement les 430 px qui lui sont alloués initialement.

Adoptons, pour l'instant, cette dernière solution.

Généralement, il faut savoir choisir le style adéquat à paramétrer. C'est là où joue votre niveau de maitrise des langages html et css un rôle primordial. Une connaissance de la logique adoptée par joomla pour ses propres style css est également importante. Rassurez vous, vous n'êtes pas censés apprendre tout par coeur, on vous le rappelle une autre fois. Pour le cas présent, il s'agit d'un lien "FAQs" qui affiche un "Tableau - Catégorie de contenu". Joomla utilise un style "contentpane" pour afficher ce type de contenu. Allons voir cela dans l'arbre DOM de la Toolbar "IE Developper Toolbar".

"IE Developper Toolbar" étant lancé et "Select Element by Clic" selectionné, cliquez sur l'image des deux clefs dans votre page web:

En cliquant une seconde fois sur le niveau supérieur "<table class=contentpane>" dans l'arbre DOM, vous remarquez un cadre bleu qui entoure l'élément correspondant dans votre page web. C'est l'élément à paramétrer pour l'instant.

Exploitons une autre fonctionnalité de la Toolbar. Voyons cette fois ci comment tester avant d'apporter la modification au fichier css. Dans la zone centrale à droite de l'arbre DOM, saisir une nouvelle entrée en double-cliquant sur la case "Name". Saisir "Font-size" et une valeur "small" dans la case "Value" et appuyer sur "Entrée" pour valider. L'affichage s'améliore mais nécessite encore une retouche. Cliquer sur la zone de saisi "Filtre" dans votre page web. Nous savons d'avance qu'il s'agit d'un "Inputbox" mais nous voulons le confirmer grâce à l'arbre DOM:

Toujours, pour tester dans la même fenêtre, saisissez "Name"= "Font-size" et une valeur "Value"="x-small" et appuyer sur "Entrée" pour valider .

En admettant que la taille de police courante est la taille admissible pour le texte, vous pouvez ajuster la largeur du bloc "Centre". Voici les modifications (20 px de plus pour "centre" soustraits du bloc "droit") à apporter au fichier css:

 
#centre {
  width:450px;
}
 
#droit {
  width:135px;
}
 

Maintenant l'affichage est correcte:

Pour rendre vos modifications, testées dans la fenêtre de l'outil "IE Developper Toolbar", persistantes, ajouter les lignes suivantes à la fin de votre fichier css:

 
.contentpane {
  font-size: small;
}
 
.inputbox {

  font-size:x-small;
}
 

Vérifier maintenant le lien "Rechercher":

Un peu de bon sens , pour savoir exactement ce qu'il faut paramétrer. En fait, ayant déjà fait un cours html, on reconnait facilement un formulaire (<form>) avec un bouton (<button>) et des labels (<label>). Heureusement L'arbre DOM est là pour nous le confirmer et nous rappeler tout risque d'oubli. Cliquez donc sur le bouton "Rechercher", "IE Developper Toolbar" étant lancée et "Select Element by Clic" dans le menu selectionné.

La modification à apporter au fichier css est la suivante:

 
.button, label {
  font-size:x-small;
}
 

En fusionnant cette modification avec celle d'avant on obtient:

 
.inputbox, .button, label {
  font-size:x-small;
}
 

Sauvegarder votre fichier template_css.css et RAFRAICHISSEZ la page de votre site pour voir le résultat obtenu !

Maintenant, l'affichage semble être correct.