Puisque tout est bon, je te file les codes ^^
Premièrement, tu dois aller sur la page de ton CSS, cocher "NON" à "Optimiser votre CSS" et enregistrer.
Puis, il faut ajouter ceci dans le CSS :
- Code:
/**************************************** QEEL ****************************************/
/*Qeel*/
#qeel {
width: 880px;
margin: auto;
text-align: center;
}
/*Colones du qeel*/
.qeel_colone {
float: left;
margin-left: 15px;
margin-bottom: 15px;
}
/*Première colone du qeel*/
#qeel_col_1 {
width: 250px;
margin-left: 0px;
text-align: center;
}
/*Texte de la première colone*/
#qeel_col_1 .qeel_inside {
font-size: 10px;
font-family: 'Verdana';
color: #353535;
text-shadow: 1px 1px 2px #a3a3a3;
}
/*Espacement entre Statistiques et Présents*/
#qeel_col_1 img:nth-child(3) {
margin-top: 10px;
}
/*Hauteur maximale pour les présents*/
#qeel_col_1 .qeel_inside:nth-child(4) {
padding-right: 2px;
max-height: 50px;
overflow: auto;
}
/*Deuxième colone*/
#qeel_col_2 {
width: 220px;
text-align: center;
}
/*Images des groupes*/
.qeelonglet {
width: 100px;
height: 40px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
opacity: 0.7;
}
/*Images du groupe affiché*/
.qeelonglet_1 {
opacity: 1;
}
/*Troisième colone*/
#qeel_col_3 {
position: relative;
margin-top: -30px;
width: 380px;
height: 225px;
background-image: url('http://img11.hostingpics.net/pics/314016imagepourinfogroupe.png');
background-position: right;
background-repeat: no-repeat;
}
/*Fait disparaître les groupes non affichés*/
.contenu_qeelonglet {
display: none;
}
/*Images des descriptions des groupes*/
.contenu_qeelonglet img {
position: absolute;
top: 45px;
left: 2px;
width: 150px;
height: 137px;
}
/*Texte des descriptions des groupes*/
.contenu_qeelonglet .qeel_groupes_inside {
position: absolute;
top: 70px;
left: 150px;
width: 120px;
padding-right: 5px;
overflow: auto;
height: 120px;
font-size: 11px;
font-family: 'Verdana';
color: #353535;
text-shadow: 1px 1px 2px #a3a3a3;
text-align: justify;
}
/*Cadre des partenaires*/
#qeel_partenaires {
margin: auto;
margin-top: 15px;
position: relative;
background-image: url('http://img11.hostingpics.net/pics/629360cadrepartenaire.png');
background-position: center;
background-repeat: no-repeat;
width: 490px;
height: 124px;
padding-top: 35px;
padding-right: 143px;
padding-left: 143px;
}
/*POUR LE SLIDESHOW PAS TOUCHE*/
/*Container du slideshow qui cache ce qui dépasse*/
#qeel_partenaires #qeel_slideshow {
position:relative;
width: 490px;
height: 101px;
overflow: hidden;
}
/*Slideshow*/
#qeel_partenaires #qeel_slider {
position: absolute;
left: 0;
top: 0;
width: 1470px;
animation: qeelslider 16s infinite;
-moz-animation: qeelslider 16s infinite;
-webkit-animation: qeelslider 16s infinite;
transition: 0.8s;
-webkit-transition: 0.8s;
}
/*Page de partenaire*/
#qeel_partenaires .qeel_inside {
float: left;
margin: auto;
width: 490px;
height: 82px;
position: relative;
}
/*Images des partenaires*/
#qeel_partenaires .qeel_inside a {
display: inline-block;
position: relative;
top: 0px;
left: 0px;
width: 88px;
height: 31px;
margin: 5px;
}
/*Images des partenaires*/
#qeel_partenaires .qeel_inside img {
position: absolute;
top: 0px;
left: 0px;
width: 88px;
height: 31px;
transition: 0.5s;
-webkit-transition: 0.5s;
z-index: 1;
}
/*Zoom sur les images au survol*/
#qeel_partenaires .qeel_inside img:hover {
top: -2px;
left: -6px;
width: 100px;
height: 35px;
z-index: 2;
}
/*Animation du slideshow*/
@keyframes qeelslider {
0%, 28%, 100% {left: 0;}
33%, 61% {left: -100%;}
66%, 94% {left: -200%;}
}
/*Animation du slideshow*/
@-webkit-keyframes qeelslider {
0%, 28%, 100% {left: 0;}
33%, 61% {left: -100%;}
66%, 94% {left: -200%;}
}
/*Animation du slideshow*/
@-moz-keyframes qeelslider {
0%, 28%, 100% {left: 0;}
33%, 61% {left: -100%;}
66%, 94% {left: -200%;}
}
/*Arrête le slideshow quand on clique sur les boutons*/
#slide200:checked ~ #qeel_slider,
#slide100:checked ~ #qeel_slider,
#slide0:checked ~ #qeel_slider,
#slide_100:checked ~ #qeel_slider,
#slide_200:checked ~ #qeel_slider {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
/*Déplacement du slideshow avec les boutons*/
#slide100:checked ~ #qeel_slider {
margin-left: 100%;
}
#slide200:checked ~ #qeel_slider {
margin-left: 200%;
}
#slide0:checked ~ #qeel_slider {
margin-left: 0%;
}
#slide_100:checked ~ #qeel_slider {
margin-left: -100%;
}
#slide_200:checked ~ #qeel_slider {
margin-left: -200%;
}
/*Section des boutons*/
.command {
display: none;
width: 1470px;
float: left;
}
#command0 {
display: block;
}
/*Page de boutons*/
.qeel_inside_2 {
float: left;
text-align: center;
width: 490px;
height: 19px;
}
/*Cache les boutons inutiles*/
#qeel_partenaires input {
display: none;
}
/*Apparence des boutons*/
#qeel_partenaires label {
display: inline-block;
border-radius: 100%;
width: 15px;
height: 15px;
padding: 2px;
margin-left: 10px;
margin-right: 10px;
background-color: pink;
box-shadow: 0px 0px 5px white;
font-size: 11px;
font-family: 'Verdana';
color: #f37ffe;
text-shadow: 0px 0px 1px #ffffff;
cursor: pointer;
}
/*Apparence des boutons survolés*/
#qeel_partenaires label:hover {
color: white;
}
/*Apparence des boutons de la page active*/
#command0 .qeel_inside_2:nth-child(1) label:nth-child(1),
#command0 .qeel_inside_2:nth-child(2) label:nth-child(2),
#command0 .qeel_inside_2:nth-child(3) label:nth-child(3),
#command1 .qeel_inside_2:nth-child(1) label:nth-child(1),
#command1 .qeel_inside_2:nth-child(2) label:nth-child(2),
#command1 .qeel_inside_2:nth-child(3) label:nth-child(3),
#command2 .qeel_inside_2:nth-child(1) label:nth-child(1),
#command2 .qeel_inside_2:nth-child(2) label:nth-child(2),
#command2 .qeel_inside_2:nth-child(3) label:nth-child(3),
#command3 .qeel_inside_2:nth-child(1) label:nth-child(1),
#command3 .qeel_inside_2:nth-child(2) label:nth-child(2),
#command3 .qeel_inside_2:nth-child(3) label:nth-child(3) {
color: white;
background-color: #f37ffe;
text-shadow: 0px 0px 1px pink;
}
/**************************************** FIN QEEL ****************************************/
Ensuite, il faut aller dans le Template Index_body et y trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 221 du template.
Nous allons remplacer tout ce qu'il y a
entre ces deux lignes (donc en les excluant) par ceci :
- Code:
<script type="text/javascript">
//<!--
function change_qeelonglet(name)
{
document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
anc_qeelonglet = name;
}
//-->
</script>
<div id="qeel">
<a id="qeel_lien_img" href="{U_VIEWONLINE}"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></a>
<br />
<div class="qeel_colone" id="qeel_col_1">
<img src="http://img11.hostingpics.net/pics/200498titrestatistique.png" alt="Statistiques" />
<div class="qeel_inside">
{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}<br />
<span id="totalonline">{TOTAL_USERS_ONLINE}</span>
</div>
<img src="http://img11.hostingpics.net/pics/846435titredespresents.png" alt="Les présents" />
<div class="qeel_inside">
<span id="loggedlist">{LOGGED_IN_USER_LIST}</span>
</div>
<script type="text/javascript">
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"utilisateur en ligne :<br />");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"utilisateurs en ligne :<br />");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré, /,"Enregistré,<br />");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés, /,"Enregistrés,<br />");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible et /,"Invisible,<br />");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles et /,"Invisibles,<br />");
document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés : /,"");
</script>
</div>
<div class="qeel_colone" id="qeel_col_2">
<img src="http://img11.hostingpics.net/pics/280813phideltatheta.png" alt="Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');" id="qeelonglet_Groupe1" class="qeelonglet_1 qeelonglet" />
<img src="http://img11.hostingpics.net/pics/808353kappadeltarho.png" alt="Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');" id="qeelonglet_Groupe2" class="qeelonglet_0 qeelonglet" />
<img src="http://img11.hostingpics.net/pics/440179gammaphibetagroupe.png" alt="Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');" id="qeelonglet_Groupe3" class="qeelonglet_0 qeelonglet" />
<img src="http://img11.hostingpics.net/pics/765463Lambdachigroupe.png" alt="Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');" id="qeelonglet_Groupe4" class="qeelonglet_0 qeelonglet" />
<img src="http://img11.hostingpics.net/pics/593749alphaphialphagroupe.png" alt="Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');" id="qeelonglet_Groupe5" class="qeelonglet_0 qeelonglet" />
<img src="http://img11.hostingpics.net/pics/535837kappadeltaepsilon.png" alt="Groupe6" onmouseover="javascript:change_qeelonglet('Groupe6');" id="qeelonglet_Groupe6" class="qeelonglet_0 qeelonglet" />
</div>
<div class="qeel_colone" id="qeel_col_3">
<div id="contenu_qeelonglet_Groupe1" class="contenu_qeelonglet">
<img src="http://img11.hostingpics.net/pics/482985groupe6.gif" alt="Groupe1" />
<div class="qeel_groupes_inside">
DESCRIPTION DU GROUPE 1
</div>
</div>
<div id="contenu_qeelonglet_Groupe2" class="contenu_qeelonglet">
<img src="http://img11.hostingpics.net/pics/840616groupe4.gif" alt="Groupe2" />
<div class="qeel_groupes_inside">
DESCRIPTION DU GROUPE 2
</div>
</div>
<div id="contenu_qeelonglet_Groupe3" class="contenu_qeelonglet">
<img src="http://img11.hostingpics.net/pics/391567groupe1.gif" alt="Groupe3" />
<div class="qeel_groupes_inside">
DESCRIPTION DU GROUPE 3
</div>
</div>
<div id="contenu_qeelonglet_Groupe4" class="contenu_qeelonglet">
<img src="http://img11.hostingpics.net/pics/496586groupe3.gif" alt="Groupe4" />
<div class="qeel_groupes_inside">
DESCRIPTION DU GROUPE 4
</div>
</div>
<div id="contenu_qeelonglet_Groupe5" class="contenu_qeelonglet">
<img src="http://img11.hostingpics.net/pics/747446groupe2.gif" alt="Groupe5" />
<div class="qeel_groupes_inside">
DESCRIPTION DU GROUPE 5
</div>
</div>
<div id="contenu_qeelonglet_Groupe6" class="contenu_qeelonglet">
<img src="http://img11.hostingpics.net/pics/208294groupe5.gif" alt="Groupe6" />
<div class="qeel_groupes_inside">
DESCRIPTION DU GROUPE 6
</div>
</div>
</div>
<div style="clear: both;"></div>
<script type="text/javascript">
//<!--
var anc_qeelonglet = 'Groupe1';
change_qeelonglet(anc_qeelonglet);
//-->
</script>
<img id="qeel_separation" src="http://img11.hostingpics.net/pics/512866imageseparation.png" alt="Séparation" />
<div id="qeel_partenaires">
<div id="qeel_slideshow">
<input type="radio" name="slideshow" id="slide_200" />
<input type="radio" name="slideshow" id="slide_100" />
<input type="radio" name="slideshow" id="slide0" />
<input type="radio" name="slideshow" id="slide100" />
<input type="radio" name="slideshow" id="slide200" />
<div id="qeel_slider">
<div class="qeel_inside">
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<br />
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
</div>
<div class="qeel_inside">
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<br />
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
</div>
<div class="qeel_inside">
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<br />
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
<a href="#" target="_blank">
<img src="http://i19.servimg.com/u/f19/17/25/89/31/sans_t10.jpg" alt="Nom du Partenaire" />
</a>
</div>
<div class="command" id="command0">
<div class="qeel_inside_2">
<label for="slide0" onclick="change_command_qeel_1()">1</label>
<label for="slide_100" onclick="change_command_qeel_1()">2</label>
<label for="slide_200" onclick="change_command_qeel_1()">3</label>
</div>
<div class="qeel_inside_2">
<label for="slide100" onclick="change_command_qeel_2()">1</label>
<label for="slide0" onclick="change_command_qeel_2()">2</label>
<label for="slide_100" onclick="change_command_qeel_2()">3</label>
</div>
<div class="qeel_inside_2">
<label for="slide200" onclick="change_command_qeel_3()">1</label>
<label for="slide100" onclick="change_command_qeel_3()">2</label>
<label for="slide0" onclick="change_command_qeel_3()">3</label>
</div>
<div style="clear: both;"></div>
</div>
<div class="command" id="command1">
<div class="qeel_inside_2">
<label for="slide0">1</label>
<label for="slide_100">2</label>
<label for="slide_200">3</label>
</div>
<div class="qeel_inside_2">
<label for="slide0">1</label>
<label for="slide_100">2</label>
<label for="slide_200">3</label>
</div>
<div class="qeel_inside_2">
<label for="slide0">1</label>
<label for="slide_100">2</label>
<label for="slide_200">3</label>
</div>
<div style="clear: both;"></div>
</div>
<div class="command" id="command2">
<div class="qeel_inside_2">
<label for="slide100">1</label>
<label for="slide0">2</label>
<label for="slide_100">3</label>
</div>
<div class="qeel_inside_2">
<label for="slide100">1</label>
<label for="slide0">2</label>
<label for="slide_100">3</label>
</div>
<div class="qeel_inside_2">
<label for="slide100">1</label>
<label for="slide0">2</label>
<label for="slide_100">3</label>
</div>
<div style="clear: both;"></div>
</div>
<div class="command" id="command3">
<div class="qeel_inside_2">
<label for="slide200">1</label>
<label for="slide100">2</label>
<label for="slide0">3</label>
</div>
<div class="qeel_inside_2">
<label for="slide200">1</label>
<label for="slide100">2</label>
<label for="slide0">3</label>
</div>
<div class="qeel_inside_2">
<label for="slide200">1</label>
<label for="slide100">2</label>
<label for="slide0">3</label>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//<!--
function change_command_qeel_1() {
document.getElementById("command0").style.display = "none"; /*Fait disparaître les commandes 0*/
document.getElementById("command1").style.display = "block";} /*Fait apparaître les commandes 1*/
function change_command_qeel_2() {
document.getElementById("command0").style.display = "none"; /*Fait disparaître les commandes 0*/
document.getElementById("command2").style.display = "block";} /*Fait apparaître les commandes 2*/
function change_command_qeel_3() {
document.getElementById("command0").style.display = "none"; /*Fait disparaître les commandes 0*/
document.getElementById("command3").style.display = "block";} /*Fait apparaître les commandes 1*/
//-->
</script>
Pour ce qui est de ce que tu devras toi-même modifier, j'ai mis en majuscule les descriptions de groupes pour qu'elles soient facile à voir.
Les images des partenaires sont faites pour que tu doives mettre des images 100x35 pixels.
Voilà, c'est tout ^^
