Et voilà je crois que j'y suis enfin arrivée o/ Tu peux voir le résultat en bas : http://cavenecadas.forums-actifs.net/
Les codes :
HTML (dans ton template index body entre les balises "BEGIN disable_viewonline" et "END disable_viewonline")
- Code:
<table id="fondqeel" align="center">
<tr>
<td>
<div class="qeeltitre" align="center">
<br/>
</div>
<br/><br/>
<table cellpadding="0">
<tbody>
<tr>
<td class="stats">
<span class="gensmall">
<span id="messages">{TOTAL_POSTS}.</span>
<script type="text/javascript">
document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/,"Nos chroniques recensent un total de");
document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/messages/,"missives");
</script>
<br/><br/>
<span id="totalu"> {TOTAL_USERS}</span>
<script type="text/javascript">
document.getElementById('totalu').innerHTML=document.getElementById ('totalu').innerHTML.replace(/Nous avons/,"Le forum compte désormais");
document.getElementById('totalu').innerHTML=document.getElementById('totalu').innerHTML.replace(/membre enregistré/,"âme sillonnant les mers. ");
document.getElementById('totalu').innerHTML=document.getElementById('totalu').innerHTML.replace(/membres enregistrés/,"âmes sillonnant les mers. ");
</script>
<br/><br/>
<span id="newuser">{NEWEST_USER}.</span>
<script type="text/javascript">
document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Nous souhaitons la bienvenue à notre recrue la plus récente :");
</script>
</span>
<br/><br/>
<table>
<tbody>
<tr>
<td>
<span class="gensmall">
{L_CONNECTED_MEMBERS}
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td class="spacou">
<a href="#" target="_blank" class="gun"> Groupe 1 </a>
<br/><br/>
<a href="#" target="_blank" class="gdeux"> Groupe 2 </a>
<br/><br/>
<a href="#" target="_blank" class="gtrois"> Groupe 3 </a>
<br/><br/>
<a href="#" target="_blank" class="gquatre"> Groupe 4 </a>
<br/><br/>
<a href="#" target="_blank" class="gcinq"> Groupe 5 </a>
<br/><br/>
<a href="#" target="_blank" class="gsix"> Groupe 6 </a>
<br/><br/>
<a href="#" target="_blank" class="gsept"> Groupe 7 </a>
</td>
<td class="connect">
<span class="gensmall">
<span id="totaluser">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateur en ligne/,"âme");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateurs en ligne/,"âmes");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistré/,"Aventurier");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistrés/,"Aventuriers");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisible/,"Corsaire");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisibles/,"Corsaires");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invité/,"Naufragé");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invités/,"Naufragés");
</script>
<br/><br/>
<span id="connecteduser"><br/>{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">
document.getElementById('connecteduser').innerHTML=document.getElementById('connecteduser').innerHTML.replace(/Utilisateurs enregistrés :/,"Retrouvez en ce moment :");
</script>
</span>
<br/><br/>
<table>
<tbody>
<tr>
<td>
<span class="gensmall">
{L_WHOSBIRTHDAY_TODAY}
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br/>
<div style="margin-left:45px;margin-bottom:-20px;">
<span class="titreparten">V.I.P
</span>
<span class="soustitreparten">very important partner</span>
</div>
<table id="fixe" align="center">
<tr>
<td>
<div class="cssactif_tableaupartenaire">
<a href="http://reve-inverness.forumactif.com/" alt= "Les Rêves d'Inverness" target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" alt="Les Rêves d'Inverness" /></a>
<a href="http://ested.forumactif.org/" target="_blank"><img src="http://i43.servimg.com/u/f43/12/23/15/70/sans_t26.png" target="_blank" /></a>
<a href="http://diesirae.leforumgratuit.com/" target="_blank" title="Dies Irae"><img src="http://i30.servimg.com/u/f30/17/70/34/64/bouton11.png" /></a>
<a href="http://ep-0.rpgboard.net" target="_blank"><img src="http://img15.hostingpics.net/pics/168838Sanstitre2.png" target="_blank" /></a>
<a href="http://www.illusionimaginative.net/" target="_blank"><img src="http://img15.hostingpics.net/pics/492754Bouton52.png" target="_blank" /></a>
<a href="http://star-city-heroes.forumsrpg.com" target="_blank"><img src="http://nsm05.casimages.com/img/2012/09/18/12091802363014694910332921.jpg" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/" target="_blank"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/" target="_blank"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/" target="_blank"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
<a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/690203logo88v2.png" target="_blank" /></a>
</div></td>
</tr>
</table>
<div class="qeelbas" align="center">
<br/>
</div>
</td>
</tr>
</table>
Le CSS
- Code:
/*----------------------BOX PARTENAIRE------------------*/
.titreparten {
color: #FFFFFF;
text-shadow: #000 0px 0px 2px;
font-family: Georgia;
letter-spacing: 3px;
font-size: 36px;
text-transform: uppercase;
}
.soustitreparten {
font-family: courier new;
letter-spacing: 1px;
color:#FFFFFF;
font-size:11px;
}
div.cssactif_tableaupartenaire {
width: 710px; /* À adapter en fonction du nombre de colonnes désirées (typiquement: (NOMBRE_COLONNE * (2*MARGE)) + (4 * Largeur initiale) */
line-height: 0; /* À ne pas modifier */
margin-left:20px;
}
div.cssactif_tableaupartenaire a, div.cssactif_tableaupartenaire a img {
height: 22px; /* Hauteur initiale */
width: 70px; /* Largeur initiale */
}
div.cssactif_tableaupartenaire a {
display: inline-block; /* À ne pas modifier */
position: relative; /* À ne pas modifier */
margin: 1px; /* MARGE entre les images */
}
div.cssactif_tableaupartenaire a img {
display: block; /* À ne pas modifier */
position: absolute; /* À ne pas modifier */
left: 0; /* À ne pas modifier */
top: 0; /* À ne pas modifier */
/* Transitions pour différents navigateurs */
/* navigateur: toutes_transitions durée type */
transition: all 0.2s linear;
}
div.cssactif_tableaupartenaire a:hover img {
height: 31px; /* Hauteur finale */
width: 88px; /* Largeur finale */
z-index: 99; /* Place l'image au-dessus des autres */
/* Positionne le logo de pleine taille au centre - À adapter */
left: -20%;
top: -30%;
}
#fixe
{
width:750px;
height:100px;
border-radius:10px;
background-color: #4F0808;
}
/* ======================================
QEEL
=========================================*/
#fondqeel {
background-image: url("http://img4.hostingpics.net/pics/446560Fondcopie.png");
}
.qeeltitre {
width:100%;
height:40px;
background-image: url("http://img11.hostingpics.net/pics/226101qeeltitre2.png");
}
.qeelbas {
width:100%;
height:116px;
background-image: url("http://img11.hostingpics.net/pics/486591qeelbas.png");
}
/*Couleur des groupes*/
a.gun { color:#FFFFFF;}
a.gdeux { color:#68A3AD;}
a.gtrois { color:#3C8A47;}
a.gquatre { color:#9E6A52;}
a.gcinq { color:#C4C7B3;}
a.gsix { color:#8A8A8A;}
a.gsept { color: #947B9E;}
/*zone des statistiques*/
.stats { /*partie statistique du forum*/
text-align: justify;
font-size: 18px;
padding: 10px;
height:120px;
overflow:auto;
border-radius:10px;
background-color: #4F0808;
width:300px;
}
.spacou {
width:150px;
text-align:center;
font-family: Georgia;
text-transform:uppercase;
font-size: 12px;
text-shadow:1px 1px 1px #000000;
}
.connect { /*partie des membres connectés*/
text-align: justify;
font-size: 18px;
padding: 10px;
height:120px;
overflow:auto;
border-radius:10px;
background-color: #4F0808;
width:300px;
}
/* ======================================
FIN QEEL
=========================================*/
C'est pas le code le plus optimal du monde mais ca a l'air de bien fonctionner. Si tu as la moindre question, le moindre souci, n'hésite pas <3
Edit :: je ne peux pas répondre aux mps. La largeur est de 850px je crois, tu pourras la modifier à ta guise. Il suffit de modifier les largeurs des balises suivantes : "fixe" (la box partenaire), "stats", "spacou" et "connect".
