La conception et les styles CSS

J’ai fait mon possible pendant la conception pour répondre aux multiples questions relatives à CSS au fur et à mesure qu’elles se faisaient jour. C’est notamment le cas des contenus flottants et celui du positionnement absolu par rapport à des éléments relatifs.

14.11.1 Les fichiers CSS internes de Beez

Vous trouverez toute une série de fichiers CSS dans le sous-dossier nommé CSS. Leurs rôles sont divers.

Le positionnement et l’affichage ont été volontairement distribués dans plusieurs fichiers. Ce qui permet, par exemple pour modifier les couleurs, de n’intervenir que sur un fichier, tel layout.css. Vous ne risquez pas de modifier par mégarde des positions avec cette approche. C’est une garantie de sécurité.

Liste des fichiers CSS

• position.css ;
• layout.css ;
• print.css ;
• template.css ;
• ie7only.css ;
• ieonly.css ;
• general.css ;
• template_rtl.css.

14.11.2 Positionnement

La position exacte de chaque contenu est régie par les définitions du fichier position.css. Il contient toutes les instructions CSS pour le document cadre, tel qu’il a été défini dans le fichier index.php, ainsi que pour la position sur une ou deux colonnes de la zone de contenu et celle de l’article d’entrée Leading story. N’intervenez sur le contenu de position.css que si vous savez exactement ce que vous voulez faire.

L’exemple suivant ajoute à l’article Leading story une image d’abeille en arrière-plan :

.leading {
  background: #EFDEEA url(../images/biene.gif) no-repeat top left;
  border: solid 1px #CCC;
  color: #000;
  margin: 30px 0px 10px 0px;
  padding: 20px 20px 40px 120px;
  position: relative;
}

14.11.3 La mise en page ou présentation

Vous pouvez en revanche vous en donner à coeur joie en termes de personnalisation dans le fichier layout.css. Il ne définit que les formats et les choix de couleurs. Vous trouverez cependant certaines définitions de position pour les contenus.

L’exemple de style CSS suivant gère l’apparence du titre de l’article Leading story puis place le lien pour la suite dans le coin inférieur droit. Nous utilisons un positionnement absolu à l’intérieur de l’élément à position relative Leading story :

#main .leading h2,#main2 .leading h2 {
  background:#EFDEEA;
  border-bottom:solid 0 #333;
  color:#93246F;
  font-family:trebuchet MS, sans-serif;
  font-size:1.4em;
  font-weight:normal;
  margin:0 0 10px;
  text-transform:uppercase;
} 

#main .leading .readon,#main2 .leading .readon {
  background:url(../images/pfeil.gif) #93246F no-repeat;
  border:solid 0;
  bottom:0;
  color:#FFF !important;
  display:block !important;
  margin-top:20px !important;
  position:absolute;
  right:0;
  text-decoration:none;
  padding:2px 2px 0 30px;
}

14.11.4 Autres considérations

Le fichier template.css est intégré à Joomla! dès que vous demandez l’affichage d’un contenu dans une fenêtre sans composant de navigation. C’est par exemple le cas dans la fenêtre flottante d’envoi d’un courriel ou lorsque vous choisissez ce genre d’affichage pour un article. Dans ces conditions, la mise en page est totalement dépendante des définitions trouvées dans ce fichier.
Les deux fichiers ie7only.css et ieonly.css prennent en charge le bogue de non-conformité des différentes générations du navigateur Internet Explorer. Elles sont activées de façon conditionnelle au tout début du fichier index.php via des commentaires conditionnels.

Rappelons que les commentaires conditionnels ne sont visibles que par le navigateur Internet Explorer de Microsoft à partir de la version 5. Les instructions qu’il délimite ne sont interprétées que par ces navigateurs :

<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ieonly.css"
     rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ie7only.
    css" rel="stylesheet" type="text/css" />
<![endif]-->

Le fichier print.css ne réclame pas de commentaires. Il se charge de mettre en forme la page pour une impression et ne sert dans aucun autre domaine. En revanche, vous pourriez vous étonner de voir apparaître en gros caractères le mot Content juste avant le contenu, alors que ce mot n’était pas dans les données d’origine.

Il faut savoir que CSS permet d’injecter du contenu dans un document, comme le montre l’extrait qui suit. Notez que seuls les navigateurs conformes à la norme sont capables d’interpréter cette demande :

#main2:before {
  content: « content « ;
  …
}

Le fichier nommé general.css permet de personnaliser l’aspect des messages d’erreur internes de Joomla! pour qu’ils s’intègrent bien à la présentation choisie. Enfin, le fichier template_rtl.css se charge de gérer l’affichage des pages avec une écriture de droite à gauche. L’acronyme RTL signifie Right to Left. Vous choisissez le sens d’écriture dans le fichier XML des fichiers de langues en vigueur. Il est disponible sous forme d’une variable dans le fichier index.php du template.

<?php if($this->direction == ‘rtl’) : ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/
  beez/css/template_rtl.css" type="text/css" />
<?php endif; ?>

Cet extrait d’un fichier CSS permet par exemple d’exploiter le template Beez avec des contenus en langue hébraïque ou arabe. Vous pouvez vous amuser à voir le résultat d’un basculement d’un contenu en anglais ou en français vers une écriture de droite à gauche. Il suffit de faire passer à 1 la variable mentionnée (voir Figure 14.11).

Chemin d’accès : language/en-GB/en-GB.xml

...
 <metadata>
 ...
 <rtl>1</rtl>
 ...
 </metadata>

Figure 14.11 Beez avec un affichage en écriture de droite à gauche (RTL).