Rappel du premier message :

Qeel avec onglets pour les groupes

Suite à une demande d'Airore voici un Qeel.

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



Et le code :
Dans Template index-body, remplacer ça (ligne 42 du template de base) :

Code:

<!-- BEGIN disable_viewonline -->

   <!-- BEGIN switch_viewonline_link -->
   <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
   <!-- END switch_viewonline_link -->

   <!-- BEGIN switch_viewonline_nolink -->
   <div class="h3">{L_WHO_IS_ONLINE}</div>
   <!-- END switch_viewonline_nolink -->

<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND} : {GROUP_LEGEND}</em>

</p>
<div class="clear"></div>

   <!-- BEGIN switch_statistics_link -->
   <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
   <!-- END switch_statistics_link -->

   <!-- BEGIN switch_statistics_nolink -->
   <div class="h3">{L_STATISTICS}</div>
   <!-- END switch_statistics_nolink -->

<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
   <!-- BEGIN switch_chatbox_activate -->
   <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
   <div class="page-bottom">
   {TOTAL_CHATTERS_ONLINE} :&nbsp;
   {CHATTERS_LIST}<br />
   </div>
      <!-- BEGIN switch_chatbox_popup -->
      <div id="chatbox_popup"></div>
      <script type="text/javascript">
      insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
      </script>
      <!-- END switch_chatbox_popup -->
   <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

Par :

Code:

<!-- BEGIN disable_viewonline -->
<div class="qeel_fond">
   <!-- BEGIN switch_viewonline_link -->
   <div class="qeel_titre"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="https://i.imgur.com/izIhHns.jpg" /></a></div>
   <!-- END switch_viewonline_link -->

   <!-- BEGIN switch_viewonline_nolink -->
   <div class="qeel_titre"><img src="https://i.imgur.com/izIhHns.jpg" /></div>
   <!-- END switch_viewonline_nolink -->

<div class="qeel_bloc01">
{TOTAL_USERS_ONLINE} <br />
{RECORD_USERS}
<br />
{L_ONLINE_USERS}
<br />
{TOTAL_POSTS} <br />
{TOTAL_USERS} <br />
{NEWEST_USER} <br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
</div><div class="qeel_bloc04">
<div class="qeel_groupe1"><div class="infobulle1">DESCRIPTION DU GROUPE</div></div>
<div class="qeel_groupe1"><div class="infobulle1" style="top: -25px;">DESCRIPTION DU GROUPE</div></div>
<div class="qeel_groupe1"><div class="infobulle1" style="top: -70px;">DESCRIPTION DU GROUPE</div></div>
</div><div class="qeel_bloc02"><div class="qeel_case_grp">
</div>
<div class="qeel_bloc03"><div class="qeel_credit"><a href="http://www.never-utopia.com">A-Lice | Never-Utopia</a> pour le QEEL</div><img src="https://i.imgur.com/izIhHns.jpg" alt="crédit" /></div>
</div><div class="qeel_bloc04">
<div class="qeel_groupe2"><div class="infobulle2">DESCRIPTION DU GROUPE</div></div>
<div class="qeel_groupe2"><div class="infobulle2" style="top: -25px;">DESCRIPTION DU GROUPE</div></div>
<div class="qeel_groupe2"><div class="infobulle2" style="top: -70px;">DESCRIPTION DU GROUPE</div></div>
</div><div class="qeel_bloc01" style="top: -245px";>
{L_CONNECTED_MEMBERS}
</div>

</div>
<!-- END disable_viewonline -->

CSS :

Code:

/************QEEL par A-Lice*************/
.qeel_titre {
font-size: 40px;
font-family: XX;
color: black;
text-align: center;
height: 60px;
}

.qeel_fond {
width: 790px;
height: 340px;
background: silver;
margin: auto;
padding: 5px;
}

.qeel_bloc01 {
width: 180px;
height: 260px;
background: dimgray;
padding: 10px;
display: inline-block;
color: white;
font-size: 12px;
position: relative;
z-index: 20;
top: -105px;
}

.qeel_bloc02 {
/*infobulle*/
display: inline-block;
width: 330px;
}

div.qeel_bloc03 {
width: 320px;
height: 150px;
overflow: hidden;
margin: auto;
background: dimgray;
}

.qeel_bloc03 img {
width: 320px;
height: 150px;
position: relative;
bottom: 150px;
display: inline-block;
transition: all 0.5s;
}

.qeel_bloc03:hover img {
bottom: 300px;
transition: all 0.5s;
}

.qeel_credit {
width: 300px;
height: 130px;
padding: 10px;
text-align: justify;
color: white;
font-size: 11px;
}

.qeel_bloc04 {
width: 30px;
height: 260px;
display: inline-block;
}

.qeel_case_grp {
width: 310px;
height: 120px;
padding: 5px;
margin-left: 5px;
}

/**onglets**/

.qeel_groupe1 {
position: relative;
height: 40px;
width: 40px;
border-radius: 50px;
overflow: visible;
margin-left: -20px;
background: black;
margin-bottom: 5px;
top: -15px;
}

.qeel_groupe1 .infobulle1 {
position: absolute;
left: 60px;
width: 310px;
height: 100px;
color: white;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
top: 20px;
}

.qeel_groupe1:hover .infobulle1 {
opacity: 1;
visibility: visible;
z-index: 100;
transition: all 0.5s;
}

.qeel_groupe2 {
position: relative;
height: 40px;
width: 40px;
border-radius: 50px;
overflow: visible;
margin-left: 10px;
background: black;
margin-bottom: 5px;
top: -15px;
}

.qeel_groupe2 .infobulle2 {
position: absolute;
left: -330px;
width: 310px;
height: 100px;
color: white;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
top: 20px;
}

.qeel_groupe2:hover .infobulle2 {
opacity: 1;
visibility: visible;
z-index: 100;
transition: all 0.5s;
}

/**fin onglets**/

/************Fin QEEL par A-Lice************/

Remarques : -Image pour le titre de 300px de largeur pour 80px de hauteur.
-Image pour les crédits de 320px de largeur pour 150px de hauteur.

Merci !

Merci ! (☆^O^☆)

Merci ^^

joli

Merci !

merci

Merci pour voir :) très bon week-end a vous tous :)
Patricia

thanks

Un grand merci à toi !!! ♥

Merci !

Merci !

Merci!

Merci pour le partage, c'est simple, mais très joli!

Magnifique ! Merci beaucoup !

Merci !

Merci ♥

merci

Merci! :)

Merci du partage

merci

thanks

Merci du partage :)

Merci pour ce magnifique QEEL !

Joli, merci :)

Merci A-Lice :)