Commande de Cytrius sur Never Utopia [QEEL]

Coucou,

Aperçu :

Spoiler:

QEEL sur 1000*1000. Image avec rotation au survol de 7 degrés. 3 blocs pour les infos du QEEL. Groupes, Statistiques et Anniversaire. Reliés entre eux par des pointillés (image positionné en css). Pas de personnalisation d'écriture sauf effet au survol des Groupes.

Template Index-Body : (uniquement partie qeel)

Code:: <div id ="backgroundqeel"> 

<div style="margin:auto;text-align:center;width:100%">
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">

<tr> <td class="row1" rowspan="6" align="center" valign="middle"> <div class="imgqeel"> <img src="http://i77.servimg.com/u/f77/17/98/42/85/qqel_t10.jpg" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
</div> </td>

<tr>

<td class="row1"> <img src="http://www.solutions-zen-bamboo.com/medias/diag/p-tl-br.png" class="reliure "><div class="backgroundgroupes"> <span class="groupename"> <a href="http://ocelline-testdesign.kanak.fr/g2-moderateurs?tt=1" class="groupename"> Administrateurs</a></span> <br/>
<span class="groupename"> <a href="http://ocelline-testdesign.kanak.fr/g2-moderateurs?tt=1" class="groupename">Modérateurs</a></span> <br/>
<span class="groupename"> <a href="http://ocelline-testdesign.kanak.fr/g2-moderateurs?tt=1" class="groupename"> Star</a></span> <br/>
<span class="groupename"> <a href="http://ocelline-testdesign.kanak.fr/g2-moderateurs?tt=1" class="groupename">People</a></span> <br/>
<span class="groupename"> <a href="http://ocelline-testdesign.kanak.fr/g2-moderateurs?tt=1" class="groupename">Members</a></span> </div> </tr> </td>

<td class="row1" width="100%"><img src="http://www.solutions-zen-bamboo.com/medias/diag/p-tl-br.png" class="reliure2 "><span class="gensmall"><div class="backgroundgroupes2"><span id="nb_users">{TOTAL_USERS}<script type="text/javascript">document.getElementById('nb_users').innerHTML=document.getElementById('nb_users').innerHTML.replace(/membres enregistrés/,"Alysiens enregistrés");</script></span><br />
<span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres ont posté un total de/,"Nos Alysiens on posté en tout");</script></span><br />
<span id="last_user">{NEWEST_USER}<script type="text/javascript">document.getElementById('last_user').innerHTML=document.getElementById('last_user').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier Alysien à nous avoir rejoint est");</script></span>
<br/>
<span id="connected">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('connected').innerHTML=document.getElementById('connected').innerHTML.replace(/utilisateurs en ligne/,"alysiens parmi nous");</script></span><br />
<span id="record">{RECORD_USERS}<script type="text/javascript">document.getElementById('record').innerHTML=document.getElementById('record').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"La fois où le plus d'Alysiens ont étés réunis ici en même temps,ils étaient");</script></span><br />
<br />

<span id="encemoment">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('encemoment').innerHTML=document.getElementById('encemoment').innerHTML.replace(/
Utilisateurs enregistrés :/,"Alysiens ici présents");</script></span>
<table id ="membersco"> <tr> <td> <span id="24h"> {L_CONNECTED_MEMBERS}<script type="text/javascript">document.getElementById('24h').nextSibling.firstChild.firstChild.innerHTML=document.getElementById('24h').nextSibling.firstChild.firstChild.innerHTML.replace(/Membres connectés/,'Nostalgiques présents');</script>
</span> </td> </tr> </table></div>

<img src="http://www.solutions-zen-bamboo.com/medias/diag/p-tl-br.png" class="reliure3 "> <div class="backgroundgroupes3">

<table id="anniversaire "> <tr> <td> {L_WHOSBIRTHDAY_TODAY}
<span id="anniversaire">
</span>
{L_WHOSBIRTHDAY_WEEK}
<script type="text/javascript">document.getElementById('anniversaire').parentNode.innerHTML=document.getElementById('anniversaire').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les Alysiens qui fêtent leurs anniv sont ").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Les Alysiens fêtant leurs anniv dans les prochains jours : ").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun Alysien se fait plus vieux aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Il n'y a pas d'Alysien qui fêtent leurs anniversaire prochainement");
</script></td> </tr> </table>

</table>

CSS :

Code:: /* QEEL KAELIA UNIVERSE */

/* Fond du qeel et taille*/
#backgroundqeel {
background:transparent!important;
width:1000px;
height:1000px;

}
/* Image du QEEL*/
.imgqeel {
box-shadow: 3px 3px 3px white ;
float:left;}
.imgqeel:hover {
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}

/*Structure des blocs */
.backgroundgroupes {
background-color:darkcyan;
color:white;
width:150px;
height:150px;
float:left;
margin-top:20px;
margin-left:80px;
webkit-border-radius: 20px 20px 20px 20px ;
moz-border-radius:20px 20px 20px 20px ;
ms-border-radius:20px 20px 20px 20px ;
o-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
position:absolute;
}

.reliure {
width:180px;
height:70px;
float:left;
position:relative;
margin-top:100px;
margin-left:-4px;
}

.backgroundgroupes2{
background-color:darkcyan;
color:white;
width:250px;
height:180px;
float:right;
margin-top:-150px;
margin-left:285px;
webkit-border-radius: 20px 20px 20px 20px ;
moz-border-radius:20px 20px 20px 20px ;
ms-border-radius:20px 20px 20px 20px ;
o-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
position:absolute;
}

.reliure2 {
width:180px;
height:70px;
float:left;
position:relative;
margin-top:-150px;
margin-left:220px;
}

table#membersco {

background-color:darkcyan!important;
background:transparence!important;
border:none!important;
width:258px!important;
margin-left:-4px;

}

.backgroundgroupes3{
background-color:darkcyan;
color:white;
width:210px;
height:100px;
float:right;
margin-left:200px;
margin-top:50px;
webkit-border-radius: 20px 20px 20px 20px ;
moz-border-radius:20px 20px 20px 20px ;
ms-border-radius:20px 20px 20px 20px ;
o-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
position:absolute;
}

.reliure3 {
width:180px;
height:70px;
float:left;
position:relative;
margin-left:118px;
margin-top:-5px;
}

table#anniversaire td {
background:none!important;

}

/* Groupes */

.groupename {
font-size:11px;
color:white;
letter-spacing:3px;

}

a.groupename {
font-size:11px;
color:white;
letter-spacing:3px;

}
.groupename:hover{
font-size:11px;
letter-spacing:3px;
text-transform:uppercase;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
color:black;

}

A:link {text-decoration: none !important;}
A:visited {text-decoration: none !important;}
A:active {text-decoration: none !important;}
A:hover {text-decoration: none !important;}

/* Fin du QEEL KAELIA UNIVERSE BY SELENE DE NEVER UTOPIA*/

» Commande de Isalia ♠ Catégorie pour The New Guild Rpg
» Commande de Valhalla ♠ Catégories pour CandyFornia
» Commande de Ley sur Never Utopia pour Art Smile
» Commande de Stitch sur Never Utopia [Catégorie] pour Astréa-RP
» Commande n'1 sur Templactif : Catégories pour Alohomera