Hello, je veux bien prendre en charge la demande si c'est toujours d'actu ! Par contre je pourrai voir le forum, histoire de voir l'ambiance qui y règne ?

Pour les groupes, il faut la description en infobulles ? Seulement un lien vers la description ou juste le nom ?

Coucou, tout d'abord merci de bien vouloir t'en occuper =)
En réalité, le forum n'est toujours pas ouvert, car il est encore en construction. Nous sommes deux à nous en occuper pour le moment, je ne suis que la Co-fondatrice.

Pour les groupes, il n'y a besoin que du nom, aucune description =)

D'accord. Je tente un truc dès ce soir, je te montrerai le résultat

Merci beaucoup =)

Alors voilà ce que ça donne :


Je t'avoue ne pas être une spécialiste des QEEL, donc ne m'en veux pas si les bulles ne sont pas complètement symétriques :/

Les couleurs sont personnalisables, il suffit d'aller dans le CSS(qui est commenté). Sur la photo il y a un cadre qui n'apparaît pas sur le résultat final, c'était juste pour délimiter l'espace sur mon forum test !

Voici les codes :
CSS

Code:

.bulleg1{ /* contrôle la grande bulle 2 */
position: relative;
margin: 10px 50px -15px 10px;
padding: -15px 5px;
float: left;
width: 250px;
min-height: 190px;
background: #d5b86f;
border-radius: 300px;
box-shadow: 0px 0px 2px black;
color: #5C4200;
}
.bulleg2{ /* contrôle la grande bulle 2 */
position: relative;
margin: 10px -250px 35px auto;
padding: 5px;
float: right;
width: 230px;
height: 180px;
background: #d5b86f;
border-radius: 300px;
box-shadow: 0px 0px 2px black;
color: #5C4200;
}
#dslabulleg1{ /* contrôle le contenu de la grande bulle 1 */
width: 150px;
margin: 20px auto 5px 50px;
position: relative;
color: #5C4200;
}
#dslabulleg2{ /* contrôle le contenu de la grande bulle 2 */
width: 160px;
height: 180px;
margin: 20px auto 5px auto;
position: relative;
color: #5C4200;
}
.membres_co{/* contrôle les membres connectés durant les dernières 24h */
margin-left: -30px;
background:transparent;
color: #5C4200;
width:240px;
max-height:30px;
overflow-y: auto;
word-wrap: break-word;
}
.membres_co .row1, .membres_co .gensmall{/* contrôle les membres connectés durant les dernières 24h */
background:transparent;
color: #5C4200;}
.bullep1{ /* contrôle la petite bulle 1 */
position: relative;
padding: -15px 5px;
float: left;
margin-left: 100px;
width: 210px;
min-height: 150px;
background: #d5b86f;
border-radius: 300px;
box-shadow: 0px 0px 2px black;
color: #5C4200;
}
.bullep1 .row1, .bullep1 .gensmall{/* contrôle les anniversaires */
background:transparent;
color: #5C4200;
text-align: center;}
.bullep2{/* contrôle la petite bulle 2 */
position: relative;
margin: -10px 50px 20px -10px;
padding: 5px;
float: right;
width: 185px;
height: 135px;
background: #d5b86f;
border-radius: 300px;
box-shadow: 0px 0px 2px black;
color: #5C4200;
}
.bullep2 .gensmall{ /* contrôle la couleur concernant les infos de la CB */
color: #5C4200;
}
#dslabullep1{/* contrôle le contenu de la petite bulle 1 */
width: 190px;
margin: 20px auto 5px 50px;
position: relative;
color: #5C4200;
}
#dslabullep2{/* contrôle le contenu de la petite bulle 2 */
width: 180px;
margin: 10px auto 5px 5px;
position: relative;
color: #5C4200;
text-align: center;
}
.anniversaires{/* contrôle les anniversaires du jour */
margin-top: -30px;
margin-left: 30px;
max-height:40px;
overflow-y: auto;
word-wrap: break-word;
}
.anniversairessemaine{/* contrôle les anniversaires de la semaine */
max-height:40px;
overflow-y: auto;
word-wrap: break-word;
}
.liste_cb{/* contrôle la liste des connectés à la CB */
width:180px;
max-height:40px;
overflow-y: auto;
word-wrap: break-word;
}
.groupes{/* contrôle la liste des connectés à la CB */
width: 590px;
height: auto;
font-family: 'Georgia';
font-size: 20px;
text-shadow: 1px 1px 1px #f2e8d1;
margin-bottom: 20px;
}
.groupe1{
color: #6f8cd5;
}
.groupe2{
color: #839bda;
}
.groupe3{
color: #96abe0;
}
.groupe4{
color: #9683da;
}
.groupe5{
color: #a696e0;
}
a.credits{
text-decoration: none;
color: #5C4200;
font-size: 8px;
}
a.credits:hover{
text-decoration: none;
text-shadow: 0px 0px 2px white;
}

HTML

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

   <tr>
   <td class="bulleg1"><div id="dslabulleg1" class="gensmall"><center>{NEWEST_USER}<br /> <b>▬</b><br />
          <div style="width:200px;margin-left: -25px;">{TOTAL_USERS_ONLINE}</div>
          <div style="margin-left: -50px;width:230px;max-height:30px;overflow-y: auto;word-wrap: break-word;">{LOGGED_IN_USER_LIST}</div><b>▬</b><br />
          <table class="membres_co">{L_CONNECTED_MEMBERS}</table></center></div></td>
         
      <td class="bulleg2"><div id="dslabulleg2" class="gensmall"><center>{TOTAL_POSTS}<br /> <b>▬</b><br />
                  {TOTAL_USERS}<br /> <b>▬</b><br />
                  {RECORD_USERS}</center>
      </div></td>
   </tr>
  <tr><td valign="top" align="center"><table class="bullep1" id="dslabullep1"><div class="anniversaires">{L_WHOSBIRTHDAY_TODAY}</div><br />
   <div class="anniversairessemaine">{L_WHOSBIRTHDAY_WEEK}</div>
          </table></td>
   <!-- BEGIN switch_chatbox_activate -->
   
      <td class="bullep2"><div id="dslabullep2">
                  <span class="gensmall">{TOTAL_CHATTERS_ONLINE}<br /><div class="liste_cb">{CHATTERS_LIST}</div><br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
                  </span><br /><a class="credits" href="http://www.never-utopia.com/">Never Utopia</a></div>
      </td>
   
   <!-- END switch_chatbox_activate -->
  </tr>
          <tr>
            <td class="groupes" colspan="2" align="center"><span class="groupe1">Groupe1</span>  <span class="groupe2">Groupe2</span>  <span class="groupe3">Groupe3</span>  <span class="groupe4">Groupe4</span>  <span class="groupe5">Groupe5</span></td>
   </tr>
</table>
<!-- END disable_viewonline -->

Pour l'insérer dans ton template index_body tu devras remplacer la partie

Code:

<!-- BEGIN disable_viewonline --> ....................... <!-- END disable_viewonline -->

qui s'y trouve

C'est exactement ce que je voulais, un énorme merci !   
Donc le CSS dans la partie "Feuille de Style CSS", et le Html dans la partie dédiée au Html, c'est ça ?
En revanche, je n'ai pas compris par rapport au template. Par quoi dois-je remplacer cette partie que tu m'as donnée ? Ou bien je dois l'insérer quelque part ?
Excuses-moi, je n'y connais pas grand chose :/

Alors, le CSS dans la feuille de style, et l'HTML dans le template index_body.
Cherches dans ton template la partie

Code:

<!-- BEGIN disable_viewonline -->
COOOOOOOOOOOOOODE
<!-- END disable_viewonline -->

Tu remplaces cette partie, les textes entre

Code:

 <!-- ... -->

aussi, par le code HTML que je t'ai fourni.

Si ce n'est pas clair, poste-moi ton index_body ici et j’intégrerai mon code dedans

Oh, je vois !
Encore un grand merci pour ce que tu as fait ♥

Avec plaisir ! :)

J'ai oublié les crédits ! J'édite les codes, merci de prendre les codes qui sont crédités !

EDIT : Les codes ont été édités !

Aucun souci, de toute façon tout est noté dans les crédits du forum. Mais je prendrai les codes crédités ^^

Merci, pardon pour cet oubli !