Rappel du premier message :

Qeel en jeu d'onglets

Suite à une demande de Dooh-Nem voici un QEEL avec un système d'onglet pour les statistiques et les groupes.

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



Et le code :
Template Index_body

Chercher ligne 173 et supprimer tout ce qu'il y a entre ces balises :

Code:

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

Puis coller le code à la ligne 173 :

Code:

<!-- BEGIN disable_viewonline -->
<div class="QEEL_fond">
<script type="text/javascript">
        //<!--
                function change_onglet(bouya)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+bouya).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+bouya).style.display = 'block';
                        anc_onglet = bouya;
                }
        //-->
</script><div class="onglet_0 onglet" id="onglet_un" onmouseover="javascript:change_onglet('un');">Connectés</div><div class="onglet_0 onglet" id="onglet_deux" onmouseover="javascript:change_onglet('deux');">Statistiques</div><div class="onglet_0 onglet" id="onglet_trois" onmouseover="javascript:change_onglet('trois');">Crédits</div>
<div class="contenu_onglet" id="contenu_onglet_un">
   {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}
</div>
<div class="contenu_onglet" id="contenu_onglet_deux">
      {TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}<br />
   <table class="transparent">{L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_trois">
    Contenu du 3ième onglet
</div><script type="text/javascript">
        //<!--
                var anc_onglet = 'un';
                change_onglet(anc_onglet);
        //-->
  </script>
<div class="QEEL_img"></div>
<div class="QEEL_titre">Qui est présent dans nos murs ?</div>
<a href="http://www.never-utopia.com" style="position: absolute; left: 380px; top: 5px; font-size: 11px;">A-Lice | Never-Utopia</a>
<div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -153px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -306px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -459px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -612px;">DESCRIPTION</div></div>

<div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -153px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -306px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -459px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -612px;">DESCRIPTION</div></div>
</div>
<!-- END disable_viewonline -->

CSS :

Code:

/************QEEL par A-Lice************/
.QEEL_fond {
background: black;
width: 900px;
height: 505px;
position: relative;
margin: auto;
}

.QEEL_img {
border-radius: 100px;
width: 180px;
height: 180px;
overflow: hidden;
background: url(http://nsa37.casimages.com/img/2015/04/19/150419065016844471.png);
position: absolute;
left: 3em;
top: 1em;
}

.QEEL_titre {
position: absolute;
left: 7em;
top: 3.8em;
font-family: Arizonia;
font-size: 40px;
font-weight: bold;
color: white;
}

.transparent .row1 {
background-color: transparent;
}

.gensmall {
font-size: 12px;
}

/*onglets statistiques*/
.onglet {
width: 100px;
height: 30px;
padding: 5px;
}

.onglet_0 {
color: silver;
}

.onglet_1 {
color: white;
}

#onglet_un {
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
transform: rotate(-45deg);
position: absolute;
top: 30px;
}

#onglet_deux {
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
transform: rotate(45deg);
position: absolute;
top: 30px;
left: 170px;
}

#onglet_trois {
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
position: absolute;
top: 195px;
left: 80px;
}

.contenu_onglet {
color: black;
position: relative;
width: 380px;
height: 80px;
padding: 10px;
left: 380px;
top: 3em;
display: none;
overflow: auto;
z-index: 20;
background: #303030;
}

#contenu_onglet_un {
font-size: 12px;
text-align: justify;
}

#contenu_onglet_deux{
font-size: 12px;
text-align: justify;
}

#contenu_onglet_trois {
font-size: 12px;
text-align: justify;
}
/*fin onglets statistiques*/

/*onglets groupes*/
.QEEL_groupe1 {
position: relative;
height: 80px;
width: 150px;
opacity: 0.3;
display: inline-block;
top: 130px;
left: 4em;
margin-right: 3px;
}

.QEEL_groupe1:hover {
opacity: 1;
}

.QEEL_groupe1 .infobulle1 {
position: absolute;
left: -2.5em;
width: 840px;
height: 90px;
padding: 5px;
color: white;
background: #303030;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
top: 84px;
}

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

.QEEL_groupe2 {
position: relative;
height: 80px;
width: 150px;
opacity: 0.3;
display: inline-block;
top: 238px;
left: 4em;
margin-right: 3px;
}

.QEEL_groupe2:hover {
opacity: 1;
}

.QEEL_groupe2 .infobulle2 {
position: absolute;
left: -2.5em;
width: 840px;
height: 90px;
padding: 5px;
color: white;
background: #303030;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
top: -104px;
}

.QEEL_groupe2:hover .infobulle2 {
opacity: 1;
visibility: visible;
z-index: 100;
transition: all 0.5s;
}
/*fin onglets groupes*/

/************Fin QEEL************/

Merci

Merci, c'est très sympa ^^

Merci !

merci, mercii ^^

Merci

merci

merci du partage, c'est vraiment original **

Merci :)

Merci :)

merci

merci

Merci