QUE LA NUIT VIENNE ;; TEMPLATES

catégories :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table width="100%" border="0" cellspacing="1" cellpadding="0">
   
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   
      <!-- BEGIN inc -->
      
      <!-- END inc -->

         
<div class="forum-cate"><div class="forum-catetitre">{catrow.cathead.CAT_TITLE}</div> {NAV_CAT_DESC}</div>

         <!-- END cathead -->

   <!-- BEGIN forumrow -->

       <table class="bg-cate" cellspacing="0" cellpadding="0">
<td>
              <div class="cadre-cate">
  <h1><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h1>
          <br/>
  <div class="nb-cate"><h2><c>{catrow.forumrow.POSTS}</c> messages <c>{catrow.forumrow.TOPICS}</c> sujets</h2></div>
                       
 <table cellspacing="0" cellpadding="0">
 
      <tr>
                  <td>
                         
                  <div class="icon-cate"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
               
                  </td>
                  <td>
                    <div class="desc-cate">{catrow.forumrow.FORUM_DESC}</div>
                  </td>
                  <td>
                  <div class="last-cate">{catrow.forumrow.LAST_POST}</div>
                  <!-- BEGIN avatar --> <div class="last-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div> <!-- END avatar -->
       
                  </td><td>
                  <div class="img-cate"></div>
                  </td>
  </tr>
</table>

                          <div id="sfc"><div class="sousfo-cate">{catrow.forumrow.LINKS}</div></div>
               
                  </div>
              </td>
</table>
                          <script type="text/javascript">
jQuery('#sfc').html(jQuery('#sfc').html().replace(/, /g,' ')).removeAttr('id');
</script>
         
   <!-- END forumrow -->
                       
 
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->

 
   <!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


CSS:

Code:


::-webkit-scrollbar {
    width: 11px;
    height: 5px;
    border: 5px solid #121114;;
    background-color:#121114;;
    position: relative;
}

::-webkit-scrollbar-thumb {
    width:3px;  
  border:2px solid #121114;;
    background-color:#596b79;
  border-radius:3px;
}



.bg-fin {
  background: -webkit-repeating-linear-gradient(90deg,#292f3a,#0b0d10)
    background-repeat:no-repeat;
   background-size:100%;
  width:100%;
  height:600px;
  margin:0px;
 position:relative;
  margin-top:-320px;
z-index:1;
}


body {
   background-color:#0b0d10;
   margin:0px;
   padding:0px;
  font-family:lato;
        color: #8e8f8d;
    overflow-y: scroll;
  scrollbar-color: #5c7b98 #121114;
  scrollbar-width:thin;
}

/****INFOBULLES*****/
   .tooltip {
 position:absolute;
 border:1px solid #596B79;
 background-color:rgba(0,0,0,0.7);
 border-radius:5px;
 padding:5px;
 color:#ccc;
    font-family:verdana;
 font-size:8px;
  text-transform:uppercase;
  z-index:999;
}

/**** spoiler etc ****/

.quote{
  background:#121114;
  padding: 10px;
  font-family:lato;
  font-weight: 400;
  color:#ccc;
  text-align: justify;
  border-color:#5c7b98;
  font-size:10px;
}

.quote b {text-transform:uppercase;}

.spoiler{
background-color:#121114;
padding:5px;
}
.spoiler span {
 color:#121114;
}

.spoiler_content {
  display:block;
  border: 1px solid #5c7b98;
  padding: 10px;
  color:#ccc;
  background:#121114;
  text-align:justify;
  font-family:lato;
  font-size:10px;
  }

.code{
  background:#121114;
  border: none!important;
  padding: 15px;
  color:#ccc;
  font-family:arial;
  font-size: 10px;
  padding-left: 20px;
  text-align: justify;
  line-height: 115%;
}

.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

.forumline .row1,.forumline .row2,.forumline .row3,.forumline .row3Right {
  padding:0px 0px;
  }

/*********POSTER MSG ETC********/

input, select {
    border: 1px solid #000;
  background:rgba(92,123,152, 0.6);
  padding: 7px;
  margin-bottom: 3px;
  font: 9px lato;
  font-weight:bold;
}

.sceditor-container textarea, .sceditor-container iframe
{
  padding: 5px !important;
  background:#232528!important;
  border:0px!important;
   font:11px lato!important;
  color:#ccc!important;
}
.sceditor-container
{
  background:#232528!important;
}

.sceditor-toolbar
{
  background: #141414 !important;
  border-bottom: 1px solid #000000 !important;
}

#sceditor_smilies {
    background-color:#000!important;
}

/*************************GENERAL***************************/

table.bodylinewidth {
  width:870px;
position:relative;
  margin-bottom:0px;
  top:35px;
  border:0px solid #000;
  background:rgba(0,0,0, 0);
  padding:15px;
  z-index:3;
        }

td.bodyline {
  background:transparent;
  padding:0px; margin:0px;
}


img {
   max-width: 100%;
}

a {
  text-decoration: none!important;
  color:#ccc;
}
a, a:hover {
   text-decoration: none !important;
   transition: 0.8s all;
}





/************************************************ HEADER ET NAVIGATION ************************************************/
.header_forum img {
        display: block;
        margin: 42px auto 0;
        object-fit: cover;
}

.navigation {
        background: #0b100d;
        position: fixed;
        top: 0;
        width: 100%;
        padding: 10px 0;
   z-index:999;
        text-align: center;
}

.navigation a {
        color: #5c7b98;;
        font-size: 13px;
        font-family:lato;
        text-transform: uppercase;
        letter-spacing:0px;
        font-weight:normal;
   margin: 0 .5%;
}

.navigation img {
     display: none;
}



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

  .PA-body {
    background:#000;
    padding:10px;
    width:860px;
    border:1px solid #596b79;
    }

/****BLOC CONTEXTE*****/

    .PA-contexteimg {
    width:390px;
    height:240px;
    background-image:url(https://via.placeholder.com/390x240);
  margin-top:-4px;
    }
    
    .PA-contexte {
    width:360px;
    padding:15px;
    background:#232528;
    color:#ccc;
    font-family:verdana;
    font-size:11px;
    line-height:12px;
    text-align:justify;
    overflow:auto;
    overflow-y: scroll;
  scrollbar-width:thin;
    height:210px;
    opacity:0;
    transition:1s;
    }
    
    .PA-contexte img{
    float:left;
    margin:6px;
    }
    
    .PA-contexte:hover {
    opacity:1;
    transition:1s;}
  
    /************BLOC NEWS*********/
    .PA-news {
    background:#596B79;
    padding:10px;
    font-size:11px;
    font-family:verdana;
    text-align:justify;
  color:#ccc;
    width:230px;
    height:110px;
    overflow:auto;
    }
    
    .PA-news span {
    font-weight:bold;
    color:#000;
    font-family:elsie;
    text-transform:uppercase;
    font-size:14px;
    }
    
    .PA-news a {
    text-decoration:none;
    color:#000;}
      
    /************TOP SITES*********/

    .PA-top {
    padding:15px;
    margin-top:5px;
    }
    
    .PA-topline {
    border-top:1px solid #5c7b98;}
    
    .PA-top a {
    color:#596B79;
    font-size:20px!important;
    transition:0.8s;
    margin-left:18px;
    text-shadow: #000 1px 1px, #000 -1px 1px, #000 -1px -1px, #000 1px -1px;
    position:relative;
    top:-10px;
    }
    
     .PA-top a:hover {
    color:#ccc;
    transition:0.8s;
    
    }
    
    .PA-topvote {
    color:#596B79;
    font-weight:bold;
    font-family:elsie;
    font-size:18px;
    text-transform:uppercase;
    text-shadow: #000 1px 1px, #000 -1px 1px, #000 -1px -1px, #000 1px -1px;
    margin-top:-13px;
    float:left;
    position:relative;
    background:#000;
    padding:3px;
    }
    
    .PA-cadre {
      background:#232528;
    padding:10px;
    font-size:11px;
    font-family:verdana;
    text-align:justify;
    width:180px;
    height:150px;
    overflow:auto;
  overflow-y:scroll;
  scrollbar-width:thin;
    margin-top:-18px;
    color:#ccc;
    }
  
  
    /************BLOC STAFF*********/
      .PA-staff {
  background-image: url(https://via.placeholder.com/180x80);
  width:170px;
  height:70px;
    padding:5px;
  }
    
    .PA-scadre {
        background: rgba(0,0,0,0.8);
    height:50px;
    padding:10px;
    text-align:justify;
    font-size:10px;
    font-family:verdana;
    color:#ccc;
    opacity:0;
    transition:0.8s;}
    
    .PA-scadre:hover {
    transition:0.8s;
    opacity:1;}
    
    .PA-scadre c {
    font-family:elsie;
    color:#ccc;
    text-transform:uppercase;
    font-size:16px;
    font-weight:900;}
    
    .PA-scadre a {
    color:#5c7b98;
    text-decoration:none;
    }
    
    .PAA1 {
    margin:15px;
    position:relative;
    left:30px;
  color:#ccc;
    }

.PAA1:hover {
  color:#5c7b98;
}
    .PAA1 i {
    color:#ccc;
    }
    
    .PAA1 i:hover {
    color:#5c7b98;}
    
    .PAA4s {
    position:relative;
    top:-5px;
}
    
  
    /************CREDITS PA ETC*********/
    .PA-info {
    background:#232528;
    width:120px;
    padding:5px;
    font-family:verdana;
    color:#ccc;
    text-transform:uppercase;
    font-size:11px;
    margin:5px;}
    
  
  
    .PA-predef {
    width:60px;
    height:60px;
    }
  
    pdf {
    color:#5c7b98;
    font-family:elsie;
    font-weight:900;
    text-transform:uppercase;
    font-size:20px;
    line-height:18px;}
    
    .PA-pote a {
    color:#ccc;
    font-size:18px;
    text-decoration:none;
    margin:5px;
    }
    
    .PA-pote {
    margin-top:10px;}

    .PA-lienk {
    display:inline-flex;
    width:130px;
     background:#232528;
    padding:5px;
        justify-content: center;
    align-items: center;
    }
    
    .PA-lien a {
    font-family:verdana;
    color:#ccc;
    font-size:10px;
    text-transform:uppercase;
    text-decoration:none;}
    

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


.forum-cate {
height:120px;
background:url(https://i.imgur.com/addy8TH.png);
  text-align:center;
}

.forum-catetitre {
  position:relative;
left:150px;
  top:30px;
  text-align:center;
background:#121114;
overflow:hidden;
width:600px;
font-family:elsie;
font-weight:900;
height:50px;
line-height:80px;}

.forum-catetitre c {
font-family:elsie;
font-weight:900;
font-size:80px;
  color:#2D3034;
  letter-spacing:-4px;
position:relative;
top:-10px;}

.forum-catetitre b {
font-size:18px;
    text-shadow: #000 1px 1px, #000 -1px 1px, #000 -1px -1px, #000 1px -1px;
color:#ccc;
position:relative;
  letter-spacing:1px;
top:-95px;}

.forum-catetitre yo {
  font-size:18px;
    text-shadow: #000 1px 1px, #000 -1px 1px, #000 -1px -1px, #000 1px -1px;
color:#ccc;
position:relative;
  letter-spacing:1px;
top:-35px;
margin-left:-60px;
left:-100px}

.bg-cate {
background:#232528;
padding:10px;
width:884px;}

    .cadre-cate h1 {
      background:#232528;
       font-family:Elsie;
    font-size:30px;
    color:#596b79;
    font-weight:900;
    font-style:italic;
    padding:0px 20px;
       position:absolute;
    margin-top:-30px;
    }

.cadre-cate a {
color:#596b79!important;}
    
        .cadre-cate {
     border:1px solid #566c79;
    padding:15px;
  margin-top:30px;
      background:#232528;
  padding-bottom:20px;
    }

    .desc-cate {
    background:#121114;
    padding:15px;
    font-family:verdana;
    font-size:9px;
    color:#ccc;
    text-align:justify;
    width:390px;
    height:60px;
    overflow:auto;
  overflow-y: scroll;
  scrollbar-width:thin;
    z-index:3;
  margin-left:0px;
      overflow-x: hidden;
    }
    
    .desc-cate c {
    color:#8fa3aa;
    text-transform:uppercase;
    font-size:10px;
    font-weight:bold;
    font-family:arial;
    }
    
    .last-cate {
    background:#293744;
    border:1px solid #111214;
    text-align:left;
    line-height:14px;
    padding:15px;
    font-size:9px;
    font-family:verdana;
    color:#ccc;
    text-transform:uppercase;
    height:58px;
    width:98px;
    }
    
    .img-cate {
    background:#464c56;
    border:1px solid #111214;
    border-left:0px;
    width:150px;
    height:58px;
    padding:15px;
    text-align:center;
    }
    
  .desc-cate img {
  width:150px!important;
  height:60px;
  position:absolute;
  margin-left:545px;
  margin-top:-5px;
  border:5px solid rgba(255,255,255, 0.3);
}
    

    .sousfo-cate a {
    background:#232528;
    padding:6px;
  padding-bottom:2px;
    margin:2px;
    font-family:Elsie;
    text-transform:uppercase;
    font-size:11px;
    color:#ccc!important;
    font-weight:bold;
    text-shadow:1px 1px #121114;
    position:relative;
    top:27px;
    }
    
    
    .nb-cate c {
    font-size:30px;
    color:#5c7b98;
    }
    
    
    .nb-cate h2 {
        font-family:elsie;
    font-size:16px;
    color:#8fa3aa;
    font-weight:bold;
    font-style:italic;
     background:#232528;
    padding:10px;
    position:absolute;
    margin-top:-60px;
    margin-left:600px;
    line-height:20px;
    }
    
    .icon-cate {
    position:relative;
    z-index:1;
    }



.ls_auteur::before {
        content: "Rédigé par ";
        margin: 0 2% 0 0;
}



/************************************************ PROFIL ************************************************/

.profil_header {
        width: 850px;
        margin: 2% auto;
        background:#232528;
        padding:15px;
        box-sizing: border-box;
}

.profil_header::after {
          display: block;
        content: "";
        clear: both;
}
.profil_pseudo_statut {
     float: left;
  text-transform:uppercase;
  font-size:10px;
  font-family:lato;
}

.profil_pseudo {
        font-family:elsie;
        font-weight:bold;
        font-size:20px;
        letter-spacing: 1px;
}

.profil_stats {
     float: right;
}

.profil_stats a {
        background: rgba(0,0,0,0.4);
        width: 100px;
        text-align: center;
        margin:20px 10px;
        padding:10px;
  font-size:11px;
  color:#5c7b98;
  text-transform:uppercase;
}

/* CONTENU */

.profil-avatar {
background:#121114;
padding:10px;
width:200px;
height:300px;}

.profil-avatar img {
width:200px;
height:320px;}

.profil-content {
background:#232528;
  padding:10px;
  font-family:lato;
  font-size:11px;
  color:#ccc;
  width:600px;
  height:320px;
  overflow:auto;
  
}

.profil-info {
width:200px;
text-transform:uppercase;
font-family:elsie;
font-weight:bold;
color:#5c7b98;
}

.profil-sp {
border-bottom:1px solid #333333;
  margin: 5px 0px;
}

/*****************AFFICHAGE SUJETS*******************/

.postbody {
  padding:15px;
  font-size:11px;
    line-height:14px;
  font-family:lato;
  color:#cccc;
  background:#232528;
}

.post-options {
  padding:10px;
}


.catHead{
    border-width:0px;
    font-size: 12px;
}

.rounded {
background:#232528;
  width:840px;
}


/****DATE****/

 td.post-top {
      padding:0px;
    }

.sujet-postinfo {
  font-family:arial;
  font-size:9px;
  text-transform:uppercase;
  text-align:center;
  color:#566c79;
  background:#111114;
  padding:10px;}


/****TITRE SUJET****/
.sujetc-titre {
  background:#232528;
  padding:15px;
}

.sujet-titre {
padding:10px;
  height:50px;
  border:1px solid #566c79;
  margin-top:10px;
  margin-bottom:10px;
  text-align:center;
}

.sujet-titre h1 {
font-family:Elsie;
  color:#5c7b98;
  font-size:22px;
  font-weight:900;
  text-shadow:1px 1px #000;
  text-transform:uppercase;
  line-height:25px;
  background:#232528;
}

/****PROFIl ET AVATAR SUJET****/
.sujet-bprofil {
  padding:15px;
  background:#2d3034;
}

.sujet-profil {
  background:#232528;
  padding:10px;
  font-family:verdana;
  font-size:9px;
  color:#b6c0cc;
  border:1px solid #5c7b98;
}
  
.sujet-profil span{
  color:#5c7b98;
  text-transform:uppercase;
  font-weight:bold;
    font-family:elsie;
}

.sujet-profil img {
  max-width:210px;
  height:auto;
  border-bottom:1px solid #b6c0cc;
  padding-bottom:6px;
  margin-bottom:5px;
}

.sujet-cadreava {
background:rgba(0,0,0, 0.5);
  padding:15px;
  border:1px solid #000;
  text-align:center;
}

.sujet-cadreava.bgAdministrateur {
  border:1Px solid #886e9e;
}

.sujet-cadreava img {
  width:200px;
  height:320px;
}

.sujet-rang {
  border-bottom:1px solid #ccc;
  padding-bottom:6px;
    font-family:verdana;
  font-size:9px;
  text-transform:uppercase;
  margin-bottom:8px;
  margin-top:-6px;
  color:#ccc;
}

.sujet-rang.bgAdministrateur {
  border-bottom:1px solid #886e9e;
  color:#886e9e;
}


.sujet-pseudo {
  font-family:Elsie;
  font-size:18px;
  text-transform:uppercase;
  text-shadow:1px 1px #000;
}

.sujet-rpg {
      background: #232528;
  color:#ccc;
      font-family: verdana;
    font-size: 9px;
    padding: 10px;
}

.sujet-rpg b {
    color:#ccc;
  text-transform:uppercase;
  font-weight:bold;
    font-family:montserrat;
}

/****SUJETS LIENS****/

.sujet-liens {
  width:200px;
  height:320px;
  text-align:center;
  background:rgba(0,0,0, 0.6);
  position:relative;
  left:16px;
  margin-top:-330px;
  top:-6px;
  transition: 0.8s;
    opacity:0;
}

.sujet-liens:hover {
  transition: 0.8s;
    opacity:1;
}

/**************************************************QEEL********************************************************/


.qeel-line {
border-top:1px solid #596b79;
width:100%;}

.qeel-titre h1 {
font-family:elsie;
font-size:30px;
font-weight:900;
color:#596b79;
  position:absolute;
  background:#0b0d10;
  padding:5px;
  text-transform:uppercase;
  font-style:italic;
  margin-left:600px;
  margin-top:-25px;
}

.qeel-connect {
  width:320px;
  padding:6px;
  padding-left:3px;
  padding-right:3px;
  height:150px;
  border-bottom:1Px solid #596b79;
  font-family:playfair display;
  font-size:9px;
  text-transform:lowercase;
}

.qeel-connect a {
font-size:14px;}

.qeel-cocadre {
  background:rgba(000,000,000, 0.5);
  padding:10px;
  height:130px;
  overflow:auto;
  text-align:justify;
}

.qeel-connected {
  width:500px;
  background:rgba(70,76,86, 0.8);
  padding:15px;
    font-family:playfair display;
  font-size:14px;
  text-transform:lowercase;
  float:right;
  height:100px;
  overflow:auto;
  color:#ccc;
}

.qeel-nouvo {
font-family:playfair display;
font-size:15px;
font-weight:bold;
text-transform:uppercase;
background:transparent;
text-align:center;
margin-top:10px;
color:#596b79;}

.qeel-stat {
font-family:playfair display;
font-weight:bold;
font-size:18px;
  text-transform:uppercase;
color:#ccc;
  padding:5px;
 text-shadow: #000 1px 1px, #000 -1px 1px, #000 -1px -1px, #000 1px -1px;
  position:relative;
  top:-20px;
}

.qeel-groups {
color:#ccc;
font-family:playfair display;
font-weight:bold;
text-align:center;}

.qeel-groups a {
font-family:playfair display;
font-weight:bold;
  font-size:16px;
  margin-left:10px;
}


/*********************************LISTE SUJETS*************************************/

.list-stat {
font-size:10px;
color:#ccc;
  font-family:playfair display;
  min-width:130px;
  background:#121114;
  padding:5px;
  line-height:14px;
  text-align:center;
}

.list-stat c {
font-family:lato;
font-size:14px;
color:#5c7b98;
font-weight:900;}

.list-titre {
background:#121114;
  height:50px;
  padding:5px;
  font-family:lato;
  font-weight:bold;
  font-size:15px;
  line-height:12px;
  text-transform:uppercase;
  margin-left:3px;
  margin-right:3px;
}

.list-titre a {
color:#596b79;
    margin-top:5px;
}

.list-desc {
font-weight:normal;
  color:#8a8a8a;
  margin:5px;
  font-size:10px;
}

.list-lastpost {
background:#121114;
  width:130px;
  padding:5px;
  height:50px;
  font-family:playfair display;
  font-size:11px;
  color:#ccc;
}

.list-img img {
width:140px;
height:35px;}



/* AFFICHAGE LISTE DES MEMBRES */
/* BLOC ENTÊTE - RECHERCHER UN UTILISATEUR OU MODIFIER ORDRE AFFICHAGE */
.tleLMBER {
margin:0 auto 10px; width:650px;
background:#2d3034; /* MODIFIABLE */
}
/* TITRE ENTÊTE */
.tleLMBER th {
margin-bottom:5px; padding:5px 0;
text-transform:uppercase; font-family:Arial; font-size:16px;
background:black; color:white; /* MODIFIABLE */
}
/* BLOC LISTE DES MEMBRES */
#LMBER {
margin:auto; width:660px;
}
 /* BLOC MEMBRE */
#MBER {
float:left; margin:0 5px 10px;
width:200px; height:360px; padding:10px; font-family:Arial;
background:#2d3034;; /* MODIFIABLE */
}
/* PSEUDONYME */
.nameLMBER{
width:200px; height:15px; padding-bottom:10px;
text-align:center; text-transform:uppercase;
  font-family:elsie;
  font-size:18px;
}
/* AVATAR */
.imgLMBER img{
width:200px; height:320px;
}
.imgLMBER div {
position:relative; margin-top:-320px;
width:200px; height:320px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE / INFORMATION */
.imgLMBER div div{
width:180px; height:300px; padding:10px; overflow:auto;
background:rgba(0,0,0,0.6); color:#ccc; /* MODIFIABLE */
font-size:10px; text-align:justify;
transform:translateY(640px); -webkit-transform:translateY(640px);
transition:transform 0.8s; -webkit-transition:transform 0.8s;
  font-family:lato;
}
#MBER:hover .imgLMBER div div{
transform:translateY(320px); -webkit-transform:translateY(320px);
}


/* IMAGES MP * WWW */
.btnLMBER {
position:relative; z-index:3; margin:-10px auto 0;
}
.btnLMBER img {
height:20px;
}

/css fiches/
.qlnvbg
{
background-color:#0c100d; width:420px;padding:20px; -moz-box-shadow: 1px 1px 5px #1d1c1c;-webkit-box-shadow: 1px 1px 5px #1d1c1c;-goog-ms-box-shadow: 1px 1px 5px #000000;box-shadow: 1px 1px 5px #1d1c1c;text-align:justify;}
 
.qlnvt
{font-family: 'Berkshire Swash', cursive;
; font-size:30px;}
 
.qlnvttraits
{background-color:silver; width:180px; height:2px;
}
 
.qlnvst
{font-family: 'Oswald', sans-serif;
font-size:22px;color:#556b54;}
 
.qlnvstp
{font-family: 'Oswald', sans-serif;
font-size:18px;color:#556b54;}
.qlnvdate
{font-family:georgia;color:silver;
 
}
.qlnvdemibg
{background-color:#0c100d;width:180px; height:260px; padding:20px;overflow:auto;
}
 
.qlnvvalid
{background-color:#0c100d;width:180px; height:150px; padding:20px;overflow:auto;
}
 
.qlnvlinks
{background-color:#0c100d;width:auto; height:20px; padding:5px; -moz-box-shadow: 1px 1px 5px #1d1c1c;-webkit-box-shadow: 1px 1px 5px #1d1c1c;-goog-ms-box-shadow: 1px 1px 5px #000000;box-shadow: 1px 1px 5px #1d1c1c;text-align:justify;
font-family: 'Oswald', sans-serif;
font-size:18px;color:#556b54;}
/fin/


viewtopic_body :

Code:

<link href="https://fonts.googleapis.com/css?family=Elsie:400,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
    $(function(){
      if(typeof(_atc) == "undefined") {
        _atc = {  };
      }
    });

    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function(id) {
      try {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
     
        if( regId > 0) {
          $('.post--' + id).toggle(0, function() {
            if( $(this).is(":visible") ) {
              $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            } else {
              $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
          });
        }
      }
      catch(e) { }
      return false;
    };
    //]]>
    </script>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="left" valign="middle" nowrap="nowrap">
          <span class="nav">
          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> 
          <!-- END switch_user_authpost -->
          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
          <!-- END switch_user_authreply -->
          </span>
        </td>
        <td class="nav" valign="middle" width="100%">
          <span class="nav">
            <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC_SECOND}
          </span>
        </td>
        <td align="right" valign="bottom" nowrap="nowrap" width="100%">
          <!-- BEGIN switch_twitter_btn -->
          <span id="twitter_btn" style="margin-left: 6px; ">
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          </span>
          <!-- END switch_twitter_btn -->
       
          <!-- BEGIN switch_fb_likebtn -->   
          <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));</script>
          <div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
          <!-- END switch_fb_likebtn -->

          <span class="gensmall bold">
            <a class="addthis_button" href="#">{L_SHARE}</a>
            <!-- BEGIN switch_plus_menu -->
            |
            <script type="text/javascript">//<![CDATA[
              var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
              var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
              var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
              var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
              var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
              insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
            <!-- END switch_plus_menu -->
          </span>
        </td>
      </tr>
    </table>

    <div class="rounded">
      <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr align="right">
          <td colspan="2" height="0">
            <table class="sujetc-titre" width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
             
                <td align="center" class="t-title">
                  <div class="sujet-titre">
                   
                  <h1> {TOPIC_TITLE}</h1>
                 
                  </div>
             
                </td>
                   
         
              </tr>
            </table>
          </td>
        </tr>
        <!-- BEGIN topicpagination -->
        <tr>
          <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
        </tr>
        <!-- END topicpagination -->
        {POLL_DISPLAY}
        <!-- BEGIN postrow -->
        <!-- BEGIN hidden -->
        <tr>
          <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
        </tr>
        <!-- END hidden -->
        <!-- BEGIN displayed -->
         
        <tr>
          <td class="post-top" colspan="2">
            <div class="sujet-postinfo">
            {L_POST_SUBJECT} • {postrow.displayed.POST_SUBJECT} • Posté le • {postrow.displayed.POST_DATE}
            </div>
          </td>
        </tr>
                   
        <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="sujet-bprofil"{postrow.displayed.THANK_BGCOLOR} valign="top" width="200">
            <div class="sujet-cadreava">
            <div class="sujet-pseudo"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}</div><br />
             
           
              <div class="sujet-rang">{postrow.displayed.POSTER_RANK}</div>
              {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}
               
                  </div>
            <div class="sujet-liens">
            {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
            </div>
             
              {postrow.displayed.ONLINE_IMG}
           
             
                  <div class="sujet-profil">
              <!-- BEGIN profile_field -->
         
                  <span>{postrow.displayed.profile_field.LABEL}</span>                     
                      {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                     
              <!-- END profile_field -->
                  </div>
                                   
<div class="sujet-rpg">
              {postrow.displayed.POSTER_RPG}
                          </div>
                     
                   
               
            <br />
            <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:200px;height:1px" />
          </td>
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                </td>
              </tr>
              <tr>
                <td colspan="2" class="hr">
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                    <!-- END switch_vote -->

                    <!-- BEGIN switch_bar -->
                    <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                      <!-- BEGIN switch_vote_plus -->
                      <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                      <!-- END switch_vote_plus -->

                      <!-- BEGIN switch_vote_minus -->
                      <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                      <!-- END switch_vote_minus -->
                    </div>
                    <!-- END switch_bar -->

                    <!-- BEGIN switch_no_bar -->
                    <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                    <!-- END switch_no_bar -->

                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                    <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="postbody">

                    <div>{postrow.displayed.MESSAGE}</div>

                    <!-- BEGIN switch_attachments -->
                    <dl class="attachbox">
                      <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                      <dd>
                        <!-- BEGIN switch_post_attachments -->
                        <dl class="file">
                          <dt>
                            <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                            <!-- BEGIN switch_dl_att -->
                            <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                            <!-- END switch_dl_att -->

                            <!-- BEGIN switch_no_dl_att -->
                            {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                            <!-- END switch_no_dl_att -->
                          </dt>

                          <!-- BEGIN switch_no_comment -->
                          <dd>
                            <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                          </dd>
                          <!-- END switch_no_comment -->

                          <!-- BEGIN switch_no_dl_att -->
                          <dd>
                            <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                          </dd>
                          <!-- END switch_no_dl_att -->

                          <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                        </dl>
                        <!-- END switch_post_attachments -->
                      </dd>
                    </dl>
                    <!-- END switch_attachments -->

                    <div class="clear"></div>
                    <!-- BEGIN switch_signature -->
                    <div class="signature_div">
                      {postrow.displayed.SIGNATURE}
                    </div>
                    <!-- END switch_signature -->

                  </div>
               
                </td>
              </tr>
            </table>
          </td>
        </tr>
      <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="200"></td>
          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="0">
           
          <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td valign="middle">
                      </td>
                </tr>
            </table>
          </td>
      </tr>
        <!-- BEGIN first_post_br -->
      </table>
    </div>
    <hr />
    <div class="rounded">
      <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
        </tr>
        <!-- END first_post_br -->
        <!-- END displayed -->
        <!-- END postrow -->
        <!-- BEGIN no_post -->
        <tr align="center">
          <td class="row1" colspan="2" height="28">
            <span class="genmed">{no_post.L_NO_POST}</span>
          </td>
        </tr>
        <!-- END no_post -->
      </table>
    </div>
    <table class="noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
      <tr>
        <td valign="top" width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      </tr>
      <!-- BEGIN switch_user_logged_in -->
      <!-- BEGIN watchtopic -->
      <tr>
        <td align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
      </tr>
      <!-- END watchtopic -->
      <!-- END switch_user_logged_in -->
    </table>

    <!-- BEGIN promot_trafic -->
    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
      <tr>
        <td class="catBottom" height="28">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
              <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
      <tr>
        <td class="catBottom" height="28">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
              <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="row2 postbody" valign="top">
          <!-- BEGIN link -->
          » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
          <!-- END link -->
        </td>
      </tr>
    </table>
    <!-- END promot_trafic -->

    <!-- BEGIN switch_forum_rules -->
    <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
      <tbody>
        <tr>
          <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td valign="top">
                    <div class="cattitle"> {L_FORUM_RULES}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td class="row1 clearfix">
            <table>
              <tr>
                <!-- BEGIN switch_forum_rule_image -->
                <td class="logo">
                  <img src="{RULE_IMG_URL}" alt="" />
                </td>
                <!-- END switch_forum_rule_image -->
                <td class="rules postbody">
                  {RULE_MSG}
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- END switch_forum_rules -->

    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="row2" colspan="2" align="center" style="padding:0px">
          <!-- BEGIN switch_user_logged_in -->
          <a name="quickreply"></a>
          {QUICK_REPLY_FORM}<br />
          <!-- END switch_user_logged_in -->
        </td>
      </tr>
      <tr>
        <td style="margin:0; padding: 0;" colspan="2">
          <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
        <!-- BEGIN show_permissions -->
        <tr>
          <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
          <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
        </tr>
        <!-- END show_permissions -->
        <tr>
          <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                <!-- BEGIN show_permissions -->
                <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                <!-- END show_permissions -->
              </tr>
            </table>
          </td>
        </tr>
      </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td style="margin:0; padding: 0;" colspan="2">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
        <tr>
          <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
              </tr>
            </table>
          </td>
        </tr>
      </tbody>
          </table>
        </td>
      </tr>
    </table>

    <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
      <tr>
        <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
          <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> 
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
          </span>
        </td>

        <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

        <!-- BEGIN moderation_panel -->
        <td align="center">
          <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
        </td>
        <td align="center" width="250">
          <span class="gensmall"> </span>
        </td>
        <!-- END moderation_panel -->
      </tr>
    </table>
    </form>

    <!-- BEGIN viewtopic_bottom -->
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
      <tr>
        <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
          <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
          </form>
        </td>
      </tr>
    </table>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">
    //<![CDATA[
    $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>
    <!-- END switch_image_resize -->
    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

PA

Code:

<div class="PA-body">
                                        
   <table cellpadding="0" cellspacing="2">
                      <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
      <tr style="">
                                          
         <td>
                                                   
            <table style="width:auto; height:auto;">
                                 <tbody></tbody> <tbody></tbody>
               <tr style="">
                                                   
                  <td>
                                         <script>
  //<!--
                function change_PAA1(name)
                {
                        document.getElementById('PAA1_'+anc_PAA1).className = 'PAA2 PAA1';
                        document.getElementById('PAA1_'+name).className = 'PAA3 PAA1';
                        document.getElementById('PAA4_'+anc_PAA1).style.display = 'none';
                        document.getElementById('PAA4_'+name).style.display = 'block';
                        anc_PAA1 = name;
                }
        //-->
        </script>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
                     <div class="PAA1s">
                                                                                                 
                        <div class="PAA4s">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
                           <div style="display: none;" id="PAA4_groupe1" class="PAA4">
                                                                                                                   
                              <div class="PA-staff" style="background:url(https://i.imgur.com/CKnTPPh.png)">
                                                                                                                        
                                 <div class="PA-scadre">
                                                      <c>pseudo</c>                                                      <br />ROLE - DISPO                                                    <br /> DC // <a target="_blank" href="">MP</a>                 
                                 </div>
                                                                                                                                                                          
                              </div>
                                                                                                                 
                           </div>
                                                                                                        
                           <div style="display: none;" id="PAA4_groupe2" class="PAA4">
                                                                                                             
                              <div style="background:url(URL image)" class="PA-staff">
                                                                  
                                 <div class="PA-scadre">
                                                      <c>NOM</c>                                                      <br />ROLE - DISPO                                                    <br /> DC // <a target="_blank" href="">MP</a>                 
                                 </div>
                                                                                                                
                              </div>
                                                                                                                   
                           </div>
                                                              
                           <div style="display: none;" id="PAA4_groupe3" class="PAA4">
                                                                                                                   
                              <div class="PA-staff" style="background:url(url image)">
                                                                  
                                 <div class="PA-scadre">
                                                      <c>pseudo</c>                                                      <br />ROLE - DISPO                                                    <br /> DC // <a target="_blank" href="">MP</a>                 
                                 </div>
                                                                                                                      
                              </div>
                                                                                                                   
                           </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                        </div>
                                            <span onmouseover="javascript:change_PAA1('groupe1');" id="PAA1_groupe1" class="PAA2 PAA1"><em class="fab fa-envira"></em></span>    <span onmouseover="javascript:change_PAA1('groupe2');" id="PAA1_groupe2" class="PAA2 PAA1"><em class="fab fa-envira"></em></span>      <span onmouseover="javascript:change_PAA1('groupe3');" id="PAA1_groupe3" class="PAA2 PAA1"><em class="fab fa-envira"></em></span>                                                                                                                                                                                                                                                                                                                 
                     </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <script type="text/javascript">
        //<!--
                var anc_PAA1 = 'groupe1';
                change_PAA1(anc_PAA1);
        //-->
        </script>                         
                  </td>
                                                   
                  <td>
                                                            
                     <div class="PA-info">
                                          crédits                 
                     </div>
                                                              
                     <div class="PA-info">
                                          ouverture                 
                     </div>
                                                              
                     <div class="PA-info">
                                          météo                 
                     </div>
                                                            
                  </td>
                                                   
                  <td>
                                           <a target="_blank" href=""><img title="nom prédef" class="PA-predef masterTooltip" src="https://via.placeholder.com/100x100" /></a> <a target="_blank" href=""><img title="nom" class="PA-predef masterTooltip" target="_blank" src="https://via.placeholder.com/100x100" /></a>    <pdf>predefinis</pdf>                     
                  </td>
                                                   
               </tr><tbody></tbody><tbody> </tbody>
            </table>
                                                     
            <table>
                 <tbody></tbody> <tbody></tbody>
               <tr style="">
                                                   
                  <td>
                                                          
                     <div class="PA-news">
                                              <span>00.00.19</span> news here bla bla Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet.    <br />    <span>00.00.19</span> <a target="_blank" href="">lien</a> bla bla Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet.                       
                     </div>
                                                          
                     <div class="PA-top">
                                                               
                        <div class="PA-topline">
                                                            
                        </div>
                                                               
                        <div class="PA-topvote">
                                             votez                 
                        </div>
                                              <a target="_blank" href=""><em class="fab fa-pagelines"></em></a> <a target="_blank" href=""><em class="fab fa-pagelines"></em></a> <a target="_blank" href=""><em class="fab fa-pagelines"></em></a> <a target="_blank" href=""><em class="fab fa-pagelines"></em></a>                 
                     </div>
                                                          
                  </td>
                                                   
                  <td>
                                                          
                     <div class="PA-cadre">
                                          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?                 
                     </div>
                                                          
                  </td>
                                                   
               </tr><tbody></tbody><tbody></tbody><tbody> </tbody> 
            </table>
                                                 
         </td>
                                          
         <td>
                                                 
            <div class="PA-contexteimg">
                                                      
               <div class="PA-contexte">
                                          <img src="https://via.placeholder.com/140x80" /> Lorem ipsum dolor sit amet, consectetur adipisicing 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.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?                     
               </div>
                                                    
            </div>
                                                   
            <div class="PA-pote">
                                         <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a> <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a>  <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a>  <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a> <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a>  <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a>  <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a>  <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a>  <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a>  <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a>  <a target="_blank" href=""><em class="far fa-moon masterTooltip" title="nom du forum"></em></a> <a target="_blank" href=""><em class="fas fa-plus-circle masterTooltip" title="plus de partenaires"></em></a>                   
            </div>
                                                 
         </td>
                                          
      </tr><tbody></tbody><tbody></tbody><tbody> </tbody> 
   </table>
                                            
   <div class="PA-lien">
                                <a target="_blank" class="PA-lienk" href="">lien</a> <a target="_blank" class="PA-lienk" href="">lien</a> <a target="_blank" class="PA-lienk" href="">lien</a> <a target="_blank" class="PA-lienk" href="">lien</a> <a target="_blank" class="PA-lienk" href="">lien</a> <a target="_blank" class="PA-lienk" href="">lien</a>                     
   </div>
                                        
</div>