CSS /////

Messages : 11 Date d'inscription : 17/05/2015 Age : 28

/*************************STRUCTURE***************************/
.bodyline{padding:0px;}
/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {width: 7px; /*largeur de la scrollbar verticale*/ height: 7px; /*hauteur de la scrollbar horizontale*/ background-color:#e18bbc;}
::-webkit-scrollbar-track {background-color: #FFFFFF; /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/ background-color: #e18bbc/*couleur de l'ascenseur*/;}

/*************************FIN STRUCTURE***************************/

/*************************HEADER***************************/
/*************************FIN HEADER***************************/

/*************************PAGE D'ACCUEIL***************************/

/*************************FIN PAGE D'ACCUEIL***************************/

/*************************CATEGORIES***************************/

/****************CATEGORIES****/
.secondarytitle, .secondarytitle h2 {Font-size: 40px; font-family: 'Berkshire Swash', cursive; margin-top: -50px; color: #16120f!important;}
.forumlink, .forumlink h1, .forumlink h2, .forumlink h3 {font-family: 'Cookie', cursive; font-size: 35px; text-align: right; margin-right: 25px; margin-top: -15px; letter-spacing:0px}

.totalcat {background: #E6E4E4; border-radius: 5px;padding: 10px; width: 660px; margin: auto;position: relative;}
.sujets_messages {font-family: tahoma; font-size: 8px; text-transform: uppercase; text-align: right; margin-right: 30px;border-bottom: 1px dotted grey;width: 110px; margin-left: 475px;}
.stats1 {background: #e2dad2; width: 145px; height: 85px; padding: 10px; text-transform: uppercase; font-size: 11px; text-align: center}
.img_cat {position: relative; margin: auto; border: 1px solid white;}
.totaldescr {background: #e2dad2; width: 455px; height: 85px; padding: 10px; font-size:11px; font-family: tahoma;}
.descr {height: 75px; overflow; auto;}
.l_links {border-top: 1px solid white; text-transform: uppercase; text-align: center; font-size: 9px;}
.l_links a {font-size: 8px;}
table.haut_cate{
width:750px;
height:100px;
background-image:url('https://i.imgur.com/8sqDArL.png');
border-radius: 20px 20px 0px 0px;
background-repeat:no-repeat;
margin:auto!important;}
div.milieu_cate{
background:#e2eeed; width:750px; margin: auto!important; }
table.bas_cate{
width:750px;
height:45px;
background-image:url('https://i.imgur.com/QvDGBOd.png');
border-radius: 0px 0px 20px 20px;
background-repeat:no-repeat;
margin:auto!important;}
/************FIN CATEGORIES***************************/

/*************************SUJETS***************************/
/*Profil*/
.profile {border-radius: 20px 20px 10px 10px; background: #eeece8; width: 210px; position: relative; z-index: 2;}
.cdr {opacity: 0.9;width: 200px; height: 320px; position: relative; top: -320px;z-index: 5;overflow: hidden; transition-duration: 1.9s; -moz-transition-duration: 1.9s; -webkit-transition-duration: 1.9s;
-o-transition-duration: 1.9s;}
.crd:hover{opacity: 0.99}
.lef {background: #f0ebe6; opacity: 1.0; width: 180px; height: 320px; font-family: 'Work Sans', sans-serif;
padding: 10px; text-align: justify; position: relative; z-index: 10; top: 280px; font-size: 10px;
transition-duration: 0.9s; -moz-transition-duration: 0.9s; -webkit-transition-duration: 0.9s;
-o-transition-duration: 0.9s;}
.lef:hover {top: 0px;}
psdo {font-family: 'Graduate', cursive; font-size: 14px; display: block; text-align: center; }
.infosp {}
.poster_rank {}
.rank_image {}
.contact_profil {}
.offline {}

/*************************FIN SUJETS***************************/

/*************************MESSAGES***************************/
/*************************FIN MESSAGES***************************/

/*************************FICHES*************************/
/*Présentations*/
/*corps de la fiche*/
.hfp {background-image: url('https://i.imgur.com/g1CJUg6.png'); width: 450px; height: 50px; margin: auto;}
.corfiche {background: #eeece8; width: 450px;text-align: justify; margin: auto; margin-top: -10px;}
.bfi {background-image: url('https://i.imgur.com/HmbwGOt.png'); width: 450px; height: 50px; margin: auto;}
/*contenu*/
.nompre {background: #f0ebe6; padding: 10px; width: 430px; text-align: center; font-family: 'Graduate', cursive;
font-size: 25px; font-weight: bold; color: #ebdbbc;}
.nompre ms {color: #ebc8bc }
.nompre cit {display: block; text-align: center; font-family: 'Work Sans', sans-serif; text-transform: lowercase;
font-size: 10px; color: none; font-weight: lighter; color : #ebc8bc}
/**table avatar et infos**/
table.ifp {margin: auto; width: 430px;}
.cifp {height: 304px; width: 218px; overflow: auto; text-align: justify; font-size: 11px; padding: 5px;
border: 3px solid #ebc8bc;}
.ifp ttl {font-family: 'Graduate', cursive; color: #ebc8bc; display: block; text-align: center; font-size: 20px;
font-weight: bold;}
.cifp kln {font-family: 'Graduate', cursive; color: #ebbcca; font-size: 9px; text-transform: lowercase;}
/*effet survol joueur*/
.ifpava {width: 200px; height: 320px; margin: auto; background-size: cover;}
.crd{opacity: 0.0;width: 200px; height: 320px;overflow: hidden; transition-duration: 1.9s; -moz-transition-duration: 1.9s; -webkit-transition-duration: 1.9s;
-o-transition-duration: 1.9s;}
.crd:hover{opacity: 0.95}
.fle {background: #f0ebe6; opacity: 1.0; width: 150px; height: 290px; font-family: 'Work Sans', sans-serif;
overflow: auto; padding: 10px; text-align: justify; position: relative; top: 100px; left: 15px;font-size: 10px;
transition-duration: 0.9s; -moz-transition-duration: 0.9s; -webkit-transition-duration: 0.9s;
-o-transition-duration: 0.9s;}
.fle:hover {top: 5px;}
.fle kln {font-family: 'Graduate', cursive; color: #ebbcca; font-size: 9px;}
.imghfp {text-align: center; margin: auto; }
.imghfp img{border: 5px solid #ebdbbc; max-width: 170px; }
.tix {padding: 15px; font-size: 11px;}
.tix ques {font-family: 'Work Sans', sans-serif; font-weight: bold; color: #ebc8bc ;}

/*infobulles*/
/*!
* Code proposé par Damudo No Kyoku
* Corrigé par Espeon
* Pour CSSActif - http://www.css-actif.com
*/
.bul {margin: auto!important; text-align: center; margin-top: 55px;}
.infobulle {display: inline-block; margin: auto; margin-right: 25px; margin-left: 25px; text-align: justify; }
.infobulle img {border-radius: 100px;}
.infobulle > div {position: absolute;margin-top: -80px; margin-left: -80px;opacity: 0; visibility: hidden;
-webkit-transform: scale(0.3) rotate(-45deg);-moz-transform: scale(0.3) rotate(-45deg);-o-transform: scale(0.3) rotate(-45deg);
transform: scale(0.3) rotate(-45deg);-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear; -o-transition: all 0.3s linear;transition: all 0.3s linear;}

.infobulle:hover > div {opacity: 1; visibility: visible;-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg); }

.ctifbulle{width: 180px; height: 150px; overflow: auto; padding: 10px; margin: auto; background: #f0ebe6; text-align: justify; border: 2px solid #ebdbbc;
-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px; font-size: 11px;}
.ctifbulle h1 {font-family: 'Graduate', cursive; color: #ebdbbc; display: block; text-align: center; font-size: 20px;}

/*Scénarios*/
.hfsc {background-image: url('https://i.imgur.com/5byCBgG.png'); width: 450px; height: 50px; margin: auto;}
.tix kln {font-family: 'Work Sans', cursive; color: #ebc8bc;
font-size: 9px; text-transform: lowercase; font-weight: bold;}
.qdsc {background: #f0ebe6; padding: 10px; width: 430px; font-size: 11px;}
.lins{text-align: center; font-family: 'Graduate', cursive;
font-size: 25px; font-weight: bold; color: #ebdbbc;}
.imgsc {width: 70px; height: 70px; border-radius: 10px 10px 10px 10px; float: left; padding-bottom: 2px; padding-right: 5px;}
ts {color: #b26563;font-family: 'Work Sans', cursive; text-transform: uppercase; font-size: 12px; }

/*Fiches Administratives*/
.hfadm {background-image: url('https://i.imgur.com/7KCcxVR.png'); width: 450px; height: 50px; margin: auto;}
.titl {text-align: center; font-family: 'Graduate', cursive; font-size: 30px; color: #b5d7e3; margin-top: 10px;}
rg {color: #6fa6bb; font-family: 'Work Sans', cursive; font-weight: bold; text-transform: uppercase; font-size: 11px;}
cita {display: block; text-align: center; color: #6fa6bb; font-family: 'Work Sans', cursive;
text-transform: lowercase; font-size: 11px;}
/*************************FIN FICHES*************************/

/*************************QEEL***************************/
.entqeel {background: #F0EAE5; width: 700px; padding: 10px; border-radius: 15px; margin: auto; text-align: justify;}
.steel {font-size: 11px; font-family: tahoma; background: #F0EAE5;box-shadow: 0px 0px 6px #F0EAE5, 0px 0px 18px #e1dbd6 inset; border-radius: 5px;padding: 10px; height: 60px; width: 600px; overflow: auto; margin: auto;}
.contong{background: #F0EAE5;box-shadow: 0px 0px 6px #F0EAE5, 0px 0px 18px #e1dbd6 inset; border-radius: 5px;padding: 7px; margin: auto;}
.onglet {
color: #8F8F8F;
font-size: 10px;
}
.contenu_onglet {
margin-top: -1px;
padding: 2px;
display: none;
height: 125px;
width: 95px;
background-color: #e2dad2;
color: #000000;
padding: 12px;
font-family: 'Noto Serif', serif;
text-align: justify;
font-size: 11px;}
.mdm {padding: 5px; background:#FFF; overflow: auto; text-align: center; width: 50px; height: 132px;font-family: tahoma; text-transform: uppercase; font-size: 9px;overflow: auto;}
.rotate {/* Safari */-webkit-transform: rotate(-20deg);/* Firefox */-moz-transform: rotate(-20deg);/* IE */-ms-transform: rotate(-20deg);/* Opera */-o-transform: rotate(-20deg):}
.contel {margin: auto;font-size: 11px; font-family: tahoma; background: #F0EAE5;box-shadow: 0px 0px 6px #F0EAE5, 0px 0px 18px #e1dbd6 inset; border-radius: 5px;padding: 10px; width: 260px; height: 145px;text-align: justify;}
.fraise {font-family: 'Great Vibes', cursive; text-transform: lowercase; font-size: 20px; text-align: center; border-bottom: 1px solid #fff;}
.contour2{background: #F0EAE5;box-shadow: 0px 0px 6px #F0EAE5, 0px 0px 18px #e1dbd6 inset; border-radius: 5px;padding: 10px;}
.cerise {font-family: tahoma; text-transform: uppercase;font-size: 8px; color: darkgrey}
.cerise:hover{font-weight:bold}
.roll{height:100px; overflow: auto;}
/*************************FIN QEEL***************************/

/*************************FOOTER***************************/
/* DEBUT DE LISTE MEMBRE */
.listemembre {
background-color:#E5DCD5;
border:4px solid #E1D4C4;
float:left;
height:90px;
margin:10px;
margin-top: 10px; border-radius: 20px;
padding:4px;
width:29%;
text-align: center;
}
.avatares{
float:left; height: 72px!important; width: 45px!important;
}

.avatares img{ margin-top: 9px;
float:left; height: 72px!important; width: 45px!important;
}
.detail {
font-size:9px;
color: #A9504E; font-weight: bold;
}
.color-detail {
font-size:10px;
color: #A96444;
}

.voir-contact {
font-size: 10px;
display: block;
margin: auto;
}

.genav {font-family: 'Graduate', Cursive; font-size: 9px;}
a.wop {
color: #FF4500;
text-decoration:none;
}
a.wop:hover {
text-decoration: none;
color: #ff0000;
}
/* FIN DE LISTE MEMBRE */
/*************************FIN FOOTER***************************/

Messages : 11 Date d'inscription : 17/05/2015 Age : 28

CODE QEEL

Code:: <img src="https://i.imgur.com/tWTZxhf.png" style="border-radius: 30px;display: block; margin: auto"/>

<div class="entqeel"><div class="steel">Royaume-Uni, an 2060. <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/,"L'apparition du nuage a causé pas moins de");</script><script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/messages/,"catastrophes");</script></span> <span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/Nous avons/,"en comptant un total de");</script><script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"potentielles victimes des effets du nuage");</script></span>. <span id="newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"La dernière victime du nuage est ");</script></span>. <span id="TotalUsersOnline">{TOTAL_USERS_ONLINE}<script type="text/javascript">
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Il y a en tout/,"Sous le nuage, on compte ");
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/utilisateur en ligne ::/,"personne dont ");
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/utilisateurs en ligne ::/,"personnes dont ");
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Enregistré/,"sorcier ");
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Enregistrés/,"sorciers ");
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Invisible et/,"cracmol et ");
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Invisibles et /,"cracmols et ");
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Invité/,"moldu.");
document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Invités/,"moldus.");
</script></span> <br/>
<span id="loggedin">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('loggedin').innerHTML=document.getElementById('loggedin').innerHTML.replace(/Utilisateurs enregistrés :/,"Les sorciers présents sont ")</script></span></div>
<center><table><tr><td><div class="contong"><div class="onglets"><table><tbody><tr><td><span class="onglet_1 onglet" id="onglet_GP1" onclick="javascript:change_onglet('GP1');"><div style="background: #9C866F;height: 15px; width: 15px; border-radius: 50px;"></div></span><br/><span class="onglet_0 onglet" id="onglet_GP2" onclick="javascript:change_onglet('GP2');"><div style="background: #A84240;height: 15px; width: 15px; border-radius: 50px;"></div></span><br/><span class="onglet_0 onglet" id="onglet_GP3" onclick="javascript:change_onglet('GP3');"><div style="background: #D1BF62;height: 15px; width: 15px; border-radius: 50px;"></div></span>





                        </td>

                        <td>

                           <center>

                              <div class="contenu_onglets">

<div style="display: block;" class="contenu_onglet" id="contenu_onglet_GP1"><div class="fraise" style="color:#9C866F">Bulles baveuses<br/><span class="cerise">Diplômés</span></div>
                                 <div class="roll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div></div>

<div class="contenu_onglet" id="contenu_onglet_GP2"><div class="fraise" style="color:#A84240">Fizwizbiz<br/><span class="cerise">Gryffondor</span></div>
                                 <div class="roll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
                                 </div>

<div class="contenu_onglet" id="contenu_onglet_GP3"><div class="fraise" style="color:#D1BF62">Patacitrouilles<br/><span class="cerise">Poufsouffle</span></div>
                                 <div class="roll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
                                 </div>

<div class="contenu_onglet" id="contenu_onglet_GP4"><div class="fraise" style="color:#5B8AA8">Plumes en sucre<br/><span class="cerise">Serdaigle</span></div>
                                 <div class="roll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
                                 </div>

<div class="contenu_onglet" id="contenu_onglet_GP5"><div class="fraise" style="color:#588546">Suçacides<br/><span class="cerise">Serpentard</span></div>
                                 <div class="roll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
                                 </div>

<div class="contenu_onglet" id="contenu_onglet_GP6"><div class="fraise" style="color:#9657B5">Chocogrenouilles<br/><span class="cerise">Adultes</span></div>
                                 <div class="roll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
                                 </div>



                              </div>

                           </center>

</td><td> <span class="onglet_0 onglet" id="onglet_GP4" onclick="javascript:change_onglet('GP4');"><div style="background: #5B8AA8;height: 15px; width: 15px; border-radius: 50px;"></div></span><br/><span class="onglet_0 onglet" id="onglet_GP5" onclick="javascript:change_onglet('GP5');"><div style="background: #588546;height: 15px; width: 15px; border-radius: 50px;"></div></span><br/><span class="onglet_0 onglet" id="onglet_GP6" onclick="javascript:change_onglet('GP6');"><div style="background: #9657B5;height: 15px; width: 15px; border-radius: 50px;"></div></span>
                                          </td>

                     </tr>

                  </tbody>

</table>
                  <script type="text/javascript">
//

</script><script type="text/javascript">
//
</script>
</div> </div></td><td><div class="contour">

<table><td><div style="background-image: url(http://theinnbetween.net/visions/sitegraphics/sorceress2.jpg); width: 60px; height:142px; background-size: cover;"><div class="transition"><div class="mdm"><div class="rotate"><br/>Membre du mois</div></div></div></div> </td><td><div style="background-image: url('http://theinnbetween.net/visions/sitegraphics/sorceress2.jpg');width: 60px; height:142px; background-size: cover;"><div class="transition"><div class="mdm"><div class="rotate"><br/>Membre du mois</div></div></div></div></td></table>

</div></td><td><div class="contel"><table class="table_1"><tr id="qeel8" style="display:none;"><td></td></tr>{L_CONNECTED_MEMBERS}<script type="text/javascript">document.getElementById('qeel8').nextSibling.firstChild.firstChild.innerHTML=document.getElementById('qeel8').nextSibling.firstChild.firstChild.innerHTML.replace(/Membres connectés au cours des 72 dernières heures/,'Ils sont passés sous le nuage rose');</script></table></div></td></tr></table></center></div>