l'informalibre : Accueil | 2007 | 2008 | Tous

Les classes CSS et les modules de Joomla

Juin 2008

Nous avons vu dans Comprendre Joomla à l'aide d'UML comment se structurait un site Joomla. Nous allons maintenant comprendre comment est gérée la présentation de ce site. Pour ce faire, nous allons étudier les différentes classes de style (CSS) de Joomla ainsi que les différents modules de Joomla. L'étude des pages modèles (templates) fera l'objet d'un autre article.

Attention : notre étude porte sur la version 1.0.x de Joomla

1 Introduction

Il faut distinguer les différents types de classes utilisées pour la présentation du site :

les classes de la page modèle : elles sont propres à chaque template et définies librement par le créateur de la page modèle.
les classes Joomla : elles sont affectées automatiquement par Joomla aux différents éléments des pages du site.
- les classes des modules :
  - une partie est commune à l'ensemble des modules
  - une autre est spécifique à chaque module
- les classes du contenu (mainbody) :
  - une partie est commune à l'ensemble des types de contenu
  - une autre est spécifique à chaque type de contenu
- les classes suffixées :

Ce sont des classes de module ou contenu dont le nom possède un suffixe, suffixe qui peut être affecté à chaque élément du site (module, article...) afin d'utiliser une classe CSS spécifique pour sa présentation.

Joomla affecte aussi parfois des identifiants aux éléments des pages du site, nous les prendrons aussi en compte.
Le choix des sélecteurs de style se fera de la manière la plus précise possible afin d'être sûr de n'affecter que le style de l'élément étudié.

2 Les classes CCS des Modules Joomla

Attention, nous supposons l'utilisation d'un modèle de page qui conserve les styles CSS standard :

<?php mosLoadModules($position_name) // équivalent à mosLoadModules($position_name,0) ?> 
ou
<?php mosLoadModules($position_name,1) ?>

2.1 Les classes Communes (mod_...)

Le code html commun pour les modules est le suivant :

 <!-- debut module -->

 <table cellpadding="0" cellspacing="0" class="moduletable">
   <tr><th valign="top">
     
     <!-- le titre du module -->

     Le Titre du Module 
   
   </th></tr>
   <tr><td>
     
      <!-- le contenu du module -->

   </td></tr>
 </table>

 <!-- fin module -->

Donc on peut utiliser pour définir notre présentation :

table.moduletable qui correspond à la table contenant notre module
et les divers sélecteurs imbriqués :
- table.moduletable th pour le titre
- table.moduletable td pour le contenu
Le code html pour les champs de saisie et les boutons est :

<input type="text | password | ..." ... class="inputbox" ... />
...
<input type="submit"... class="button" ... />

Les sélecteurs table.moduletable input.inputbox et table.moduletable input.button peuvent donc être utilisés.

2.2 Les classes des Menus (mod_mainmenu)

Le code html généré est le suivant :

 <table width="100%" border="0" cellpadding="0" cellspacing="0">

   <tr align="left"><td><a href="http://lienMenu_1" class="mainlevel">nomElementMenu_1</a></td></tr>

   <tr align="left"><td><a href="http://lienMenu_2" class="mainlevel" id="active_menu">nomElementMenu_2>/a></td></tr>

   ...

 </table>

Joomla attribue la classe mainlevel aux liens, donc on peut utiliser le sélecteur :

a.mainlevel pour chaque ElementMenu.nom
et les divers pseudo-formats pour les liens : a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover, a.mainlevel:active, a.mainlevel:focus

De plus, l'élément de menu correspondant à la page affichée est identifié par active_menu", on peut utiliser a#active_menu"pour différencier cet élément des autres éléments du menu.

2.3 Les classes du Module "Qui est en ligne" (mod_whosonline)

Ce module permet de savoir quels sont les utilisateurs actuellement sur la partie publique du site. On peut avoir :

le nombre de Lecteurs (invités) et de Lecteurs Identifiés (membres)
la liste des noms des Lecteurs Identifiés
ou une seule de ces deux informations

Le code html généré est le suivant :

   Il y a actuellement x invité et y membre en ligne

   <ul>

     <li><strong>membre_1</strong></li>

     <li><strong>membre_2</strong></li>

     ....

  </ul>

Comme tout contenu de module "Il y a actuellement x invités et y membre en ligne" dépend de table.moduletable td.
La liste dépend dans l'ordre d'imbrication de :

table.moduletable ul
table.moduletable li
table.moduletable li strong

2.4 Les classes du Module "Derniers articles" (mod_lastestnews)

Ce module affiche une liste des derniers articles publiés, il s'agir uniquement des articles catégorisés, uniquement des articles statiques ou les deux. C'est la date de création de l'article qui est prise en compte.

Le code html généré est le suivant :

 <ul class="latestnews">

   <li class="latestnews">

      <a href="http://lienDernierArticle_1" class="latestnews">

         Titre Dernier Article 1

      </a>

    </li>

    <li class="latestnews">

      <a href="http://lienDernierArticle_2" class="latestnews">

         Titre Dernier Article 2

      </a>

    </li>

  </ul>

La même classe latestnews est affectée à l'ensemble des balises, on peut donc utiliser les sélecteurs suivants :

ul.latestnews
li.latestnews
a.lastestnews

2.5 Les classes du Module "Image aléatoire" (mod_random_image)

Le module "Image aléatoire" affiche une image choisie au hasard dans un répertoire donné avec éventuellement un lien vers une url définie pour le module.

Le code html généré est le suivant :

 <div align="center">

   <a href="lien" target="_self">

     <img src="http://site/repertoire/image.jpg" border="0" width="largeur" height="hauteur" alt="image.jpg" /><br />

   </a>

 </div>

 ou

 <div align="center">

   <img src="http://site/repertoire/image.jpg" border="0" width="largeur" height="hauteur" alt="image.jpg" /><br />

 </div>

Aucune classe spécifique n'est définie, on utilise table.moduletable soit :

table.moduletable a et les pseudo-formats associables pour le lien
table.moduletable img pour l'image

2.6 Les classes du Module "Recherche" (mod_search)

Ce module permet de rechercher dans le site les articles qui contiennent un des termes saisis. On peut configurer le module de diverses façons, dans notre cas le bouton de recherche est affiché sous le texte avec un libellé précis.

Le code html généré est le suivant :

 <form action="index.php?option=com_search&Itemid=5" method="get">

   <div class="search">

     <!-- le champ de saisie -->

     <input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" 
      size="20" value="Rechercher..."  onblur="if(this.value=='') this.value='Rechercher...';" 
      onfocus="if(this.value=='Rechercher...') this.value='';" />

     <br/>

      <!-- le bouton -->

     <input type="submit" value="Chercher" class="button"/>

    </div>
	<input type="hidden" name="option" value="com_search" />
	<input type="hidden" name="Itemid" value="5" />	
  </form>

On peut utiliser :

sans ambiguïté l'identifiant pour le champ de saisie #mod_search_searchword
table.moduletable div.search input.button pour le bouton
table.moduletable div.search pour la "div" si besoin

2.7 Conclusion

Comme nous venons de le voir, il n'y a pas vraiment de règle bien définie pour les classes du contenu des modules. Il faut étudier chaque type de module afin de pouvoir définir les classes (et éventuellement identifiant) qui correspondent en tenant compte du fait qu'elles peuvent aussi correspondre à un autre module (exemple : table.moduletable a). Nous verrons plus loin comment les suffixes CSS de module permettent d'individualiser les classes pour chaque module.

3 Les classes CCS du Contenu de Joomla

C'est la partie des pages qui correspond à <?php mosMainBody ( ); ?> dans la page modèle. Nous allons d'abord étudier les articles puis les différentes liste d'articles.

3.1 Les Articles

Les articles sont décomposés deux parties, chacune d'elle est comprise dans :

 <table class="contentpaneopen">

   <!-- une partie de l'article -->

 </table>

et hérite de table.contentpaneopen.

3.1.1 L'entête des Articles

Elle comprend notamment le titre de l'article et éventuellement différentes icônes permettant de convertir en pdf, d'imprimer ou de suggérer par courriel l'article.

Le code html généré est le suivant :

 <tr>

   <!-- le titre de l'article -->

   <td class="contentheading" width="100%">Titre de l'Article</td>

   <!-- première icône  -->

   <td align="right" width="100%" class="buttonheading">

     <a href="..." target="_blank" onclick="window.open(...) title="...">

       <img src="...Button.png" alt="Convertir en PDF" name="Convertir en PDF" align="middle" border="0" />

     <a>

    </td>

    <!-- icône suivante -->	
    ...

  </tr>

On peut donc contrôler la présentation :

du titre grâce à td.contentheading
les icônes par td.buttonheading, td.buttonheading a (et pseudo-formats ) et td.buttonheading img

3.1.2 Le corps des Articles

En plus de l'article lui-même, on peut choisir de faire apparaitre différentes informations sur l'article et notamment :

le nom de l'auteur
date et heure de création
date et heure de la dernière modification

Le code html généré est le suivant :

 <!-- l'auteur -->

 <tr>

    <td width="70%" align="left" valign="top" colspan="2">

      <span class="small">Écrit par Auteur</span>  

    </td>

 </tr>

 <!-- la date de création -->

 <tr>

   <td valign="top" colspan="2" class="createdate">09-08-2004</td>

 </tr>

 <tr>

   <td valign="top" colspan="2">

     <!-- le "texte" de l'article -->
    ...
    ...

  </td>

 </tr>

 <!-- la dernière date de modification -->

 <tr>

   <td colspan="2" align="left" class="modifydate">

     Dernière mise à jour : ( 16-06-2008 )

   </td>

 </tr>
 
 <!-- le séparateur d'article -->

 <span class="article_seperator"> </span>

La présentation du corps de l'article Joomla peut donc être gérée ainsi :

l'auteur par table.contentpaneopen span.small
la date de création par table.contentpaneopen td.createdate
le texte de l'article par table.contentpaneopen td
la date de modification part table.contentpaneopen td.modifydate
le séparateur d'article par span.article_seperator

3.1.3 La navigation entre les Articles

Joomla propose de naviguer entre les articles suivant un ordre défini en proposant l'article précédent et suivant. On peut aussi faire afficher un bouton retour équivalent à page précédente du navigateur :

 <!-- la navigation entre articles -->

 <table align="center" style="margin-top: 25px;">
  <tr>

    <!-- article précédent -->

    <th class="pagenav_prev">

      <a href="http://lienArticlePrecedent">< Précédent</a>

    </th>

    <!-- séparateur -->

    <td width="50"> </td>

    <!-- article suivant -->

    <th class="pagenav_next">

      <a ref="http://lienArticleSuivant">Suivant ></a>

    </th>

   </tr>
  </table>

  <!-- le bouton retour -->

  <div class="back_button">

    <a href='javascript:history.go(-1)'>[ Retour ]</a>

  </div>

La présentation de la navigation peut être définie par :

th.pagenav_next et th.pagenav_next a pour l'article suivant
idem pour le précédent avec _prev
th.pagenav_prev+td[width="50"] pour le séparateur (il suit th.pagenav et a un attribut width de valeur 50)

Le bouton retour lui est dans une div ce qui nous donne les sélecteurs div.back_button et div.back_button a (exemple : div.back_button a{margin:auto;} pour centrer le bouton).

3.2 Les Journaux d'Articles

Ce sont les pages qui correspondent à une présentation de type blog, c'est le cas de la page d'accueil de Joomla. On peut choisir d'afficher :

0 à n articles principaux sur une colonne
0 à n articles sur n colonnes
0 à n liens vers les articles suivants

Les articles sont triés selon un ordre défini et c'est le texte d'introduction des articles qui est présenté avec la possibilité de proposer de "lire la suite".

L'ensemble des articles est dans une table :

 <table class="blog" cellpadding="0" cellspacing="0">

    <!-- tous les articles -->  

 </table>

qui permet d'utilisée le sélecteur table.blog

3.2.1 Les Articles Principaux

Les articles principaux sont des div dans une cellule de la table blog :

<!-- les articles principaux -->  

  <tr><td valign="top">
  
   <div>
  
    <!-- 1er article principal -->
  
   </div>

    <div>
    
    <!-- 2ème article principal -->
  
   </div>

   ...

  </td></tr>

Le sélecteur table.blog div permet de traiter les articles principaux, on peut distinguer le premier en utilisant les sélecteurs suivants :

table.blog td[valign="top"] div+div qui correspond au deuxième article et suivant
table.blog td[valign="top"]>div qui correspond normalement à tous les articles, mais qu'au premier article puisque les suivants ont un sélecteur spécifique.

On peut même traiter spécifiquement chaque article grâce à table.blog td[valign="top"] div+div+... (exemple : table.blog td[valign="top"] div+div+div+div pour le 4ème).

3.2.2 Les Articles en Colonnes

Les articles en colonnes sont dans une table dans une cellule de la table blog :

<!-- les articles en colonnes --> 

  <tr><td valign="top">

    <table width="100%"  cellpadding="0" cellspacing="0">

        <!-- 1ere ligne d'articles-->

        <tr> 
   
          <td valign="top" width="50%"> <!-- 50% => deux colonnes-->
            
             <!-- un article en colonne -->
            
          </td>
          
          <td valign="top" width="50%">

             <!-- un article en colonne -->

          </td>

        </tr>

        <!-- ligne d'articles suivante -->

        <tr>

          ... 

        </tr>

      </table>

  </td></tr>

On va pouvoir utiliser le sélecteur CSS table.blog table[width="100%"] et ses diverses déclinaisons traiter les articles en colonnes (exemple table.blog table[width="100%"] td.contentheading pour le titre des articles en colonnes).

3.2.3 Les Liens vers les Articles

les liens vers les articles sont dans une cellule de la table blog sont dans une div :

  <tr><td valign="top">

    <div class="blog_more">

      <div><strong>Suite...</strong></div>

        <ul>

      	  <li><a class="blogsection" href="http://lienArticle">Titre Article</a></li>

      	  ...

        </ul>

    </div>

  </td></tr>

On peut décliner les différents sélecteurs en se basant sur div.blog_more, c'est à dire div.blog_more strong, div.blog_more a.blogsection ...

4 Les classes CCS Suffixées Joomla

Par définition les classes sont attribuées à un ensemble d'éléments de même nature (module, articles...) ce qui ne permet pas d'individualiser la présentation de ces éléments grâce à une feuille de style. Mais il est prévu dans Joomla un mécanisme qui permet d'affecter à chaque élément une présentation spécifique : ce sont les classes suffixées.

On attribue à chaque élément un suffixe CSS :

Article : Editer -> Onglet Paramètres -> Champ Suffixe CSS de Page
Site Module : Editer -> Champ Suffixe CSS de module

qui sera ajouté à la classe affectée à l'élément dans le code html :

Exemple :

  * Interface d'Administration :

  Site Module : Editer [ Recherche ] -> Suffixe CSS de module = _Suffixe_1

  * html généré :

  <!-- class="moduletable" devient class="moduletable_Suffixe_1" -->

  <table cellpadding="0" cellspacing="0" class="moduletable_Suffixe_1">
    ...
    <div class="search_Suffixe_1">

      <input name="searchword" id="mod_search_searchword" class="inputbox_Suffixe_1" ...>

Il faut naturellement que ces classes suffixées soient définies :

   * Feuille de style : 

   div.search_Suffixe_1 {
       ...;
   }
   input.inputbox_Suffixe_1 {
    ...;
   }

Les menus ont en plus (du suffixe de module) un suffixe de Menu attribué aux éléments du menu :


 <!-- menu avec _SuffixeMenu pour suffixe CSS de menu -->

 <tr align="left"><td>

   <a href="http://lienElementMenu" class="mainlevel_SuffixeMenu" id="active_menu_SuffixeMenu">
     Accueil
    </a>

  </td></tr>

En principe l'ensemble des classes de l'élément sont suffixées, si ce n'est pas le cas (exemple .article_seperator) il faut jouer sur les sélecteurs si besoin (table.contentpaneopen_suffixe+span.article_seperatorspan)

5 Conclusion

Il me semble nécessaire de bien différencier les différents types de classes dans l'écriture de la feuille CSS pour Joomla afin de bien mettre en évidence :

les styles du template
les styles standard des modules
les styles suffixés des modules
les styles standard des articles
les styles suffixés des articles

Du point de vue maintenance l'idéal est d'utiliser des feuilles différentes agrégées en seule feuille finale pour la création du template.

Récupérée de « http://linformalibre.f2lt.fr/index.php?title=Les_classes_CSS_et_les_modules_de_Joomla »

Catégories de la page: Joomla | 2008 | Tous

l'informalibre : Accueil | 2007 | 2008 | Tous

KYUDO Informatique : Creation Site Marchand Avignon - Création Site Internet Professionnel Avignon