Il s'agit du nom du forum pour lequel j'avais réalisé ce Qui Est En Ligne. Vous pouvez d'ailleurs voir le QEEL originel dans l'image de démonstration. Le forum ayant péri corps et bien dans les méandres de l'Internet, j'ai remis à jour le template du QEEL pour vous le proposer comme code directement exploitable. 

• Affiche un résumé des statistiques
  
• Phrases du QEEL personnalisées
  
• L'image du QEEL est celle que vous uploadez dans votre panneau d'administration
  
• Les groupes sont mis en page automatiquement, pas besoin de trifouiller le code pour mettre la liste à jour.
  
• Les liens des statistiques (Sujets actifs du jour, top 20 des posteurs) sont placés dans le QEEL, il faut donc les supprimer de leur emplacement d'origine.
  
• Les anniversaires ne sont PAS inclus
  
• Affiche la liste des utilisateurs connectés au cours des dernières heures
  
• Affiche les statistiques de la chatbox (n'affichera rien si vous n'avez pas activé l'option  ), mais pas le lien vers celle ci.
  

[size]

Ce n'est pas parce que je propose mes codes en libre service que vous pouvez faire n'importe quoi avec ; n'oublions pas qu'ils restent le fruit de mon travail ! Merci donc de respecter les quelques règles qui suivent.
[/size]

• Vous pouvez éditer ce code à votre convenance
  
• Vous ne pouvez pas redistribuer ce code sur un autre forum, quel qu'il soit. 
  
• Vous devez impérativement laisser mes crédits, même après modification (vous pourrez évidemment ajouter "personnalisé par (pseudo)")
  
• L'usage de ce code est autorisé pour un usage strictement personnel et non commercial.
  
• En aucun cas vous ne pouvez utiliser ce code sur un forum faisant la promotion du racisme, de la xénophobie, de l'homophobie, de la pédophilie, de la pornographie, du warez et de tout autre contenu de nature discriminatoire ou illégale. Cette interdiction s'applique également aux forums RPG dits "Hentai/Yaoi/Yuri" qui ne mettent pas en place les mesures minimales de protection contre les mineurs (c'est à dire au minimum le contenu sensible caché aux visiteurs, un avertissement clair et visible à l'inscription et sur l'accueil, et pas de personnages mineurs)
  
• Merci d'ajouter un lien retour vers CSSActif sur votre forum si vous utilisez ce QEEL.
  

[size]

Allez dans votre panneau d'administration, onglet Modules puis dans Gestion des Codes Javascript. Assurez-vous que la gestion du javascript est activée, puis créezles deux pages javascript qui suivent, que vous activerez sur l'index.


[/size][size]

Copiez collez le code que vous trouverez [url=Publicités , Interdites Merci!://tinyurl.Publicités , Interdites Merci!/var-fa][/url]à cette adresse dans un nouveau fichier javascript.
Vous trouverez plus d'explications sur ce code alambiqué en allant lire [url=Publicités , Interdites Merci!://forum.forumactif.Publicités , Interdites Merci!/-t260631.htm][/url]ce tutoriel sur le Forum des Forums. Il nous servira à afficher le nombre de messages, de sujets, de membres et le dernier inscrit.


[/size][size]

Le script qui suit remplace différentes parties des phrases par défaut du QEEL. La fonction 
[/size]

Code:

remplaceText

[size]
 cible les éléments précisés par un identifiant dans le HTML et remplace la première partie entre guillemets par la seconde, comme ceci :Code:Sélectionner le contenuSélectionner le contenu
remplaceText('#identifiant', "texte à remplacer","Texte de remplacement");
Les identifiants utilisables sont :
[/size]

• Code:

  totalUsersOnline

   pour le nombre d'utilisateurs connectés
  

• Code:

  loggedInUsers

   pour le nombre d'utilisateurs connectés pendant les dernières 24h
  

• Code:

  totalChattersOnline

   pour le nombre d'utilisateurs connectés sur la chatbox
  

[size]

Code:Sélectionner le contenuSélectionner le contenu
/* Fonction de remplacement */
function remplaceText(elt, match, newtext) {
  if($(elt).length) {
      return $(elt).html($(elt).html().replace(match, newtext));
  }
}

/* Tous les remplacements */
$(function() {
    /* Nombre d'utilisateurs connectés (membres, invisibles, invités) */
   remplaceText('#totalUsersOnline', "Il y a en tout","");
   remplaceText('#totalUsersOnline', "::",":");
   remplaceText('#totalUsersOnline', "utilisateur en ligne :","<strong>connecté :</strong>");
   remplaceText('#totalUsersOnline', "utilisateurs en ligne :","<strong>connectés :</strong>");
   remplaceText('#totalUsersOnline', "Invisible","invisible");
   remplaceText('#totalUsersOnline', "Invisibles","invisibles");
   remplaceText('#totalUsersOnline', "Enregistré","membre");
   remplaceText('#totalUsersOnline', "Enregistrés","membres");
   remplaceText('#totalUsersOnline', "Invité","visiteur");
   remplaceText('#totalUsersOnline', "Invités","visiteurs");
   
   /* Liste des utilisateurs connectés */
   remplaceText('#loggedInUsers', "Utilisateurs enregistrés :","");
   
   /* Liste des utilisateurs connectés sur la chatbox */
   remplaceText('#totalChattersOnline', "Il y a actuellement ","On compte ");
   remplaceText('#totalChattersOnline', "utilisateur","bavard");
});


[/size][size]

Rendez-vous dans votre panneau d'administration, onglet Affichage puis dans le menu Templates » Général et ouvrez le template index_body.


[/size][size]

Vu qu'ils sont utilisés dans cette structure de QEEL, vous pouvez retirer ceux qui existent actuellement ! Cherchez cette partie et supprimez-la :Code:Sélectionner le contenuSélectionner le contenu
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>


[/size][size]

Cherchez les commentaires suivants :
Code:Sélectionner le contenuSélectionner le contenu
<!-- BEGIN disable_viewonline -->
Code:Sélectionner le contenuSélectionner le contenu
<!-- END disable_viewonline -->
Supprimez-les, ainsi que tout ce qui se trouve entre les deux.

Puis ajoutez le code qui suit : 
Code:Sélectionner le contenuSélectionner le contenu
<!-- BEGIN disable_viewonline -->

<!-- [ CREDITS ] 
------------------------------------ 
Template QEEL par 'Christa Lostmindy
Distribution autorisée sur :
   L'Enae Volare    : Publicités , Interdites Merci!://enaevolare.lostmindy.fr
   CSSActif       : Publicités , Interdites Merci!://www.css-actif.Publicités , Interdites Merci!/
   l'Annuaire FdF   : Publicités , Interdites Merci!://www.forumsdeforumactif.Publicités , Interdites Merci!/
----
Utilisation personnelle et non commerciale autorisée
Modification autorisée
Redistribution strictement interdite
----
Il est strictement interdit de retirer
les crédits présents dans ce code.
<script type="text/javascript" src="Publicités , Interdites Merci!://tinyurl.Publicités , Interdites Merci!/var-fa"></script>
--------------------------------------
-->

<div id="tableauQeel">
   <table width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
         <td width="200"  align="center" valign="middle" rowspan="2">
            <div class="imgOnline">
               <a href="{U_VIEWONLINE}">
                  <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
               </a>
            </div>
         </td>
         
         <td align="center" valign="middle" id="tabBlocStats">
            <div id="blocStats">      
               <h2>Statistiques</h2>                  
               <div class="contenuQeel hauteurFixe noSpaceTitre">
                  <!-- AFFICHE NOMBRE SUJETS --><span class="FORUMCOUNTOPIC"></span> sujets || 
                  <!-- AFFICHE NOMBRE MESSAGES --><span class="FORUMCOUNTPOST"></span> messages ||  
                  <!-- AFFICHE NOMBRE MEMBRES --><span class="FORUMCOUNTUSER"></span> habitants <br />
                  <!-- AFFICHE DERNIER INSCRIT -->Le dernier arrivé est <span class="FORUMLASTUSERLINK"></span>
               </div>
            </div>
         </td>
         
         <td align="center" valign="middle" id="tabBlocGroupes">
            <div id="blocGroupes">
               <h2>{LEGEND}</h2>
               <div class="contenuQeel hauteurFixe noSpaceTitre">
                  <div class="qeel-groupes">{GROUP_LEGEND}</div>
               </div>
            </div>
         </td>
      </tr>
      <tr>
         <td colspan="2" align="center" valign="middle">
            <div class="espace"> </div>
            <h2>Activité du forum</h2>
            <div class="contenuQeel noSpaceTitre">
               <span id="totalUsersOnline">{TOTAL_USERS_ONLINE}</span>
               <br />
               <span id="loggedInUsers">{LOGGED_IN_USER_LIST}</span>
               
            <!-- BEGIN switch_chatbox_activate -->
            </div>
            <div class="espace"></div>
            <div class="contenuQeel">
               <span class="gensmall">
                  <span id="totalChattersOnline">{TOTAL_CHATTERS_ONLINE}</span>
                  <br /> 
                  {CHATTERS_LIST}
               </span>
            <!-- END switch_chatbox_activate -->
            </div>
         </td>
      </tr>
   </table>

   <div align="center" class="gensmall liensStats">
      <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>
        |  
      <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a>
        |  
      <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
        |  
      <span class="lostCredits">QEEL par 'Christa Lostmindy <span class="bulleCredits">?<span>Redistribution interdite • Modification autorisée sous condition de crédits</span></span></span>
   </div>

   <div class="contenuQeel liste24h">
      <table class="deBug" align="center">{L_CONNECTED_MEMBERS}</table>
   </div>
</div>

<!-- END disable_viewonline -->
En principe, vous ne devriez pas avoir besoin de trop éditer le contenu.


[/size][size]

A vous de faire les modifications qui s'imposent.
Code:Sélectionner le contenuSélectionner le contenu
/*------------------------------------ 
Template QEEL par 'Christa Lostmindy
Distribution autorisée sur :
   L'Enae Volare    : Publicités , Interdites Merci!://enaevolare.lostmindy.fr
   CSSActif       : Publicités , Interdites Merci!://www.css-actif.Publicités , Interdites Merci!/
   l'Annuaire FdF   : Publicités , Interdites Merci!://www.forumsdeforumactif.Publicités , Interdites Merci!/
----
Utilisation personnelle et non commerciale autorisée
Modification autorisée
Redistribution strictement interdite
----
Il est strictement interdit de retirer
les crédits présents dans ce code.
--------------------------------------*/
/****************************************
/* MISE EN FORME GENERALE
/****************************************/
/* mise en page générale */
#tableauQeel {
  width: 100%;
  padding: 4px;
  margin: 0 auto;
  color: #000000;
  font-size: 12px;
}
/* Liens statistiques */
.liensStats {
  margin: 5px 0;
}
.liensStats a:link {
  color: #3333cc;
}
.liensStats a:hover,
.liensStats a:active,
.liensStats a:focus {
  color: #990000;
}
.liensStats a:visited {
  color: #3333cc;
}
/* largeur bloc contenant l'image du QEEL*/
.imgOnline {
  min-width: 200px;
}
/* espacement entre certains blocs */
.espace {
  padding: 3px;
}
/* taille des cellules de tableau */
#tabBlocStats,
#tabBlocGroupes {
  width: 50%;
}
#blocStats {
  width: auto;
}
#blocGroupes {
  width: auto;
}
/*********************************
/*   TITRES DU QEEL 
/*********************************/
#tableauQeel h2 {
  display: inline-block;
  font-family: "Courier New", Courier, monospace, serif;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  text-shadow: 0.1em 0.1em 0.2em #000000;
  margin-top: 4px;
  margin-bottom: 0px;
  padding: 4px 10px;
  background-color: #d1d7dc;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;
}
#tableauQeel h2:before {
  content: "► ";
  color: #000000;
}
#tableauQeel h2:after {
  content: " ◄";
  color: #000000;
}
/*************************************
/* MISE EN FORME DES BOITES DE CONTENU
/************************************* */
.contenuQeel {
  background-color: #d1d7dc;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 4px;
  margin: 2px;
  font-size: 10px;
}
.noSpaceTitre {
  margin-top: 0;
}
.liste24h {
  text-align: center;
}
.deBug td {
  background-color: #d1d7dc;
}
/* Ce css permet d'avoir les deux premières boites (statistiques et légendes) 
à la même taille en hauteur */
.hauteurFixe {
  height: 45px;
  overflow: auto;
}
/*************************************
/* MISE EN FORME LISTE DES GROUPES
/************************************* */
.qeel-groupes {
  font-size: 0px;
  line-height: 0;
  text-align: center;
}
.qeel-groupes a {
  font-size: 12px;
  line-height: normal;
  display: inline-block;
  padding: 2px 5px;
  margin: 1px 4px;
  font-variant: small-caps;
  font-weight: bold;
  background: transparent;
}
/********************************
/* Affichage des crédits
/********************************/
.lostCredits {
  color: #999999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 2px 4px;
  background: transparent;
  font-weight: bold;
}
.bulleCredits {
  position: relative;
  cursor: pointer;
  color: #ffffff;
  background: #990000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 1px 4px;
}
.bulleCredits  > span {
  position: absolute;
  display: block;
  bottom: 150%;
  left: -20%;
  width: 150px;
  background: #000000;
  color: #ffffff;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  transform: scale(0) rotate(12deg);
}
.bulleCredits  > span:after {
  display: block;
  content: " ";
  width: 0;
  border-width: 8px 5px 0 5px;
  border-color: #000000 transparent transparent transparent;
  border-style: solid;
  position: absolute;
  bottom: -8px;
  left: 5px;
}
.bulleCredits:hover  > span,
.bulleCredits:focus  > span {
  z-index: 500;
  opacity: 1;
  transform: scale(1) rotate(0);
  cursor: default;
}
/*------------------------------------ 
Template QEEL par 'Christa Lostmindy
Publicités , Interdites Merci!://enaevolare.lostmindy.net
[FIN]
--------------------------------------*/


[/size][size]

Pour pouvoir modifier le code de votre QEEL sans avoir à vous battre avec le CSS (surtout si vous ne le maîtrisez pas), vous pouvez également utiliser le fichier LESS qui suit. Editez les variables puis utilisez le logiciel Crunch! [[url=Publicités , Interdites Merci!://www.css-actif.Publicités , Interdites Merci!/t13429-compiler-un-fichier-less-en-css-avec-crunch][/url]voir le tutoriel] pour générer votre CSS personnalisé 
Code:Sélectionner le contenuSélectionner le contenu
// ============ REGLAGES ==================== //

// INFO POUR LES MARGES :;
// Possible d'utiliser la notation HAUT-BASpx DROITE-GAUCHEpx, exemple : 5px 10px;
// Ou encore HAUTpx DROITEpx BASpx GAUCHEpx, exemple 5px 10px 5px 15px;

//Bloc principal contenant le QEEL
@generalLargeurQeel:100%; //Largeur du tableau
@generalCouleurTexte:#000;
@generalTailleTexte:12px;
@generalMargeInterne:4px;
@generalMargeExerne:0; //uniquement pour le haut et le bas

@imgOnlineLargeur:200px; //Largeur minimale de la cellule contenant l'image du QEEL
@largeurBlocStatistiques: auto; //si besoin, largeur du bloc des statistiques (en pixels !)
@largeurBlocGroupes: auto; //si besoin, largeur du bloc des groupes (en pixels !)

// Couleur des liens des statistiques (vu qu'ils sont en dehors des blocs il se peut que le 
// contraste les rende illisibles si on conserve les couleurs par défaut)
@statsCouleurLien:#3333cc;
@statsCouleurLienSurvol:#990000;
@statsCouleurLienVisite:#3333cc;

// Titres des boites
@titresTailleTexte:16px;
@titresPoliceTexte:"Courier New", Courier, monospace;
@titresCouleurTexte:#000;
@titresCouleurOmbre:#000000;
@titresCouleurFond:#D1D7DC;
@titresCouleurDecoration:#000;
@titresArrondiCoins:15px;
@titresMargeInterne:4px 10px;

//Apparence des boites de contenu
@boitesCouleurFond:#D1D7DC; // en principe identique à la couleur de fond des titres
@boitesArrondiCoins:15px;
@boitesTailleTexte:10px;
@boitesMargeInterne:4px;
@boitesMargeExterne:2px;
@hauteurPremiereLigne:45px; //nécessaire pour avoir les deux premières lignes de même hauteur

//Liste des groupes
@groupesTailleTexte:12px;

//Affichage de chaque lien de groupe
@liengroupeMargeInterne:2px 5px;
@liengroupeMargeExterne:1px 4px;
@liengroupeCouleurFond:transparent;


// Affichage des crédits du QEEL
// Vous pouvez les personnaliser pour qu'ils soient en accord avec les couleurs de votre forum,
// MAIS ILS DOIVENT ETRE CLAIREMENT VISIBLES !
@creditsCouleurTexte:#999999;
@creditsCouleurFond:transparent;
@creditsCouleurBgBoutonBulle:#990000; //couleur de fond du "bouton" de l'infobulle
@creditsCouleurTexteBoutonBulle:#FFFFFF; //couleur du texte du bouton de l'infobulle
@creditsCouleurFondBulle:#000;
@creditsCouleurTexteBulle:#fff;

// ============ MIXINS (NE PAS TOUCHER) ==================== //
.border-radius (@top_left, @top_right, @bottom_left, @bottom_right) {
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
}
 
.border-radius (@top_left, @top_right, @bottom_left, @bottom_right) when not (@top_left = rien) {
   -webkit-border-top-left-radius: @top_left;
   -moz-border-radius-topleft: @top_left;
   border-top-left-radius: @top_left;
}
 
.border-radius (@top_left, @top_right, @bottom_left, @bottom_right) when not (@top_right = rien) {
   -webkit-border-top-right-radius: @top_right;
   -moz-border-radius-topright: @top_right;
   border-top-right-radius: @top_right;
}
 
.border-radius (@top_left, @top_right, @bottom_left, @bottom_right) when not (@bottom_left = rien) {
   -webkit-border-bottom-left-radius: @bottom_left;
   -moz-border-radius-bottomleft: @bottom_left;
   border-bottom-left-radius: @bottom_left;
}
 
.border-radius (@top_left, @top_right, @bottom_left, @bottom_right) when not (@bottom_right = rien) {
   -webkit-border-bottom-right-radius: @bottom_right;
   -moz-border-radius-bottomright: @bottom_right;
   border-bottom-right-radius: @bottom_right;
}
 
.border-radius (@top, @bottom) {
   .border-radius(@top, @top, @bottom, @bottom);
}
 
.border-radius (@radius) {
   -webkit-border-radius:@radius;
   -moz-border-radius:@radius;
   border-radius:@radius;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
}

.transition (@transition) {
   -webkit-transition: @transition;  
   -moz-transition:    @transition;
   -ms-transition:    @transition; 
   -o-transition:      @transition;  
   transition:       @transition;
}


// ============ CODE LESS ==================== //

/*------------------------------------ 
Template QEEL par 'Christa Lostmindy
Distribution autorisée sur :
   L'Enae Volare    : Publicités , Interdites Merci!://enaevolare.lostmindy.fr
   CSSActif       : Publicités , Interdites Merci!://www.css-actif.Publicités , Interdites Merci!/
   l'Annuaire FdF   : Publicités , Interdites Merci!://www.forumsdeforumactif.Publicités , Interdites Merci!/
----
Utilisation personnelle et non commerciale autorisée
Modification autorisée
Redistribution strictement interdite
----
Il est strictement interdit de retirer
les crédits présents dans ce code.
--------------------------------------*/

/****************************************
/* MISE EN FORME GENERALE
/****************************************/
/* mise en page générale */
#tableauQeel {
   width:@generalLargeurQeel;
   padding:@generalMargeInterne;
   margin:@generalMargeExerne auto;

   // personnalisation du texte
   color:@generalCouleurTexte; //couleur du texte
   font-size:@generalTailleTexte; //taille du texte
}

/* Liens statistiques */
// pour personnaliser les liens "Sujets actifs du jour", 
// "Top 20 des posteurs du jour" et "Top 20 des posteurs du forum"
// parce qu'ils risquent d'être difficilement lisibles
.liensStats {
   margin:5px 0;
   a:link {
      color:@statsCouleurLien;
   }

   a:hover, a:active, a:focus {
      color:@statsCouleurLienSurvol;
   }

   a:visited {
      color:@statsCouleurLienVisite;
   }

}

/* largeur bloc contenant l'image du QEEL*/
.imgOnline {
   min-width:@imgOnlineLargeur;
}
/* espacement entre certains blocs */
.espace {padding:3px;}

/* taille des cellules de tableau */
#tabBlocStats, #tabBlocGroupes { width:50%; } //Evitez de modifier

// Pour regler la largeur des blocs Statistiques et Legende des Groupes
#blocStats {width:@largeurBlocStatistiques;}
#blocGroupes {width:@largeurBlocGroupes;}

/*********************************
/*   TITRES DU QEEL 
/*********************************/
#tableauQeel h2 {
   display:inline-block; //important
   font-family:@titresPoliceTexte,serif;
   font-size:@titresTailleTexte;
   font-weight:bold;
   color:@titresCouleurTexte;
   text-shadow: 0.1em 0.1em 0.2em @titresCouleurOmbre;
   margin-top:4px;
   margin-bottom:0px; //important
   padding:@titresMargeInterne;
   background-color:@titresCouleurFond;
   
   //arrondis en haut
   .border-radius(@titresArrondiCoins,@titresArrondiCoins,rien,rien);

   // Décorations avant et après les titres du QEEL
   &:before {
      content:"► ";
      color:@titresCouleurDecoration;
   }

   &:after {
      content:" ◄";
      color:@titresCouleurDecoration;
   }
}

/*************************************
/* MISE EN FORME DES BOITES DE CONTENU
/************************************* */
.contenuQeel {
   background-color:@boitesCouleurFond;
   .border-radius(@boitesArrondiCoins);   
   padding:@boitesMargeInterne;
   margin:@boitesMargeExterne;
   
   //personnalisation du texte
   font-size:@boitesTailleTexte;
}

//retirer la marge externe supérieure des blocs quand ya un titre
.noSpaceTitre { margin-top:0;}

.liste24h { text-align:center;}

// Correction du "bug" pour la couleur de fond de la liste des connectés des 24h
.deBug td {
   background-color:@boitesCouleurFond;
}

/* Ce css permet d'avoir les deux premières boites (statistiques et légendes) 
à la même taille en hauteur */
.hauteurFixe {
   height:@hauteurPremiereLigne;
   overflow:auto;
}

/*************************************
/* MISE EN FORME LISTE DES GROUPES
/************************************* */
.qeel-groupes {
   font-size:0px;line-height:0; //cache les crochets
   //autres personnalisations
   text-align:center;
}

.qeel-groupes a {
   font-size:@groupesTailleTexte;line-height:normal; //fait apparaître les liens des groupes
   
   //autres personnalisations
   display:inline-block; // IMPORTANT
   padding:@liengroupeMargeInterne;
   margin:@liengroupeMargeExterne;
   font-variant:small-caps;
   font-weight:bold;
   background:@liengroupeCouleurFond;
}

/********************************
/* Affichage des crédits
/********************************/
.lostCredits {
   color:@creditsCouleurTexte;
   .border-radius (5px);
   padding:2px 4px;
   background:@creditsCouleurFond;
   font-weight:bold;
}

.bulleCredits {
   position:relative;
   cursor:pointer;
   color:@creditsCouleurTexteBoutonBulle;
   background:@creditsCouleurBgBoutonBulle;
   .border-radius (5px);
   padding:1px 4px;

   

   & > span {
      position:absolute;
      display:block;
      bottom:150%;
      left:-20%;
      width:150px;
      background:@creditsCouleurFondBulle;
      color:@creditsCouleurTexteBulle;
      padding:2px;
      .border-radius (5px);
      opacity:0;
      .transition(all .4s ease);
      transform:scale(0) rotate(12deg);

      &:after {
         display:block;
         content:" ";
         width:0;
         border-width:8px 5px 0 5px;
         border-color:@creditsCouleurFondBulle transparent transparent transparent;
         border-style:solid;
         position:absolute;
         bottom:-8px;
         left:5px;
      }
   }

   &:hover, &:focus {
      & > span { 
         z-index:500;
         opacity:1;
         transform:scale(1) rotate(0);
         cursor:default;    
      }
   }

}


/*------------------------------------ 
Template QEEL par 'Christa Lostmindy
Publicités , Interdites Merci!://enaevolare.lostmindy.net
[FIN]
--------------------------------------*/
[/size]