Codage complet pour LMS - Phpbb2

Heeeyyyyyyyy !
Ça fait toujours autant plaisir de bosser avec toi

Alors alors :
Est-ce que tu pourrais mettre la largeur de la bordure à 30px au lieu de 32 ? En fait, c'est une erreur de ma part, je viens de m'en rendre compte

Et j'ai testé pour arrondir les coins des annonces défilantes, mais y a pas de différence

C'est fait pour les marges :)

Pour ton annonce là haut, c'est étrange...
Mais ceci devrait fonctionner :

Code:

#fa_ticker_block {
    border-radius: 25px 25px 0 0;
    overflow: hidden;
}

Si tout est OK, je nettoie, commente et te donne tous les codes cet après midi :)

T'ai-je déjà dit à quel point tu étais une personne de grand talent ?
Le second code fonctionne, tout est parfait !


Et encore merci infiniment pour tut le travail que tu as effectué, tu as été incroyable ! Et tu m'a boostée à fond pour réussir !

Merci pour les compliments, je vais rougir

Allez, j'te donne les codes et ensuite on va régler les soucis éventuels rencontrés lors de la mise sur ton forum.
Pour chaque partie je te conseille de garder sur ton pc ce que tu as actuellement, au cas où il y ait un gros bug et qu'on doivent revenir en arrière.

A noter aussi que certains trucs ne seront pas OK tant que TOUT ne sera pas installé ;)

Voilà la CSS Elle n'est pas commentée, en détail, j'ai juste mis quelle partie concernait quelle autre partie ;) Mais si tu as besoin d'explications, n'hésite pas à demander, surtout pour modifier les couleurs si tu ne trouves pas quelque chose. J'avoue que je ne suis pas sûre que ça soit la CSS la plus claire que je n'ai jamais fait :/
Attention ici je n'ai pas remit le dernier code dont on a parlé pour les annonces.

Code:

a
a.link,
a.active,
a.visited,
a.hover {
   text-decoration: none ;
}
/*SROLLBAR MODIF*/
::-webkit-scrollbar {
   width: 6px; /*largeur de la scrollbar verticale*/
   height: 6px; /*hauteur de la scrollbar horizontale*/
}
::-webkit-scrollbar-track {
background-color: #3D3C3C /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
   background-color:#C8CFE4 /*couleur de la barre*/;
   border-radius: 10px;
}
/*FIN SROLLBAR MODIF*/
/************** Concerne tout le forum ************/

.d-flex{/*on met en "colonne" les parties qui ont cette classe*/
display: flex;
justify-content: space-between;
}
/**************************CATEGORIES ************************/
/* ----------- A mettre à jour et duppliquer selon ton nombre de forum :
0 = le premier, 1 = le deuxième, 2 = le troisième ... ---------*/

.forum[data-id-forum="forum-0"] .imageGauche {
   background:url('https://zupimages.net/up/20/04/3vy6.png');
}
.forum[data-id-forum="forum-1"] .imageGauche {
   background:url('https://zupimages.net/up/20/04/3vy6.png');
}

.forum.d-flex div.imageGauche{
   flex: 0 0 300px;
   background-size: cover;
   height:150px;
}

.TitreCate,
.listeForums,
.listeForums *{
   box-sizing: border-box;
}

.listeForums a{
   color:#2E2E2E;
   font-family: 'Playball', cursive;
   text-decoration:none;
   font-size:14px;
}
.TitreCate{
   width:100%;
   margin:0.5% auto;
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
   border:1px solid #000;
   background:  #969696;
   overflow:hidden;
}
.TitreCate h2{
   text-align: center;
   font-family: 'Berkshire Swash', cursive;
   font-size: 40px; 
   color: darkgrey;
   background: url(https://zupimages.net/up/19/48/8v38.png); /*IMAGE AUTRE QUE RPG*/
   height: 100px;
   line-height:100px;
   margin:0;
   padding:0;
}

/* ----------- A mettre à jour et duppliquer selon ton nombre de catégories ---------*/
.TitreCate h2 #titre-cate4{
   background-image: url(https://zupimages.net/up/19/48/448e.png);
   height: 100px;
}
.TitreCate h2 #titre-cate5{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}
.TitreCate h2 #titre-cate6{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}
.TitreCate h2 #titre-cate7{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}
.TitreCate h2 #titre-cate8{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}
.TitreCate h2 #titre-cate9{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}


.listeForums,
.forum,
.sousForums{
   border:1px solid #000;
}
.listeForums{
   width:100%;
   margin:5px auto 50px;
   background:  #969696;
}
.forum{
   margin:1%;
   background:#d9d7d7;
}
.nomForum{
   font-family: 'Playball', cursive;
   font-size: 14px;
}
.sousForums {
   padding: 5px;
   font-size: 0;
   justify-content: space-around !important;
}

.d-flex > div{
   margin:0.5%;
}
.d-flex div.description p{
   padding:0;
   margin: 0 0 5px;
   height:100px;
   overflow: auto;
   text-align: justify;
}
.description {
   height: 140px;
}

.lastMessage{
   position: relative;
   width:140px;
   height:200px;
}
.lastMessage > img{
   width:140px;
   height:200px;
   opacity: 0.4;
}
.absolute{
   position: absolute;
   top: 25%;
   width:140px;
   height:200px;
   text-align: center;
}

/************************** FIN CATEGORIES ************************/
/**************************DEBUT QEEL  ************************/
#QEEL #titreQEEL{
   width:100%;
   margin:0.5% auto;
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
   border:1px solid #000;
   background:  #969696;
   text-align: center;
   font-size:25px;
   line-height:40px;
   font-family: 'Playball', cursive;
}

#QEEL{
   text-align: center;
   width:100%;
   margin:0.5% auto;
   font-size:12px;
}
#QEEL > .d-flex{
   border:1px solid #000;
   width:100%;
   margin:0.5% auto;
   align-items: center;
}
#QEEL > .d-flex > div {
   padding:0;
   margin:0

}
.colonne225{
   width:225px;
   
}

#colonne300,
#colonne300 #imageCentrale,
#colonne300 #imageCentrale img{
   width:300px;
}
#colonne300 #imageCentrale,
#colonne300 #imageCentrale img{
   height:200px;
}
#colonne300 > div{
   margin:5px 0;
}
.colonne75{
   width:75px;
}
.colonne75 p{
   width:60px;
   height:60px !important;
   border-radius: 100px;
   margin: 7px auto !important;
}
/* -------------- A mettre à jour pour chaque groupe ---------------- */
#groupe1{
   background:red;
}
#groupe2{
   background:green;
}
#groupe3{
   background:blue;
}
#groupe4{
   background:purple;
}
#groupe5{
   background:orange;
}
#groupe6{
   background:orange;
}
#groupe7{
   background:grey;
}
#groupe8{
   background:white;
}
#groupe9{
   background:black;
}
#groupe10{
   background:pink;
}

#Online,
#lastDay{
   border-right:1px solid #000;
   height:200px;
}
#Online{
   border-bottom:1px solid #000;
}
#lastSubscribe,
#birthday,
#stats,
#stats div#border
{
   border-left:1px solid #000;
   height:133px;
}
#lastSubscribe,
#lastSubscribe a{
   font-family: 'Playball', cursive;
   font-size: 28px !important;
}
#stats {
   padding: 0 2%;
   font-family: 'Playball', cursive;
   font-size: 28px;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   align-items: center;
}
#stats .totalUser,
#stats .totalPosts{
   flex:0 0 50%;
}
.groupeName,
.groupeDesc{
   border: 1px solid #000;
}
.groupeName{
   font-family: 'Playball', cursive;
   font-size: 20px;
   line-height: 25px;
   margin-bottom:1%;
}
.groupeDesc{
   height:150px;
   overflow: auto;
}

/* ----------- gestion des parties gênantes sur FA :
les anniversaires et derniers connectés---------------- */
#QEEL table{
   margin: auto;
   text-align:center;
   font-size:12px;
   line-height:14px;
}
#QEEL table .row1{
   background:none;
}
#QEEL table .row1 span,
#QEEL a{
   font-size: 12px;
}

/**************************FIN QEEL  ************************/
/**************************DEBUT Affichage profil + message  ************************/
.listeMessages,
.listeMessages *{box-sizing:border-box;
}
.titreSujet{
   text-align:center;
   width:100%;
   font-size:30px;
   font-family: 'Playball', cursive;
   background:  #969696;
   border: 1px solid #000;
}

.titreSujet:first-child{
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
}
.message{
   border: 1px solid #000;
   background:#d9d7d7;
   align-items: flex-start;
}
.message > div:first-child{
   text-align:right;
}
.contenuMessage{
   border: 1px solid #000;
   text-align:justify;
   padding:10px;
   width:570px;
   min-height:400px;
}
.signature{
   text-align:left;
}
.avatarD .avatarImage {
   position: relative;
   width: 260px;
   height:380px;
   margin: 30px auto;
   transform: rotate(10deg);
   background-image:url('https://www.zupimages.net/up/20/05/g7c1.png');
}
.profil p {
   font-size: 12px;
   margin: 0;
   padding: 0 10px;
   height: auto;
   text-align: left;
}
.avatarD .avatarImage img:first-child{
   width: 200px;
   height:320px;
   transition-duration: 1s;
   margin:30px;
}
.avatarD .avatarImage > div {
   position: absolute;
   top: 0;
   left: 0;
   padding: 5px;
   width: 200px;
   height:320px;
   opacity:0;
   color:#000;
   transition-duration: 1s;
   margin:30px;
}
.profil{

   width:270px;
}
.avatarD .avatarImage:hover img:first-child{
   opacity:0;
}

.avatarD .avatarImage:hover  > div{
   opacity:1;
}
.infosExterne, .infosExterne p {
   text-align: center !important;
   font-size: 12px;
}
.infosExterne span.name a{
   font-size: 20px;
   font-family: 'Playball', cursive;
}

.basPage table {
   margin: 40px auto;
}
.navigation {
   justify-content: flex-start;
   align-items: center;
   margin: 10px;
}
.rules{
   justify-content:flex-start;
   font-size:12px;
   border:1px solid #000;
   margin:15px auto;
   background:#d9d7d7;
}
.rules > div:last-child{
   max-height:210px;
   overflow:auto;
}
.rules > div > img{
   max-width:100px;
   max-height:200px;
}

/**************************FIN Affichage profil + message  ************************/

C'est ici que tu vas gérer les fonds de tes titres de catégories, je te l'ai mis en commentaire mais voilà un zoom :

Code:

/* ----------- A mettre à jour et duppliquer selon ton nombre de catégories ---------*/
.TitreCate h2 #titre-cate4{
   background-image: url(https://zupimages.net/up/19/48/448e.png);
   height: 100px;
}
.TitreCate h2 #titre-cate5{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}
.TitreCate h2 #titre-cate6{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}
.TitreCate h2 #titre-cate7{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}
.TitreCate h2 #titre-cate8{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}
.TitreCate h2 #titre-cate9{
   background-image: url(https://zupimages.net/up/19/48/abzr.png);
   height: 100px;
}

Ici, tu vas gérer tes images de gauche :

Code:

/* ----------- A mettre à jour et duppliquer selon ton nombre de forum :
0 = le premier, 1 = le deuxième, 2 = le troisième ... ---------*/

.forum[data-id-forum="forum-0"] .imageGauche {
   background:url('https://zupimages.net/up/20/04/3vy6.png');
}
.forum[data-id-forum="forum-1"] .imageGauche {
   background:url('https://zupimages.net/up/20/04/3vy6.png');

Et enfin, ici tu vas gérer les couleurs de groupe :

Code:

/* -------------- A mettre à jour pour chaque groupe ---------------- */
#groupe1{
   background:red;
}
#groupe2{
   background:green;
}
#groupe3{
   background:blue;
}
#groupe4{
   background:purple;
}
#groupe5{
   background:orange;
}
#groupe6{
   background:orange;
}
#groupe7{
   background:grey;
}
#groupe8{
   background:white;
}
#groupe9{
   background:black;
}
#groupe10{
   background:pink;
}

Un peu de javascript
Ici, vérifie bien que le javascript est activé (Modules > Gestion des codes javascript > "Activer la gestion des codes Javascript :" coché à oui
J'en ai mis le moins possible, pour que ça ne te prenne pas la tête. Mais on s'en sert pour :
- les images de gauches sur l'index
- le déplacement des champs dans les profils / messages.
Le premier ( à installer dans modules > GEstion des codes javascript > Nouveau ) : tu dois cocher "sur l'index" et "sur les sous-forums" :

Code:

$(function(){
     //on initialise un compteur
   var cpt = 0;
     // pour chaque class "forum"
     // on lui rajoute un attribu qui s'appelle forum-X avec X la valeur du compteur
     // on incrémente le compteur
   $('.forum').each(function(){
      $(this).attr('data-id-forum', 'forum-'+cpt+'');
      cpt ++;
   });
});

Tu enregistre :)
Ensuite on crée un nouveau, on coche juste "dans les sujets" :

Code:

jQuery(function () {
    //on déclare 2 variables qui nous permettent de trouver nos champs
    var $chemin= ".message .profil p",
        $eltParent = '.message';

    // On parcourt chaque champs des profils
    $( $chemin ).each(function( index ) {
        // On récupére le contenu html de ces champs
        var champs = $(this).find('.label > span:first-child').html() ;
       
        // On teste sur le champs correspond aux blocs qu'on veut isoler
        // pour info || signifie "ou"
        if( champs == "Stuff" || champs == "Loot"){
            // Je déplace le contenu dans le bloc masqué après le bloc "infosDeplaces"
            $(this).parents($eltParent).find('.infosExterne .infosDeplaces').append(this);
        }
 
    });
});

Tu enregistres et voilà :)

Pour comprendre à fond ce js, tu peux lire le tutoriel de Miettes, dont je me suis servi

On va passer aux templates, je passe dans un autre message pour ne pas être bloquée par les limites de caractère de FA ;)

Template index_body
ici on va gérer le fond du panneau d'accueil mais aussi et surtout le QEEL. Je te mets le code et je t'explique ce que tu as à modifier ensuite ;)
Voilà le template au complet :

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->

<!-- BEGIN message_admin_titre -->

<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->

<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>

<!-- END message_admin_txt -->
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

            <table>
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>

         <!-- BEGIN switch_social_login -->
         <td width="10%" align="center" valign="middle" class="row1">
            <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
         </td>
         <td width="40%" class="align_gauche row1">
            <div class="social_btn">
               <!-- BEGIN fb_connect -->
               <div class="fb-login-button"></div>
               <!-- END fb_connect -->
               <!-- BEGIN topicit_connect -->
               <div class="ti-connect"></div>
               <!-- END topicit_connect -->
            </div>
         </td>
         <!-- END switch_social_login -->

      </tr>
   </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
            <!-- BEGIN switch_delete_cookies -->
            <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
            <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td width="50%" valign="top" align="right" class="row1">

            <table>
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>

         <!-- BEGIN switch_social_login -->
         <td width="10%" align="center" valign="middle" class="row1">
            <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
         </td>
         <td width="40%" class="align_gauche row1">
            <div class="social_btn">
               <!-- BEGIN fb_connect -->
               <div class="fb-login-button"></div>
               <!-- END fb_connect -->
               <!-- BEGIN topicit_connect -->
               <div class="ti-connect"></div>
               <!-- END topicit_connect -->
            </div>
         </td>
         <!-- END switch_social_login -->

      </tr>
   </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->

<div id="QEEL">
   <div id="titreQEEL">
      {L_WHO_IS_ONLINE}
   </div>
   <div class="d-flex">
      <div class="colonne225">
         <div id="Online">
            {TOTAL_USERS_ONLINE}<br /><br />
            {LOGGED_IN_USER_LIST}
            <script type="text/javascript">
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/Il y a en tout/,'Vous pouvez croiser');
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/utilisateurs en ligne :: /,'marcheurs, présents parmi nous en cet instant.<br />Il y a ');
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/utilisateur en ligne :: /,'marcheur, présent parmi nous en cet instant.<br />Il y a ');
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/Enregistrés/,'bandits bien connus de nos services');
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/Enregistré/,'bandit bien connu de nos services');
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/Invisibles/,'fantômes errants');
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/Invisible/,'fantôme errant');
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/Invités/,'invités à la cour du roi.');
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/Invité/,'invité à la cour du roi.');
               
               document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
               replace(/Utilisateurs enregistrés/,'Les habitués de notre Taverne sont');
            </script>
            
         </div>
         <div id="lastDay">
            <table>{L_CONNECTED_MEMBERS}</table>
            <script type="text/javascript">document.getElementById("lastDay").innerHTML = document.getElementById("lastDay").innerHTML.
            replace(/Membres connectés au cours des/,'Ces joueurs ont foulé nos terres dans les');
         </script>
      </div>
   </div>
   <div class="colonne75">
      <p onMouseOver="javascript:change_onglet('1');" id="groupe1"> </p>
      <p onMouseOver="javascript:change_onglet('2');" id="groupe2"> </p>
      <p onMouseOver="javascript:change_onglet('3');" id="groupe3"> </p>
      <p onMouseOver="javascript:change_onglet('4');" id="groupe4"> </p>
      <p onMouseOver="javascript:change_onglet('5');" id="groupe5"> </p>
   </div>
   <div id="colonne300">
      <div id="imageCentrale">
         <img src="https://www.zupimages.net/up/19/48/43o9.png" alt="image" />
      </div>
      <div id="1">
         <div class="groupeName">
            Nom du groupe 1
         </div>
         <div class="groupeDesc">
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </div>
      </div>
      <div id="2">
         <div class="groupeName">
            Nom du groupe 2
         </div>
         <div class="groupeDesc">
            Description du groupe 2
         </div>
      </div>
      <div id="3">
         <div class="groupeName">
            Nom du groupe 3
         </div>
         <div class="groupeDesc">
            Description du groupe 3
         </div>
      </div>
      <div id="4">
         <div class="groupeName">
            Nom du groupe 4
         </div>
         <div class="groupeDesc">
            Description du groupe 4
         </div>
      </div>
      <div id="5">
         <div class="groupeName">
            Nom du groupe 5
         </div>
         <div class="groupeDesc">
            Description du groupe 5
         </div>
      </div>
      <div id="6">
         <div class="groupeName">
            Nom du groupe 6
         </div>
         <div class="groupeDesc">
            Description du groupe 6
         </div>
      </div>
      <div id="7">
         <div class="groupeName">
            Nom du groupe 7
         </div>
         <div class="groupeDesc">
            Description du groupe 7
         </div>
      </div>
      <div id="8">
         <div class="groupeName">
            Nom du groupe 8
         </div>
         <div class="groupeDesc">
            Description du groupe 8
         </div>
      </div>
      <div id="9">
         <div class="groupeName">
            Nom du groupe 9
         </div>
         <div class="groupeDesc">
            Description du groupe 9
         </div>
      </div>
      <div id="10">
         <div class="groupeName">
            Nom du groupe 10
         </div>
         <div class="groupeDesc">
            Description du groupe 10
         </div>
      </div>
   </div>
   <div class="colonne75">
      <p onMouseOver="javascript:change_onglet('6');" id="groupe6"> </p>
      <p onMouseOver="javascript:change_onglet('7');" id="groupe7"> </p>
      <p onMouseOver="javascript:change_onglet('8');" id="groupe8"> </p>
      <p onMouseOver="javascript:change_onglet('9');" id="groupe9"> </p>
      <p onMouseOver="javascript:change_onglet('10');" id="groupe10"> </p>
   </div>
   <div class="colonne225">
      <div id="lastSubscribe"> {NEWEST_USER}
         <script type="text/javascript">document.getElementById("lastSubscribe").innerHTML = document.getElementById("lastSubscribe").innerHTML.
         replace(/ L'utilisateur enregistré le plus récent est/,' Bienvenue à <br /> ');
      </script>
   </div>
   <div class="d-flex" id="stats">
      <div class="totalUser">
         {TOTAL_USERS}
         <script type="text/javascript">document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
         replace(/ Nous avons/,' ');
         document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
         replace(/ enregistrés/,' ');
         document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
         replace(/ enregistré/,' ');
      </script>
   </div>
   <div id="border">
   </div>
   <div class="totalPosts"> {TOTAL_POSTS}
      <script type="text/javascript">document.getElementsByClassName("totalPosts")[0].innerHTML = document.getElementsByClassName("totalPosts")[0].innerHTML.
      replace(/ Nos membres ont posté un total de/,' ');
   </script>
</div>
</div>
<div id="birthday">
   <table>
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}
   </table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
   document.getElementById(2).style.display = 'none';
   document.getElementById(3).style.display = 'none';
   document.getElementById(4).style.display = 'none';
   document.getElementById(5).style.display = 'none';
   document.getElementById(6).style.display = 'none';
   document.getElementById(7).style.display = 'none';
   document.getElementById(8).style.display = 'none';
   document.getElementById(9).style.display = 'none';
   document.getElementById(10).style.display = 'none';
   var anc_onglet=1;
   function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>

<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td> &nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

Pour l'explication :
Ici se sont les ronds de tes groupes :

Code:

<p onMouseOver="javascript:change_onglet('1');" id="groupe1"> </p>
      <p onMouseOver="javascript:change_onglet('2');" id="groupe2"> </p>
      <p onMouseOver="javascript:change_onglet('3');" id="groupe3"> </p>
      <p onMouseOver="javascript:change_onglet('4');" id="groupe4"> </p>
      <p onMouseOver="javascript:change_onglet('5');" id="groupe5"> </p>

un p = un rond. Si tu veux en ajouter / en retirer, il te suffit de rajouter une ligne avec le bon chiffre entre parenthèse et avec le bon id ou alors de supprimer une ligne.

Ensuite, ceci correspond à un bloc "titre groupe" suivi de la description :

Code:

<div id="1">
         <div class="groupeName">
            Nom du groupe 1
         </div>
         <div class="groupeDesc">
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
         </div>
      </div>

Les divs ne sont pas à enlever, seul le contenu est à changer.
Si tu veux en ajouter, copie / colle tout ça en changeant l'ID de la première div

Et ici c'est le script qui sert à gérer le affiché / masqué au passage de la souris :

Code:

<script type="text/javascript">
   document.getElementById(2).style.display = 'none';
   document.getElementById(3).style.display = 'none';
   document.getElementById(4).style.display = 'none';
   document.getElementById(5).style.display = 'none';
   document.getElementById(6).style.display = 'none';
   document.getElementById(7).style.display = 'none';
   document.getElementById(8).style.display = 'none';
   document.getElementById(9).style.display = 'none';
   document.getElementById(10).style.display = 'none';
   var anc_onglet=1;
   function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>

Si tu en rajoute : il faut rajouter une ligne comme celle-ci :

Code:

   document.getElementById(10).style.display = 'none';

en mettant à jour le nombre entre parenthèse ;)
Si tu en supprime il suffit de supprimer la ligne qui correspond au nombre que tu as retiré.

Template index_box

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
            {CURRENT_TIME}<br />
         </span>
         <!-- 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 -->
<div class="TitreCate">
   {catrow.tablehead.L_FORUM}
</div>
<div class="listeForums">
   <!-- END tablehead -->

   <!-- BEGIN cathead -->

   <!-- END cathead -->

   <!-- BEGIN forumrow -->

   <div class="forum d-flex">
      <div>
         <div class="d-flex">
            <div class="imageGauche">
               
            </div>
            <div>
               <div class="d-flex nomForum">
                  <div>
                     <h{catrow.forumrow.LEVEL} class="hierarchy">
                     <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                     </span>
                  </h{catrow.forumrow.LEVEL}>
               </div>
               <div>
                  {catrow.forumrow.POSTS} missives dans {catrow.forumrow.TOPICS} sujets
               </div>
            </div>
            <div class="description">
               <p>
                  <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                  <span class="gensmall">
                     <!-- BEGIN switch_moderators_links -->
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->
                  </span>
               </p>
               
               
            </div>
         </div>
         
      </div> 
      <div class="sousForums d-flex">
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </div> 
   </div>
   <div class="lastMessage">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      <div class="absolute">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </div>
   </div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->

<!-- END catfoot -->

<!-- BEGIN tablefoot -->
</div>   
<!-- END tablefoot --><!-- END catrow -->


Ici, pour tes noms de catégorie, ça va se passer dans ton PA > Général > catégories et forums > et dans le titre tu dois mettre une div avec le nom de ta catégorie, par exemple :

Code:

<div id="titre-cate5">Catégorie N°2</div>

Je continue dans le message suivant

Template Overall_header
Attention ici si tu as d'autres police que celles de la commande, je ne les ai pas remises :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
   <meta http-equiv="content-script-type" content="text/javascript"/>
   <meta http-equiv="content-style-type" content="text/css"/>
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
   <link rel="search" type="application/opensearchdescription+xml"
   href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <!-- BEGIN switch_recent_jquery -->
   <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
   <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
   <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
   <!-- END switch_recent_jquery -->
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
   {RICH_SNIPPET_GOOGLE}

   <!-- BEGIN switch_fb_login -->
   <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
   <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
   /* Definir le sens de direction en fonction du panneau admin */
   var tickerDirParam = "{switch_ticker.DIRECTION}";
   var slid_vert = false;
   var auto_dir = 'next';
   var h_perso = parseInt({switch_ticker.HEIGHT});

   switch (tickerDirParam) {
      case 'top' :
      slid_vert = true;
      break;
      case 'left':
      break;
      case 'bottom':
      slid_vert = true;
      auto_dir = 'prev';
      break;
      case 'right':
      auto_dir = 'prev';
      break;
      default:
      slid_vert = true;
   }

   $(document).ready(function () {
      var w_cont = $('#fa_ticker_container').width();

      if (w_cont > 0) {
         $('#fa_ticker_container').width(w_cont);

         /* Affichage de la liste */
         $('#fa_ticker_content').css('display', 'block');

         /* Calcul des dimensions du conteneur et des elements */
         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});
         var height_max = h_perso;

         /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
         $('ul#fa_ticker_content li').each(function () {
            if ($(this).height() > height_max) {
               height_max = $(this).height();
            }
         });

         /* Redimensionnement des elements et des images trop larges */
         $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
            if ($(this).width() > width_item) {
               var ratio = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
            }
         });

         /* Redimensionnement et centrage du conteneur en mode vertical */
         if (slid_vert) {
            $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
         }

         /* Initialisation du caroussel */
         $('#fa_ticker_content').jcarousel({
            vertical: slid_vert,
            wrap: 'circular',
            auto: {switch_ticker.STOP_TIME},
            auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
         });
      } else {
         $('ul#fa_ticker_content li:not(:first)').css('display', 'none');
         $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
      }
   });
      //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function () {
      <!-- BEGIN switch_enable_pm_popup -->
      pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
      if (pm != null) {
         pm.focus();
      }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
      report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
      if (report != null) {
         report.focus();
      }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
      $(document).ready(function () {
         Ticker.start({
            height: {switch_ticker.HEIGHT},
            spacing: {switch_ticker.SPACING},
            speed: {switch_ticker.SPEED},
            direction: '{switch_ticker.DIRECTION}',
            pause: {switch_ticker.STOP_TIME}
         });
      });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
   var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
   logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready(function () {
      $(window).resize(function () {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
            "left": windowWidth / 2 - popupWidth / 2
         });
      });
   });
   <!-- END switch_login_popup -->
      //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
      .jcarousel-skin-tango .jcarousel-item {
         text-align: center;
         width: 10px;
      }

      .jcarousel-skin-tango .jcarousel-item-horizontal {
         margin-right: {switch_ticker.SPACING}px;
      }

      .jcarousel-skin-tango .jcarousel-item-vertical {
         margin-bottom: {switch_ticker.SPACING}px;
      }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}

   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
      //<![CDATA[
      (function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
         a = s.createElement(o),
         m = s.getElementsByTagName(o)[0];
         a.async = 1;
         a.src = g;
         m.parentNode.insertBefore(a, m)
      })
      (window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
      ga('create', '{G_ANALYTICS_ID}', 'auto');
      ga('send', 'pageview');
      ga('set', 'anonymizeIp', true);

      <!-- BEGIN google_analytics_code_bis -->
      ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
      ga('bis.send', 'pageview');
      ga('bis.set', 'anonymizeIp', true);
      <!-- END google_analytics_code_bis -->
      //]]>

   </script>
   <!-- END google_analytics_code -->
   <link href="https://fonts.googleapis.com/css?family=Playball&display=swap" rel="stylesheet" />
   
   <link href="https://fonts.googleapis.com/css?family=Berkshire+Swash&display=swap" rel="stylesheet" />

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
   <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
   <div class="content">
      <p>
         {hitskin_preview.L_THEME_SITE_PREVIEW}
         <br/>
         <span>{hitskin_preview.U_INSTALL_THEME}<a
            href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" style="z-index: 10000 !important;">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1"
      cellpadding="0">
      <tr height="25">
         <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
         </td>
      </tr>
      <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
         <td class="row1" align="left" valign="top">
            <div id="login_popup_buttons">
               <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                  onclick="parent.location='{U_REGISTER}';"/>
                  <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}"/>
               </form>
            </div>
            <span class="genmed">{LOGIN_POPUP_MSG}</span>
         </td>
      </tr>
   </table>
</div>
<!-- END switch_login_popup -->

<a name="top"></a>
{JAVASCRIPT}

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
   <tr>
      <td class="bodyline">
         <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
               <!-- BEGIN switch_logo_left -->
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
               </td>
               <!-- END switch_logo_left -->
               <td align="center" width="100%" valign="middle">
                  <!-- BEGIN switch_logo_center -->
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
                  <br/>
                  <!-- END switch_logo_center -->
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br/>
                  <span class="gen">{SITE_DESCRIPTION}<br/>  </span>
               </td>
               <!-- BEGIN switch_logo_right -->
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
               </td>
               <!-- END switch_logo_right -->
            </tr>
         </table>

         <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
            <tr>
               <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
            </tr>
         </table>

         <div style="clear: both;"></div>

         <!-- BEGIN switch_ticker_new -->
         <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
               <tr>
                  <td align="left" class="row1">
                     <div id="fa_ticker_container">
                        <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                           <!-- BEGIN ticker_row -->
                           <li>{switch_ticker.ticker_row.ELEMENT}</li>
                           <!-- END ticker_row -->
                        </ul>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         <!-- END switch_ticker_new -->

         <!-- BEGIN switch_ticker -->
         <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
               <tr>
                  <td align="left" class="row1">
                     <div id="fa_ticker_container">
                        <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                           <div class="fa_ticker_content">
                              <!-- BEGIN ticker_row -->
                              <div>{switch_ticker.ticker_row.ELEMENT}</div>
                              <!-- END ticker_row -->
                           </div>
                        </div>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         <!-- END switch_ticker -->

         <div id="page-body">
            <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
               <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                  <tbody>
                     <tr>
                        <td valign="top" width="{C1SIZE}">
                           <div id="{ID_LEFT}">
                              <!-- BEGIN giefmod_index1 -->
                              {giefmod_index1.MODVAR}
                              <!-- BEGIN saut -->
                              <div style="height:{SPACE_ROW}px"></div>
                              <!-- END saut -->
                              <!-- END giefmod_index1 -->
                           </div>
                        </td>
                        <td valign="top" width="100%">
                           <!-- BEGIN html_validation -->
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>
</body>
</html>
<!-- END html_validation -->

Template viewtopic_body

Code:

<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>


<div class="d-flex navigation">
   <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>
   <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>
</div>
<!-- BEGIN topicpagination -->
<span class="gensmall">{PAGINATION}</span>

<!-- END topicpagination -->

<table style="text-align:center; width:100%;">{POLL_DISPLAY}</table>
<div class="listeMessages">

   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   {postrow.hidden.MESSAGE}

   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <div class="titreSujet">
       {TOPIC_TITLE}
   </div>
   <div class="d-flex message">
      <div>
         {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}
         <!-- 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="contenuMessage">
            {postrow.displayed.MESSAGE}
            <!-- 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>
         <div class="signature">
            <!-- BEGIN switch_signature -->
            {postrow.displayed.SIGNATURE}
            <!-- END switch_signature -->
            <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
         </div>
      </div>
      <div class="profil">
         <div class="avatarD">
            
            <div class="avatarImage">
               {postrow.displayed.POSTER_AVATAR}
               <div>
                  <!-- BEGIN profile_field -->
                  <p>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</p>
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </div>
            </div>
         </div>
         <div class="infosExterne">
            <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>
            <div class="infosDeplaces"></div>
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}<br />
         </div>
      </div>
   </div>
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <span class="genmed">{no_post.L_NO_POST}</span>

   <!-- END no_post -->
</div>
<!-- BEGIN topicpagination -->
<span class="gensmall">{PAGINATION}</span>

<!-- END topicpagination -->

<!-- BEGIN switch_forum_rules -->
<div class="d-flex rules">
   <div><img src="{RULE_IMG_URL}" alt="" />
   </div>
   <div>
      {RULE_MSG}
   </div>
</div>

<!-- END switch_forum_rules -->

<div class="basPage">
   <!-- BEGIN switch_user_logged_in -->
   <a name="quickreply"></a>
   {QUICK_REPLY_FORM}<br />
   <!-- END switch_user_logged_in -->
   
   <div class="permissions">
      <span class="gensmall">{L_TABS_PERMISSIONS}</span> - <span class="gensmall">{S_AUTH_LIST}</span><br />
   </div>
</div>

<div class="d-flex navigation">
   <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>
   <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>
</div>

<!-- 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>

Et enfin, le panneau d'accueil :
A installer dans une page HTML (PA > Modules > gestion des pages HTML > créer en mode avancé. Ici tu coches "non" et "non" :)

Code:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>Commande Galatée</title>

   <link href="https://fonts.googleapis.com/css?family=Playball&display=swap" rel="stylesheet" />

   <style>
      *{
         box-sizing: border-box;
      }
      body{
         width: 100%;
         margin: auto;
         color: #2E2E2E;
         height: 470px;
      }
      body a{
         color:#2E2E2E;
         font-family: 'Playball', cursive;
         text-decoration:none;
      }
      .d-flex{
         display: flex;
         justify-content: space-between;
      }
      .d-flex > div{
         width:33%;
      }
      #PA,
      #partenaires{
         width:100%;
         margin:0.5% auto;
      }
      .blocTitre{
         width:100%;
         font-family: 'Playball', cursive;
         font-size:16px;
         line-height: 25px;
         text-align: center;
         border:1px #000 solid;
         margin : 1% 0;
      }
      .blocTexteG,
      .blocTexteD{
         border:1px #000 solid;
         margin : 1% 0;
         text-align: justify;
         padding:5px;
      }
      .blocTexteG{
         height:200px;
         overflow:auto;
      }
      .blocTexteD{
         height:140px;
         overflow:auto;
      }
      .blocRonds{
         text-align: center;
      }
      .blocRonds a{
         margin:5px;
      }
      .blocRonds a,
      .blocRonds img{
         width:60px;
         height:60px;
         border-radius: 100px;
      }
      #blocRondsCentre{
         flex-wrap: wrap;
         justify-content: space-around;
      }
      #blocRondsCentre a{
         margin:5px;
         position:relative;
      }
      #blocRondsCentre a,
      #blocRondsCentre img{
         width:110px;
         height:110px;
         border-radius: 100px;
         transition-duration:1s;
      }
      #blocRondsCentre .Droite{
         align-self: flex-start;
      }
      #blocRondsCentre .Gauche{
         align-self: flex-end;
      }
      #blocRondsCentre p{
         opacity:0;
         position: absolute;
         top: 0;
         text-align: center;
         width: 100%;
         line-height: 110px;
         margin: 0;
         padding: 0;
         transition-duration:1s;
      }

      #blocRondsCentre a:hover img{
         opacity:0.1;
         transition-duration:1s;
      }
      #blocRondsCentre a:hover p{
         opacity:1;
         transition-duration:1s;
         
      }

   </style>
   
</head>
<body><div id="PA" class="d-flex">
   <div>
      <div class="blocTitre">
         Contexte
      </div>
      <div class="blocTexteG">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
      </div>
      <div class="blocTitre">
         Panneau d'affichage
      </div>
      <div class="blocTexteG">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
      </div>
   </div>
   <div id="blocRondsCentre" class="d-flex">
      <a class="Gauche" href="#">
         <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         <p>Nom du lien</p>
      </a>
      <a class="Droite" href="#">
         <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         <p>Nom du lien</p>
      </a>
      <a class="Gauche" href="#">
         <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         <p>Nom du lien</p>   
      </a>
      <a class="Droite" href="#">
         <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         <p>Nom du lien</p>
      </a>
      <a class="Gauche" href="#">
         <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         <p>Nom du lien</p>
      </a>
      <a class="Droite" href="#">
         <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         <p>Nom du lien</p>
      </a> 
   </div>
   <div>
      <div class="blocTitre">
         Staff
      </div>
      <div class="blocRonds">
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
      </div>
      <div class="blocTitre">
         Coeur à prendre
      </div>
      <div class="blocRonds">
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
      </div>
      <div class="blocTitre">
         Top Site
      </div>
      <div class="blocRonds">
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
         </a>
      </div>
      <div class="blocTitre">
         Horoscope
      </div>
      <div class="blocTexteD">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
      </div>
   </div>
</div><div class="blocTitre">
   Partenaires
</div><div id="partenaires" class="d-flex">
   <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
   <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
   <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
   <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
   <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
   <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
   <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
   <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
</div>
</body>

</html>

Après validation ça va te donner un lien, il faut le récupérer puis tu vas dans Affichage > généralité > et tu colles ceci en mettant l'url de ta page à toi :

Code:

<div align="center">
     <iframe align="middle" style="border:0; height: 600px; margin:auto; width: 100%;" scrolling="no" src="URL DE TA PAGE HTML" name="En-tête"> </iframe>
</div>

Et voilà !

Normalement, je n'ai rien oublié. Si jamais tu t'aperçois d'un manque, n'hésite pas à le dire :)

PS : je ne serai pas dispo ce soir, j'ai eu une dure journée et je vais devoir me coucher très tôt...Demain j'ai des RDV, donc je ne répondrai certainement pas avant demain après midi, voir soir.

Hello hello !

Whaaaaaaaaaaaaaa merci de tout coeur !

Hahaha et ne t'inquiète pas, j'avais d'ores et déjà prévu de faire mes sauvegardes avant, je suis née le jour de la St Prudence ( véridique XD).

Je n'ai pour l'instant pas tout regardé en détail, mais en survolant tes multiples messages, je me suis aperçue de deux choses qui me chiffonnent côté CSS.
Concernant les images de gauche, est-ce que ce n'était pas possible que tes codes aillent chercher les images que j'aurais enregistrées via la partie "général", "catégories et forums" ? Parce que, honnêtement, des forums, je vais en avoir des dizaines et des dizaines, sans parler de tous les sous-forums
Et toujours dans le CSS, la partie pour gérer les couleurs de groupes, c'est pour le QEEL ?

Bonsoir

Concernant les images de gauche, est-ce que ce n'était pas possible que tes codes aillent chercher les images que j'aurais enregistrées via la partie "général", "catégories et forums" ? Parce que, honnêtement, des forums, je vais en avoir des dizaines et des dizaines, sans parler de tous les sous-forums Codage complet pour LMS - Phpbb2 - Page 2 3234985998

Tu les mets à quel endroit ?

Et toujours dans le CSS, la partie pour gérer les couleurs de groupes, c'est pour le QEEL ?

Oui c'est pour les ronds du QEEL

Ici

Salut

Ca devrait être possible de le déplacer en js (pas autrement malheureusement) mais si tu en as beaucoup sur une page le js va être vraiment lourd...
Tu veux qu'on tente quand même ?

EDIT :
Pour le faire, tu peux remplace le Javascript concernant l'image de gauche par celui-ci :

Code:

$(function(){

  $('.description img').each(function() {
   var lienImg=$(this).attr("src");
   $(this).css('display','none');
   $(this).parents('.d-flex').find('.imageGauche img').attr('src', lienImg);
  });
});

Ensuite dans le template Index_Box tu peux remplacer ça :

Code:

<div class="imageGauche">

</div>

Par ça :

Code:

<div class="imageGauche">
                  <img src="https://www.zupimages.net/up/20/04/3vy6.png" alt="Image de description des forums." />
      </div>

Ici ça va mettre une image pas défaut quand tu n'en auras pas définie dans le panneau d'admin.

Et du coup dans la CSS tu peux retirer tout ça :

Code:

/* ----------- A mettre à jour et duppliquer selon ton nombre de forum :
0 = le premier, 1 = le deuxième, 2 = le troisième ... ---------*/

.forum[data-id-forum="forum-0"] .imageGauche {
  background:url('https://zupimages.net/up/20/04/3vy6.png');
}
.forum[data-id-forum="forum-1"] .imageGauche {
  background:url('https://zupimages.net/up/20/04/3vy6.png');
}

.forum.d-flex div.imageGauche{
  flex: 0 0 300px;
  background-size: cover;
  height:150px;
}

Et le remplacer par ça :

Code:

.forum.d-flex div.imageGauche{
   flex: 0 0 300px;
   height:150px;
}
.forum.d-flex div.imageGauche img{
   width:300px;
   height:150px;
}

T'es vraiment une déesse du codage tu sais ça ?

Je vais essayer de tout mettre en place dans les jours qui viennent, mais comme je suis une quiche, je garanti pas que ça se passera sans heurts

:D Merci pour les compliments, ça fait plaisir.

Ca marche, si tu as un souci n'hésite pas à le dire on regardera ensemble.

ALORS.

J'ai tryhardé (comme un chacal) (je précise) (paske pour moi le codage c'est l'Enfer de Dante avec, en plus, un piment antillais mal placé) pendant un bon quart d'heure pour tout installer, faire mes sauvegardes et tout le pouet.

Eh beh franchement, wahou
Y a pas à dire, ça a de la gueule

Par contre ch'uis réellement désolée mais j'vais encore avoir pas mal de travail pour toi..... Je vois pas mal de coquilles

J'vais t'mettre des captures d'écrans avec mes commentaires, ce sera plus simple :










J'ai essayé de mettre cette partie du CSS à jour (avec des images test), mais lesdites images n'apparaissent pas  


Ah, et le satané soulignement de liens est toujours là aussi  

Et est-ce que tu pourrais me dire/montrer oû est-ce que je vais pouvoir mettre les images de fonds de la PA et du QEEL ? Parce qu'étant une méga quiche of the dead, je sais pas où regarder XD

Pleins de bisous, et mille fois merci pour ton temps généreux et ton travail de qualité

Alors, je ne sais pas si je répondrai à tout ce soir, encore dure journée et mon bébé tape dans mon ventre pour que j'aille au lit

Pour les couleurs de fond dans la PA, il faut que dans la page HTML tu trouves ces parties :

Code:

.blocTexteG, .blocTexteD {
    border: 1px #000 solid;
margin: 1% 0;
text-align: justify;
padding: 5px;
}

et

Code:

.blocTitre {
    width: 100%;
    font-family: 'Playball', cursive;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    border: 1px
    #000 solid;
    margin: 1% 0;
}

Et que tu rajoutes aux deux endroits cette ligne avant le } :

Code:

background: #ffffff;

en remplaçant le ffffff par ton code couleur.

Pour ta scroll barre, il faut que tu ajoutes ceci à la CSS de la page HTML :

Code:

 /*SROLLBAR MODIF*/
::-webkit-scrollbar {
   width: 6px; /*largeur de la scrollbar verticale*/
   height: 6px; /*hauteur de la scrollbar horizontale*/
}
::-webkit-scrollbar-track {
background-color: #3D3C3C /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
   background-color:#C8CFE4 /*couleur de la barre*/;
   border-radius: 10px;
}
/*FIN SROLLBAR MODIF*/

Attention ici sur firefox tu n'as aucune scrollbarre personnalisée.

Le souci dans les descriptions c'est que tu as sûrement ta description de catégorie dans une div

Code:

<div align="justify"> </div>

Normalement si tu retires cette div ça se placera bien dans le code et j'ai fait pour que le texte soit déjà justifié ;)

Pour régler la largeur des "sous forum" en fait c'est parce que tu n'as pas de descriptions (et c'est ce qui cause 80% des soucis ici ;) ) , tu peux le régler en trouvant ceci dans ta CSS :

Code:

.description {
    height: 140px;
}

Et en le remplaçant par :

Code:

.description {
    height: 140px;
    width: 410px;
}

En faisant ces modifs sur la console, voilà ce que j'obtiens sur ton forum :
https://i.servimg.com/u/f86/19/47/12/29/captur20.png

Pour la 3ème capture là je n'ai pas du tout codé ça c'est encore un autre template qui ne faisait pas parti de la commande il me semble ;)
Pour les arrondis : tu peux ajouter ça dans ta CSS (si tu as déjà une .forumline ne le remet pas mais ajoute plutôt la ligne ;) ) :

Code:

.forumline {
    border-radius: 20px 20px 0 0;
}

Tes titres de colonnes y sont c'est juste que le texte est de la même couleur que le fond : tu les vois si tu surlignes
https://i.servimg.com/u/f86/19/47/12/29/titre_10.png

Pour les couleurs de fond dans le QEEL, il faut que tu rajoutes la ligne de background dans ces parties là :

Code:

#Online, #lastDay {
    border-right: 1px solid #000;
height: 200px;
}

Code:

.groupeDesc, .groupeName {
    border: 1px solid #000;
}

Code:

#birthday, #lastSubscribe, #stats, #stats div#border {
    border-left: 1px solid #000;
height: 133px;
}

Pour tes liens soulignés, je n'en voit aucun souligné moi, tu peux me dire lesquels posent souci ?

Pour les titres de catégories, tu mets quoi dans Général > Catégorie et forums > titre de catégorie ???
Pour rappel dans ce que je t'ai donné :

Ici, pour tes noms de catégorie, ça va se passer dans ton PA > Général > catégories et forums > et dans le titre tu dois mettre une div avec le nom de ta catégorie, par exemple :

Code:

    <div id="titre-cate5">Catégorie N°2</div>

Et est-ce que tu pourrais me dire/montrer oû est-ce que je vais pouvoir mettre les images de fonds de la PA et du QEEL ? Parce qu'étant une méga quiche of the dead, je sais pas où regarder XD

pour la PA, dans la page HTML remplace ça :

Code:

body {
    width: 100%;
    margin: auto;
    color:    #2E2E2E;
    height: 470px;
}

par ça :

Code:

body {
    width: 100%;
    margin: auto;
    color:    #2E2E2E;
    background: url('URL DE TON IMAGE DE FOND');
}

Et pour le QEEL : dans la CSS du forum remplace ceci :

Code:

#QEEL > .d-flex {
    align-items: center;
    border: 1px solid #000;
    margin: .5% auto;
    width: 100%;
}

Par ceci :

Code:

#QEEL > .d-flex {
    align-items: center;
    border: 1px solid #000;
    margin: .5% auto;
    width: 100%;
    background: url('URL DE TON IMAGE');
}

Fiou, j'vais dans mon lit A demain ;)

Tu code comme une déesse alors que t'es enceinte ?! Et t'es pas sur les rotules ?? Wahou !!!
Je te vénère
J'espère que tu as pu te reposer

Je vais regarder ça ce soir, merci d'avance

Je ne travaille pas, donc j'ai un peu de temps ;) Mais si je suis crevée, c'est pour ça que je ne code pas tous les jours :)

Ca mrche tiens moi au courant

Re-coucou !

Je reviens parce que j'ai vu que tu avais fait les modif' et je remarque quelque "couacs";

D'abord dans la PA, les ronds sont "cassés". Tu as touché au HTML ? J'ai l'impression que les "p" sont sorti des "a" du coup forcément ça bug ;) Mais je ne vois pas comment ce problème a pu arrivé :/

Pour les descriptions, elle ne prennent pas la hauteur de l'image de gauche. Pour régler le souci, tu peux changer ça :

Code:

.d-flex div.description p {
    height: 100px;
    margin: 0 0 5px;
    overflow: auto;
    padding: 0;
    text-align: justify;
}

par ça :

Code:

.d-flex div.description p {
    height: 130px;
    margin: 0 0 5px;
    overflow: auto;
    padding: 0;
    text-align: justify;
}

Dans le QEEL, je vois que le "nous avons" a ré apparu. C'était voulu ? Si non, tu peux me redonner ton template Index_body stp ?

Mäven.... Je vais ramper sur des braises brûlantes pour me faire pardonner.... J'ai encore tout cassé partout T_T. Quand je vous dis que le codage et moi ça fait vraiment pas 42 T_T.

J'ai effectivement tripoté le HTML. Le tout cassé est apparu quand j'ai ajouté les backgrounds opaques. Après ça j'ai essayé de faire la modification de la scrollbar, mais je suis presque sûre que je n'ai pas compris ton explication. Je me permet de te remettre le HTML en entier, tu comprendra probablement mieux que moi les bêtises que j'ai glissées ici et là T_T.

Code:

<meta charset="utf-8" />  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <title>Commande Galatée</title>    <link href="https://fonts.googleapis.com/css?family=Playball&display=swap" rel="stylesheet" />    <style>
      *{
        box-sizing: border-box;
      }
      body{
        width: 100%;
        margin: auto;
        color: #2E2E2E;
        height: 470px;
background: url('URL DE TON IMAGE DE FOND')
      }
      body a{
        color:#2E2E2E;
        font-family: 'Playball', cursive;
        text-decoration:none;
      }
      .d-flex{
        display: flex;
        justify-content: space-between;
      }
      .d-flex > div{
        width:33%;
      }
      #PA,
      #partenaires{
        width:100%;
        margin:0.5% auto;
      }
      .blocTitre{
        width:100%;
        font-family: 'Playball', cursive;
        font-size:16px;
        line-height: 25px;
        text-align: center;
        border:1px #000 solid;
        margin : 1% 0;
background: #ffffff;
      }
      .blocTexteG,
      .blocTexteD{
        border:1px #000 solid;
        margin : 1% 0;
        text-align: justify;
        padding:5px;
background: #ffffff;
      }
      .blocTexteG{
        height:200px;
        overflow:auto;
      }
      .blocTexteD{
        height:140px;
        overflow:auto;
      }
      .blocRonds{
        text-align: center;
      }
      .blocRonds a{
        margin:5px;
      }
      .blocRonds a,
      .blocRonds img{
        width:60px;
        height:60px;
        border-radius: 100px;
      }
      #blocRondsCentre{
        flex-wrap: wrap;
        justify-content: space-around;
      }
      #blocRondsCentre a{
        margin:5px;
        position:relative;
      }
      #blocRondsCentre a,
      #blocRondsCentre img{
        width:110px;
        height:110px;
        border-radius: 100px;
        transition-duration:1s;
      }
      #blocRondsCentre .Droite{
        align-self: flex-start;
      }
      #blocRondsCentre .Gauche{
        align-self: flex-end;
      }
      #blocRondsCentre p{
        opacity:0;
        position: absolute;
        top: 0;
        text-align: center;
        width: 100%;
        line-height: 110px;
        margin: 0;
        padding: 0;
        transition-duration:1s;
      }

      #blocRondsCentre a:hover img{
        opacity:0.1;
        transition-duration:1s;
      }
      #blocRondsCentre a:hover p{
        opacity:1;
        transition-duration:1s;
       
      }

  </style>   
<div id="PA" class="d-flex">
                      
   <div>
                             
      <div class="blocTitre">
                           Contexte               
      </div>
                             
      <div class="blocTexteG">
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.               
      </div>
                             
      <div class="blocTitre">
                           Panneau d'affichage               
      </div>
                             
      <div class="blocTexteG">
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.               
      </div>
                         
   </div>
                      
   <div id="blocRondsCentre" class="d-flex">
                    <a class="Gauche" href="#">        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>       
      <p style="">
                 Nom du lien       
      </p><a class="Gauche" href="#">      </a>      <a class="Droite" href="#">        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>       
      <p style="">
                 Nom du lien       
      </p><a class="Droite" href="#">      </a>      <a class="Gauche" href="#">        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>       
      <p style="">
                 Nom du lien       
      </p><a class="Gauche" href="#">        </a>      <a class="Droite" href="#">        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>       
      <p style="">
                 Nom du lien       
      </p><a class="Droite" href="#">      </a>      <a class="Gauche" href="#">        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>       
      <p style="">
                 Nom du lien       
      </p><a class="Gauche" href="#">      </a>      <a class="Droite" href="#">        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>       
      <p style="">
                 Nom du lien       
      </p><a class="Droite" href="#">      </a>           
   </div>
                      
   <div>
                             
      <div class="blocTitre">
                           Staff               
      </div>
                             
      <div class="blocRonds">
                           <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>             
      </div>
                             
      <div class="blocTitre">
                           Coeurs à prendre               
      </div>
                             
      <div class="blocRonds">
                           <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>             
      </div>
                             
      <div class="blocTitre">
                           Top Sites               
      </div>
                             
      <div class="blocRonds">
                           <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>        <a href="#">            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />        </a>             
      </div>
                             
      <div class="blocTitre">
                           Horoscope               
      </div>
                             
      <div class="blocTexteD">
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.               
      </div>
                         
   </div>
</div>
<div class="blocTitre">
               Partenaires         
</div>
<div id="partenaires" class="d-flex">
               <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
</div>
 /*SROLLBAR MODIF*/ ::-webkit-scrollbar {    width: 6px; /*largeur de la scrollbar verticale*/    height: 6px; /*hauteur de la scrollbar horizontale*/ } ::-webkit-scrollbar-track { background-color: #3D3C3C /*couleur du fond de la scrollbar*/} ::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/    background-color:#C8CFE4 /*couleur de la barre*/;    border-radius: 10px; } /*FIN SROLLBAR MODIF*/

Quant aux descriptions, tu as l’œil ! Moi je n'avais pas vu

Non, le "nous avons" n'était pas voulu. Je n'ai pas retouché au Template, donc je ne comprends pas ce que j'ai bien pu fiche. Heureusement que tu es là, ça non plus je ne l'avais pas vu <3

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->

<!-- BEGIN message_admin_titre -->

<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->

<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>

<!-- END message_admin_txt -->
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
        <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

            <table>
              <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                    <span class="gensmall">{L_AUTO_LOGIN}</span>
                  </td>
              </tr>

              <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
              </tr>
            </table>
        </td>

        <!-- BEGIN switch_social_login -->
        <td width="10%" align="center" valign="middle" class="row1">
            <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
        </td>
        <td width="40%" class="align_gauche row1">
            <div class="social_btn">
              <!-- BEGIN fb_connect -->
              <div class="fb-login-button"></div>
              <!-- END fb_connect -->
              <!-- BEGIN topicit_connect -->
              <div class="ti-connect"></div>
              <!-- END topicit_connect -->
            </div>
        </td>
        <!-- END switch_social_login -->

      </tr>
  </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td width="50%" valign="top">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_delete_cookies -->
        <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
        <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
        <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
            <!-- BEGIN switch_delete_cookies -->
            <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
            <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
        </span>
      </td>
  </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
        <td width="50%" valign="top" align="right" class="row1">

            <table>
              <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                    <span class="gensmall">{L_AUTO_LOGIN}</span>
                  </td>
              </tr>

              <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
              </tr>
            </table>
        </td>

        <!-- BEGIN switch_social_login -->
        <td width="10%" align="center" valign="middle" class="row1">
            <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
        </td>
        <td width="40%" class="align_gauche row1">
            <div class="social_btn">
              <!-- BEGIN fb_connect -->
              <div class="fb-login-button"></div>
              <!-- END fb_connect -->
              <!-- BEGIN topicit_connect -->
              <div class="ti-connect"></div>
              <!-- END topicit_connect -->
            </div>
        </td>
        <!-- END switch_social_login -->

      </tr>
  </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->

<div id="QEEL">
  <div id="titreQEEL">
      {L_WHO_IS_ONLINE}
  </div>
  <div class="d-flex">
      <div class="colonne225">
        <div id="Online">
            {TOTAL_USERS_ONLINE}<br /><br />
            {LOGGED_IN_USER_LIST}
            <script type="text/javascript">
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Il y a en tout/,'Vous pouvez croiser');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/utilisateurs en ligne :: /,'marcheurs, présents parmi nous en cet instant.<br />Il y a ');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/utilisateur en ligne :: /,'marcheur, présent parmi nous en cet instant.<br />Il y a ');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Enregistrés/,'bandits bien connus de nos services');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Enregistré/,'bandit bien connu de nos services');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Invisibles/,'fantômes errants');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Invisible/,'fantôme errant');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Invités/,'invités à la cour du roi.');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Invité/,'invité à la cour du roi.');
             
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Utilisateurs enregistrés/,'Les habitués de notre Taverne sont');
            </script>
           
        </div>
        <div id="lastDay">
            <table>{L_CONNECTED_MEMBERS}</table>
            <script type="text/javascript">document.getElementById("lastDay").innerHTML = document.getElementById("lastDay").innerHTML.
            replace(/Membres connectés au cours des/,'Ces joueurs ont foulé nos terres dans les');
        </script>
      </div>
  </div>
  <div class="colonne75">
      <p onMouseOver="javascript:change_onglet('1');" id="groupe1"> </p>
      <p onMouseOver="javascript:change_onglet('2');" id="groupe2"> </p>
      <p onMouseOver="javascript:change_onglet('3');" id="groupe3"> </p>
      <p onMouseOver="javascript:change_onglet('4');" id="groupe4"> </p>
      <p onMouseOver="javascript:change_onglet('5');" id="groupe5"> </p>
  </div>
  <div id="colonne300">
      <div id="imageCentrale">
        <img src="https://www.zupimages.net/up/19/48/43o9.png" alt="image" />
      </div>
      <div id="1">
        <div class="groupeName">
            Nom du groupe 1
        </div>
        <div class="groupeDesc">
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
        </div>
      </div>
      <div id="2">
        <div class="groupeName">
            Nom du groupe 2
        </div>
        <div class="groupeDesc">
            Description du groupe 2
        </div>
      </div>
      <div id="3">
        <div class="groupeName">
            Nom du groupe 3
        </div>
        <div class="groupeDesc">
            Description du groupe 3
        </div>
      </div>
      <div id="4">
        <div class="groupeName">
            Nom du groupe 4
        </div>
        <div class="groupeDesc">
            Description du groupe 4
        </div>
      </div>
      <div id="5">
        <div class="groupeName">
            Nom du groupe 5
        </div>
        <div class="groupeDesc">
            Description du groupe 5
        </div>
      </div>
      <div id="6">
        <div class="groupeName">
            Nom du groupe 6
        </div>
        <div class="groupeDesc">
            Description du groupe 6
        </div>
      </div>
      <div id="7">
        <div class="groupeName">
            Nom du groupe 7
        </div>
        <div class="groupeDesc">
            Description du groupe 7
        </div>
      </div>
      <div id="8">
        <div class="groupeName">
            Nom du groupe 8
        </div>
        <div class="groupeDesc">
            Description du groupe 8
        </div>
      </div>
      <div id="9">
        <div class="groupeName">
            Nom du groupe 9
        </div>
        <div class="groupeDesc">
            Description du groupe 9
        </div>
      </div>
      <div id="10">
        <div class="groupeName">
            Nom du groupe 10
        </div>
        <div class="groupeDesc">
            Description du groupe 10
        </div>
      </div>
  </div>
  <div class="colonne75">
      <p onMouseOver="javascript:change_onglet('6');" id="groupe6"> </p>
      <p onMouseOver="javascript:change_onglet('7');" id="groupe7"> </p>
      <p onMouseOver="javascript:change_onglet('8');" id="groupe8"> </p>
      <p onMouseOver="javascript:change_onglet('9');" id="groupe9"> </p>
      <p onMouseOver="javascript:change_onglet('10');" id="groupe10"> </p>
  </div>
  <div class="colonne225">
      <div id="lastSubscribe"> {NEWEST_USER}
        <script type="text/javascript">document.getElementById("lastSubscribe").innerHTML = document.getElementById("lastSubscribe").innerHTML.
        replace(/ L'utilisateur enregistré le plus récent est/,' Bienvenue à <br /> ');
      </script>
  </div>
  <div class="d-flex" id="stats">
      <div class="totalUser">
        {TOTAL_USERS}
        <script type="text/javascript">document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
        replace(/ Nous avons/,' ');
        document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
        replace(/ enregistrés/,' ');
        document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
        replace(/ enregistré/,' ');
      </script>
  </div>
  <div id="border">
  </div>
  <div class="totalPosts"> {TOTAL_POSTS}
      <script type="text/javascript">document.getElementsByClassName("totalPosts")[0].innerHTML = document.getElementsByClassName("totalPosts")[0].innerHTML.
      replace(/ Nos membres ont posté un total de/,' ');
  </script>
</div>
</div>
<div id="birthday">
  <table>
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}
  </table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
  document.getElementById(2).style.display = 'none';
  document.getElementById(3).style.display = 'none';
  document.getElementById(4).style.display = 'none';
  document.getElementById(5).style.display = 'none';
  document.getElementById(6).style.display = 'none';
  document.getElementById(7).style.display = 'none';
  document.getElementById(8).style.display = 'none';
  document.getElementById(9).style.display = 'none';
  document.getElementById(10).style.display = 'none';
  var anc_onglet=1;
  function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>

<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
  <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td> &nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
  </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

Merci encore de ta gentillesse et de ta patience <3

Coucou !

Alors, pour la page HTML effectivement il y a un gros soucis, il manque tout un tas de chose au début de la page :/
Voilà le code réparé avec la scroll + les couleurs de fond et l'image (il faudra que tu mettre l'image que tu veux ;) )

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Commande Galatée</title>

  <link href="https://fonts.googleapis.com/css?family=Playball&display=swap" rel="stylesheet" />

  <style>
      /*SROLLBAR MODIF*/
        ::-webkit-scrollbar {
          width: 6px; /*largeur de la scrollbar verticale*/
          height: 6px; /*hauteur de la scrollbar horizontale*/
        }
        ::-webkit-scrollbar-track {
        background-color: #3D3C3C /*couleur du fond de la scrollbar*/}
        ::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color:#C8CFE4 /*couleur de la barre*/;
          border-radius: 10px;
        }
   /*FIN SROLLBAR MODIF*/
      *{
        box-sizing: border-box;
      }
      body{
        width: 900px;
        margin: auto;
        color: #2E2E2E;
       background: url('URL DE TON IMAGE DE FOND');
      }
      body a{
        color:#2E2E2E;
        font-family: 'Playball', cursive;
        text-decoration:none;
      }
      .d-flex{
        display: flex;
        justify-content: space-between;
      }
      .d-flex > div{
        width:33%;
      }
      #PA,
      #partenaires{
        width:100%;
        margin:0.5% auto;
      }
      .blocTitre{
        width:100%;
        font-family: 'Playball', cursive;
        font-size:16px;
        line-height: 25px;
        text-align: center;
        border:1px #000 solid;
        margin : 1% 0;
    background: #ffffff;
      }
      .blocTexteG,
      .blocTexteD{
        border:1px #000 solid;
        margin : 1% 0;
        text-align: justify;
        padding:5px;
    background: #ffffff;
      }
      .blocTexteG{
        height:200px;
        overflow:auto;
      }
      .blocTexteD{
        height:140px;
        overflow:auto;
      }
      .blocRonds{
        text-align: center;
      }
      .blocRonds a{
        margin:5px;
      }
      .blocRonds a,
      .blocRonds img{
        width:60px;
        height:60px;
        border-radius: 100px;
      }
      #blocRondsCentre{
        flex-wrap: wrap;
        justify-content: space-around;
      }
      #blocRondsCentre a{
        margin:5px;
        position:relative;
      }
      #blocRondsCentre a,
      #blocRondsCentre img{
        width:110px;
        height:110px;
        border-radius: 100px;
        transition-duration:1s;
      }
      #blocRondsCentre .Droite{
        align-self: flex-start;
      }
      #blocRondsCentre .Gauche{
        align-self: flex-end;
      }
      #blocRondsCentre p{
        opacity:0;
        position: absolute;
        top: 0;
        text-align: center;
        width: 100%;
        line-height: 110px;
        margin: 0;
        padding: 0;
        transition-duration:1s;
      }

      #blocRondsCentre a:hover img{
        opacity:0.1;
        transition-duration:1s;
      }
      #blocRondsCentre a:hover p{
        opacity:1;
        transition-duration:1s;
       
      }

  </style>
 
</head>
<body><div id="PA" class="d-flex">
  <div>
      <div class="blocTitre">
        Contexte
      </div>
      <div class="blocTexteG">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
      </div>
      <div class="blocTitre">
        Panneau d'affichage
      </div>
      <div class="blocTexteG">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
      </div>
  </div>
  <div id="blocRondsCentre" class="d-flex">
      <a class="Gauche" href="#">
        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        <p>Nom du lien</p>
      </a>
      <a class="Droite" href="#">
        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        <p>Nom du lien</p>
      </a>
      <a class="Gauche" href="#">
        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        <p>Nom du lien</p> 
      </a>
      <a class="Droite" href="#">
        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        <p>Nom du lien</p>
      </a>
      <a class="Gauche" href="#">
        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        <p>Nom du lien</p>
      </a>
      <a class="Droite" href="#">
        <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        <p>Nom du lien</p>
      </a>
  </div>
  <div>
      <div class="blocTitre">
        Staff
      </div>
      <div class="blocRonds">
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
      </div>
      <div class="blocTitre">
        Coeur à prendre
      </div>
      <div class="blocRonds">
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
      </div>
      <div class="blocTitre">
        Top Site
      </div>
      <div class="blocRonds">
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
        <a href="#">
            <img src="https://zupimages.net/up/19/48/43o9.png" alt="image" />
        </a>
      </div>
      <div class="blocTitre">
        Horoscope
      </div>
      <div class="blocTexteD">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
      </div>
  </div>
</div><div class="blocTitre">
  Partenaires
</div><div id="partenaires" class="d-flex">
  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
  <a href="http://ohanart.forumactif.com/"><img src="https://i.imgur.com/vP49Dxu.png" /></a>
</div>
</body>

</html>

Pour le template index_body, je ne comprends pas trop du coup :/ Tu peux essayer de remettre ce code pour voir ?

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->

<!-- BEGIN message_admin_titre -->

<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->

<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>

<!-- END message_admin_txt -->
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
        <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

            <table>
              <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                    <span class="gensmall">{L_AUTO_LOGIN}</span>
                  </td>
              </tr>

              <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
              </tr>
            </table>
        </td>

        <!-- BEGIN switch_social_login -->
        <td width="10%" align="center" valign="middle" class="row1">
            <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
        </td>
        <td width="40%" class="align_gauche row1">
            <div class="social_btn">
              <!-- BEGIN fb_connect -->
              <div class="fb-login-button"></div>
              <!-- END fb_connect -->
              <!-- BEGIN topicit_connect -->
              <div class="ti-connect"></div>
              <!-- END topicit_connect -->
            </div>
        </td>
        <!-- END switch_social_login -->

      </tr>
  </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td width="50%" valign="top">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_delete_cookies -->
        <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
        <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
        <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
            <!-- BEGIN switch_delete_cookies -->
            <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
            <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
        </span>
      </td>
  </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
        <td width="50%" valign="top" align="right" class="row1">

            <table>
              <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                    <span class="gensmall">{L_AUTO_LOGIN}</span>
                  </td>
              </tr>

              <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
              </tr>
            </table>
        </td>

        <!-- BEGIN switch_social_login -->
        <td width="10%" align="center" valign="middle" class="row1">
            <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
        </td>
        <td width="40%" class="align_gauche row1">
            <div class="social_btn">
              <!-- BEGIN fb_connect -->
              <div class="fb-login-button"></div>
              <!-- END fb_connect -->
              <!-- BEGIN topicit_connect -->
              <div class="ti-connect"></div>
              <!-- END topicit_connect -->
            </div>
        </td>
        <!-- END switch_social_login -->

      </tr>
  </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->

<div id="QEEL">
  <div id="titreQEEL">
      {L_WHO_IS_ONLINE}
  </div>
  <div class="d-flex">
      <div class="colonne225">
        <div id="Online">
            {TOTAL_USERS_ONLINE}<br /><br />
            {LOGGED_IN_USER_LIST}
            <script type="text/javascript">
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Il y a en tout/,'Vous pouvez croiser');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/utilisateurs en ligne :: /,'marcheurs, présents parmi nous en cet instant.<br />Il y a ');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/utilisateur en ligne :: /,'marcheur, présent parmi nous en cet instant.<br />Il y a ');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Enregistrés/,'bandits bien connus de nos services');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Enregistré/,'bandit bien connu de nos services');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Invisibles/,'fantômes errants');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Invisible/,'fantôme errant');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Invités/,'invités à la cour du roi.');
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Invité/,'invité à la cour du roi.');
           
              document.getElementById("Online").innerHTML = document.getElementById("Online").innerHTML.
              replace(/Utilisateurs enregistrés/,'Les habitués de notre Taverne sont');
            </script>
         
        </div>
        <div id="lastDay">
            <table>{L_CONNECTED_MEMBERS}</table>
            <script type="text/javascript">document.getElementById("lastDay").innerHTML = document.getElementById("lastDay").innerHTML.
            replace(/Membres connectés au cours des/,'Ces joueurs ont foulé nos terres dans les');
        </script>
      </div>
  </div>
  <div class="colonne75">
      <p onMouseOver="javascript:change_onglet('1');" id="groupe1"> </p>
      <p onMouseOver="javascript:change_onglet('2');" id="groupe2"> </p>
      <p onMouseOver="javascript:change_onglet('3');" id="groupe3"> </p>
      <p onMouseOver="javascript:change_onglet('4');" id="groupe4"> </p>
      <p onMouseOver="javascript:change_onglet('5');" id="groupe5"> </p>
  </div>
  <div id="colonne300">
      <div id="imageCentrale">
        <img src="https://www.zupimages.net/up/19/48/43o9.png" alt="image" />
      </div>
      <div id="1">
        <div class="groupeName">
            Nom du groupe 1
        </div>
        <div class="groupeDesc">
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
        </div>
      </div>
      <div id="2">
        <div class="groupeName">
            Nom du groupe 2
        </div>
        <div class="groupeDesc">
            Description du groupe 2
        </div>
      </div>
      <div id="3">
        <div class="groupeName">
            Nom du groupe 3
        </div>
        <div class="groupeDesc">
            Description du groupe 3
        </div>
      </div>
      <div id="4">
        <div class="groupeName">
            Nom du groupe 4
        </div>
        <div class="groupeDesc">
            Description du groupe 4
        </div>
      </div>
      <div id="5">
        <div class="groupeName">
            Nom du groupe 5
        </div>
        <div class="groupeDesc">
            Description du groupe 5
        </div>
      </div>
      <div id="6">
        <div class="groupeName">
            Nom du groupe 6
        </div>
        <div class="groupeDesc">
            Description du groupe 6
        </div>
      </div>
      <div id="7">
        <div class="groupeName">
            Nom du groupe 7
        </div>
        <div class="groupeDesc">
            Description du groupe 7
        </div>
      </div>
      <div id="8">
        <div class="groupeName">
            Nom du groupe 8
        </div>
        <div class="groupeDesc">
            Description du groupe 8
        </div>
      </div>
      <div id="9">
        <div class="groupeName">
            Nom du groupe 9
        </div>
        <div class="groupeDesc">
            Description du groupe 9
        </div>
      </div>
      <div id="10">
        <div class="groupeName">
            Nom du groupe 10
        </div>
        <div class="groupeDesc">
            Description du groupe 10
        </div>
      </div>
  </div>
  <div class="colonne75">
      <p onMouseOver="javascript:change_onglet('6');" id="groupe6"> </p>
      <p onMouseOver="javascript:change_onglet('7');" id="groupe7"> </p>
      <p onMouseOver="javascript:change_onglet('8');" id="groupe8"> </p>
      <p onMouseOver="javascript:change_onglet('9');" id="groupe9"> </p>
      <p onMouseOver="javascript:change_onglet('10');" id="groupe10"> </p>
  </div>
  <div class="colonne225">
      <div id="lastSubscribe"> {NEWEST_USER}
        <script type="text/javascript">document.getElementById("lastSubscribe").innerHTML = document.getElementById("lastSubscribe").innerHTML.
        replace(/ L'utilisateur enregistré le plus récent est/,' Bienvenue à <br /> ');
      </script>
  </div>
  <div class="d-flex" id="stats">
      <div class="totalUser">
        {TOTAL_USERS}
        <script type="text/javascript">document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
        replace(/Nous avons/,' ');
        document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
        replace(/enregistrés/,' ');
        document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
        replace(/enregistré/,' ');
      </script>
  </div>
  <div id="border">
  </div>
  <div class="totalPosts"> {TOTAL_POSTS}
      <script type="text/javascript">document.getElementsByClassName("totalPosts")[0].innerHTML = document.getElementsByClassName("totalPosts")[0].innerHTML.
      replace(/ Nos membres ont posté un total de/,' ');
  </script>
</div>
</div>
<div id="birthday">
  <table>
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}
  </table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
  document.getElementById(2).style.display = 'none';
  document.getElementById(3).style.display = 'none';
  document.getElementById(4).style.display = 'none';
  document.getElementById(5).style.display = 'none';
  document.getElementById(6).style.display = 'none';
  document.getElementById(7).style.display = 'none';
  document.getElementById(8).style.display = 'none';
  document.getElementById(9).style.display = 'none';
  document.getElementById(10).style.display = 'none';
  var anc_onglet=1;
  function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>

<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
  <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td> &nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
  </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

Le reste me parait bon, je te laisse essayer ces modifs et me dire ?

Bijour très chère !

Bien reposée j'espère :3

J'ai réinstallé tout comme tu m'a dit, et à vue de nez, je dirais que tout est bon ^^

Merci beaucoup

Coucou !

Je suis épuisée physiquement et mentalement :/ Mais ça va, coder me change les idées :D

OK du coup, pour tout ça c'est fini ! :)

Pour ta liste de sujet (cette page par exemple https://les-mondes-sauvages.forumsrpg.com/f36-bestiaire-general ) : tu veux un codage aussi ou pas du coup ?
Là que tout le reste est fini, je veux bien m'y attaquer.

Hello :3

Tu es sûre ? Je veux pas t'épuiser à la tâche ^^

En fait.... C'est pas réellement un code que je voudrais, y a deux p'tites bidouilles que je voudrais modifier. Tu m'a déjà répondu pour le commentaire sur les titres de colonnes et les arrondis des coins, un grand merci d'ailleurs, je suis juste une banane aveugle    

Du coup il reste les deux autres commentaires, à savoir la double colonne moche et l'avatar placé au dessus et avec une taille de 85*140px.



Et après, promis je ne t'embêtes plus !
Mirki :3

Si je te le propose c'est que ça me gêne pas, t'inquiète.

Ton templates est déjà modifié de ce que je vois, tu peux me le donner que je parte de celui-ci directement ?

Il s'agit de topics_list_box

Merci ^^

Oui, j'ai suivi quelques tutos de FA pour essayer de le faire moi-même, mais y a ces deux petites choses que je n'ai pas réussies ^^'

Voici :

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
 var all_checked = true;
 for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
 }
 }
 document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
 for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
 }
 }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
 <th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_REPLIES} </th>
 <th align="center" nowrap="nowrap" width="150"> {topics_list_box.row.L_LASTPOST} </th>
 <!-- BEGIN multi_selection -->
 <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
 <!-- END multi_selection -->
 </tr>
 <!-- BEGIN pagination -->
 <tr>
 <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END pagination -->
 <!-- END header_table --><!-- BEGIN header_row -->
 <tr>
 <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
 </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 <tr>
 <!-- BEGIN single_selection -->
 <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
 <!-- END single_selection -->
 <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
 <!-- BEGIN icon -->
 <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
 <!-- END icon -->
 <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
 <div class="topictitle">
 {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
 <h2 class="topic-title">
 <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
 </h2>
 </div>

 <!-- BEGIN switch_description -->
 <span class="genmed">
 <br />
 {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
 </span>
 <!-- END switch_description -->
 <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
 <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
 </td>

 <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
 <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
 
 <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

            <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        </td>
<!-- BEGIN multi_selection -->
 <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
 <!-- END multi_selection -->
 </tr>
 <!-- END topic --><!-- BEGIN no_topics -->
 <tr>
 <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
 </tr>
 <!-- END no_topics --><!-- BEGIN bottom -->
 <tr>
 <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td> <span class="gensmall">{PAGINATION}</span></td>
 <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
 </tr>
 </table>
 </td>
 </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

EDIT 08.02.2020, 16:16:08 : J'aurais une question par rapport aux titres des colonnes, est-ce que ça t'embêtes ?

Alors alors, essaie avec ce template :

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
  var all_checked = true;
  for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
  }
  document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
  for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
  }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="2" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
      <th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_REPLIES} </th>
      <th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_AUTHOR} </th>
      <th align="center" nowrap="nowrap" width="150"> {topics_list_box.row.L_LASTPOST} </th>
      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
  <!-- END multi_selection -->
  </tr>
  <!-- BEGIN pagination -->
  <tr>
      <td class="row1" colspan="6" align="right"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END pagination -->
  <!-- END header_table --><!-- BEGIN header_row -->
  <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
  </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      <!-- BEGIN icon -->

      <!-- END icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
        <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
              <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
        </div>

        <!-- BEGIN switch_description -->
        <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </span>
        <!-- END switch_description -->
        <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
        <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

      <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
      <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
     
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div class="avatarLastPost">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</div>
            <!-- END avatar -->

            <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        </td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
  <!-- END multi_selection -->
  </tr>
  <!-- END topic --><!-- BEGIN no_topics -->
  <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
  </tr>
  <!-- END no_topics --><!-- BEGIN bottom -->
  <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td> <span class="gensmall">{PAGINATION}</span></td>
              <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
        </table>
      </td>
  </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Je me suis permis d'ajouter le titre de la colonne "auteur" ;)

Et dans la CSS de ton forum il faut ajouter :

Code:

.avatarLastPost img {
    width: 85px;
    height: 140px;


J'te laisse tester et me dire si c'est OK ? :)