Rappel du premier message :

Qeel en 3 colonnes

Suite à une demande de Airore voici un Qeel en 3 colonnes avec les groupes en infobulles.

Je précise que l'arrière plan jaune correspond à mon forum.



Et le code :
Remplacer cette partie du template index-body :

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
  </tr>
  <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
  </tr>
  <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
  </tr>
  {L_CONNECTED_MEMBERS}
  {L_WHOSBIRTHDAY_TODAY}
  {L_WHOSBIRTHDAY_WEEK}
  <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
  </tr>
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td class="row1">
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<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>
      </td>
  </tr>
  <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

Par celle-ci :

Code:

<!-- BEGIN disable_viewonline -->
<div id="qeel_titre">Qui est là ?</div>
<table id="qeel_position">
  <tr>
    <td class="qeel_colonne1"><div class="qeel_bloc">{TOTAL_POSTS}<br/>{TOTAL_USERS}<br/>{NEWEST_USER}<br/>{RECORD_USERS}
</div><br/>
<div class="qeel_bloc">{TOTAL_USERS_ONLINE}<br/>{LOGGED_IN_USER_LIST}
</div>
</td>
<td width="20px;"></td>
<td class="qeel_centre">
<div class="qeel_groupe" style="background:#5C1010"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
<div class="qeel_groupe" style="background:#0F2652"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
<div class="qeel_groupe" style="background:#739E93"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
<div class="qeel_groupe" style="background:#23471A"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
<div class="qeel_groupe" style="background:#876716"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/><a href="http://www.never-utopia.com/" class="ALice">© By A-Lice</a>
</td>
<td width="20px;"></td>
    <td class="qeel_colonne2"><table class="transparent">{L_CONNECTED_MEMBERS}</table>
</td>
  </tr>
</table>
<!-- END disable_viewonline -->

CSS :

Code:

.transparent .row1 {
background-color: transparent;
}
.transparent .gensmall {
font-size:12px;
}

#qeel_position {
position: relative;
margin:auto;
}

#qeel_titre {
font-size:30px;
font-weight: bold;
color:black;
text-align:center;
}

.qeel_colonne1 {
font-size: 12px;
text-align: justify;
width: 255px;
height: 345px;
background:#5c7885;
padding:10px;
border-top-left-radius:30px;
border-bottom-left-radius:30px;
}

.qeel_centre {
background:transparent;
width:130px;
height:305px;
padding:20px;
}

.qeel_colonne2 {
width: 255px;
height: 345px; 
background:#5c7885;
padding:10px;
text-align:center;
font-size:12px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}

.qeel_bloc {
width: 235px;
padding:10px;
height: 150px;
background:#d8d2cb;
border-radius:30px;
overflow:auto;
}

.qeel_groupe {
position: relative;
height: 60px;
width: 60px;
border-radius:100px;
overflow: visible;
margin:auto;
}

.qeel_groupe .infobulle {
position: absolute;
top: 0px;
left: 50px;
width: 150px;
height: 100px;
background:#d8d2cb;
opacity: 0;
visibility: hidden;
transition: 0.5s;
padding:10px;
border-radius:30px;
}

.qeel_groupe:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 100;
transition: 0.5s;
}

.ALice {
font-size:12px;
text-decoration:none;
display:block;
text-align:center;
}

Super merci du partage.

Merci tout plein.

Merci beaucoup !

Sympathique merci.

Merci ^^

Merci beaucoup pour ce codage, je cherchais quelque chose dans ce style ^^
Je vais essayer d'opérer quelques modifications moi-même, mais si je n'y arrive pas... direction les demandes de personnalisation !
Merci beaucoup, je n'oublierais pas de créditer :3

Merci !

Merci

merci

C'est ce qu'il me fallait! Merci beaucoup!

Merci beaucoup !! Je l'ai un peu modifié sur mon forum mais ca m'a fait gagner beaucoup de temps !