Bonjour,

J'ai craqué pour une PA proposée ici, toutefois, sa largeur est petite par rapport à ce que j'aimerais, soit de 1000px... Ma question serait de savoir s'il est possible qu'on me la redimensionne ? (À savoir que je suis une quiche en code et que je ne veux pas non plus briser ni empiéter sur le travail d'un codeur...)

Il s'agit de cette PA : https://pisrale.forumactif.com/t1381-page-d-accueil-n6

Ce serait vraiment apprécié !
Merci

Coucouuuu

Excuse moi du temps d'attente, mes mails m'ont rien dit que tu avais posté, et je sis actuellement ultra occupé >Je préviens Arya pour cette PA, puisqu'elle en est la créatrice !
en espérant que tu repasses par là, encore désolé ^^'

Coucou
Mes excuses, je vais surveiller cette section (je n'avais pas fait attention)
Je vais m'en occuper, je me permets juste de te demander au niveau du staff, vous êtes 4 ou plus ? (si j'agrandis, je vais devoir agrandir les blocs pour pas que ça paraisse trop espacer
as-tu des exigences particulières en amont ?

merci à toi et désolée du temps d'attente

Bonjour !

Alors, ne vous inquiétez pas pour le délai, je comprend tout à fait !

Ensuite, j'imagine bien qu'il faudra redimensionner plusieurs éléments, c'est d'ailleurs ce que j'ai remarqué aussi en essayant de le faire moi-même haha

Pour ce qui est du Staff, pour le moment, je suis seule à bord puisque mon forum est un projet de ma part encore en création. Je compte recruter d'autres personnes lorsque mon projet sera prêt à s'ouvrir toutefois, mais en attendant... Cela peut rester ainsi !

Pour le reste, je n'ai pas de demande particulière, à moins que tu veuilles agencer les couleurs avec mon header... Mais je serai probablement capable de le faire par moi-même, donc si tu ne veux pas t'ajouter cette tâche, aucun soucis! Je laisse toutefois l'ébauche de mon header en spoiler au cas où ça te dirait

Header:

Vraiment, un grand merci à toi !

Coucou
Pas de soucis, est-ce que tu l'as déjà installé sur un forum ou un forum test que je puisse visualiser un peu mieux la taille de ton forum ? (si jamais tu peux mettre le lien en hide ce serait top)
pour les couleurs je te promets rien car j'ai moi-même une MAJ cette semaine à honorer mais je peux au moins te dire que j'aurais fini d'ici fin de semaine prochaine max la redimension
belle fin de journée

Heyaaa,

Oui aucun soucis, voilà le lien ! À noter que je commence à peine donc ça ressemble pas à grand chose encore hahaha



Sinon pas de trouble pour les couleurs, et encore moins pour le délai, vraiment, te mets pas la pression ! Je ne suis pas pressée. Merci pour tout en tout cas ! C'est vraiment apprécié

Coucouuu

J'ai pu avancer et je voulais savoir si le début de mes quelques arrangements te plaisaient :3
https://pisrale.forumactif.com/h20-pa-arya-uc-membres

Si c'est good pour toi je pense passer à 4 membres du mois ou trois et grossir un peu les cases :3
et le bas, je vais tenter d'espacer un peu plus et de te faire une zone infos pratiques pures et crédits :3 ou une une seule case pour infos/crédits qui sera sur toute la longeur

dis-moi ce que t'en penses :3

belle journée

Helloo !

C'est très bien ce que tu as fait déjà ! Si tu es encore dans les modifications, j'ai quelques petites demandes à te faire :3

Je pense utiliser les petites icônes en-dessous de la présentation du Staff pour les boutons de TOP-SITE. Serait-il possible d'indiquer qu'il s'agit des top-sites ? En regardant l'ensemble et pour se faire de la place, tu pourrais enlever le "Disponible" en-dessous du compte Fondateur, je le trouve superflu !

Ma seconde et dernière demande concernerait justement les membres à l'honneur ! Je l'utiliserais davantage pour mettre des prédéfinis en avant... Serait-il possible de garder les 5 cases, mais de les décaler sur 2 lignes ? Je sais pas comment l'expliquer clairement, mais imagine qu'il y en ait 3 en haut et 2 en bas... Elles ne seraient pas alignées. Je ne sais pas si c'est possible ? Sinon, tu peux faire comme tu as proposé et n'en mettre que 4 cases plus grandes !

J'aime bien avoir une section pour les crédits, mais peut-être moins large ? Dans le sens qu'elle prend beaucoup de place peut-être ? Je te laisse voir selon ce qui rend le mieux selon toi !

Je ne le dirais jamais assez, mais merciiii pour tout ça déjà !

BLOP

Mercii de ton retour, tu m'as donné des idées xD
Bref, j'ai fini je pense, dis-moi si ça te va ?
Si c'est good, et si tu n'es pas pressée, j'aimerai bien relire tout ça et l'arranger sur ce que je peux arranger :3
as-tu eu eu attendant le reste de ton design ? (sache que j'ai des catégories et un qeel assorti :3
Je ne l'ai pas encore mis là cependant car je n'ai pas encore eu le temps :3

à très vite

J'adore, vraiment !

Je veux bien voir pour les catégories et le QEEL ! J'en ai mis en place, mais ce n'est pas définitif, donc s'il s'accorde avec la PA que je trouve magnifique, c'est d'autant mieux !

Prends le temps dont tu as besoin, vraiment, il n'y a aucuuuuune pression

Un grand merci pour ton travail

De rien ça m'a fait plaisir
Alors toute la panoplie si je puis dire est installée sur ce forum :
Cela peut ne pas te plaire bien évidemment, mais jpeux l'adapter en 1000 comme la PA
belle journée

Allo!

Je suppose que tu as mis le lien en hide, mais comme je suis en invité, je ne peux pas le voir même si j'ai écrit sur le poste...

Si tu veux, nous pouvons échanger via Discord ! Je te laisse mon pseudo en hide

BLOP

ça va ?
Je te propose déjà d'installer ça sur ton forum (dans une iframe)

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fORUM PA</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<link href="https://fonts.gstatic.com" rel="preconnect" /><link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Amarante&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gupter&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" />
<style type="text/css">
a, a:link, a:hover {
text-decoration: none!important;
  color: #730701!important;}
 
  /*SCROLLBAR*/
::-webkit-scrollbar { /*taille dans les messages ou fiches */
height: 2px!important;
width: 4px!important;
background-color:#d6d5cc!important; /* couleur de fond */
}

html > ::-webkit-scrollbar {
width: 4px!important; /* largeur de la barre du forum */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,#9c9b92,#c5c4b5);!important; /* couleur de la barre qui se déplace */
border: 50px!important;
}

::-webkit-scrollbar-track-piece {
background-color:#d6d5cc!important; /* couleur de fond */
}
 
.blocpa{
background-color:#cbcac1;
height: 310px;
width: 1000px;
margin: auto;
overflow: hidden;
  font-size: 11px;
    font-family: verdana;}
 
.blocbienvenue{
background-color:#AFA79B;
height: 25px;
color: #dad6ca;
text-align: center;
font-family: 'Playfair Display', serif;
line-height: 25px;
font-size: 15px;
text-transform: uppercase;}
 
.ligne1PA{
margin: auto;
display: flex;
justify-content: space-around;}

.ligneinterne{
width: 480px;
padding: 5px;
display: flex;
justify-content: space-around;
flex-direction: column;
  position: relative;
left: -5px;}

.lienspa{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
width: 490px;
height: 30px;
line-height:30px;
color: #730701!important;
text-align: center;
text-transform: uppercase!important;
font-size: 12px!important;
text-decoration:none!important;
font-family: 'Gupter', serif;}
 
.ligneinterne1{
width: 492px;
padding-top: 5px;
display: flex;
justify-content: space-between;}
 
.contexte {
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
font-family:Verdana;
color: #84846c;
width: 240px;
height: 145px;
text-align: justify;
padding: 5px;
overflow: auto;
}

.titre {
color: white;
background: linear-gradient(90deg,#9c9b92,#c5c4b5);
font-family: 'Gupter', sans-serif!important;
padding: 1px;}

.news{
box-sizing:border-box;
height: 148px;
}

.newsimg {
display:inline-block;
overflow:hidden;
width: 220px;
height: 148px!important;
border: 5px solid #9C9B92;
object-fit:cover;
}

.newsimg div{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color:#E8E7DE;
box-sizing:border-box;
height:148px!important;
position:relative;
top:0;transition:.5s;
width:220px; 
font-family: verdana, sans-serif;
overflow: auto;
color:#84846c;
text-align: left;}

.newsimg:hover div{
top:-150px;
transition:.5s;
padding: 1px!important;
}
 
  .event{width:240px; 
font-family: verdana, sans-serif;
  height: 70px;
  background-color:#E8E7DE;
  text-align: justify;
padding: 5px;
  border: 1px solid #e6e6e2;
  overflow: auto;
color:#84846c;
  margin-bottom:5px;}
 
 
  .onglets_staff{padding-top:10px;}
 
  .onglets_staff img{
width:52px; height: 52px;text-align: center!important;object-fit:cover;
}

.contenu_ongletstaff {
background-color:#E8E7DE;
border: 1px solid #e6e6e2;
width:218px;
font-family: 'Gupter', serif;
overflow: hidden;
font-size: 11px;
color:grey;
  margin: auto;
text-align: center;
display: none;
  height: 50px;
}

 
.pseudo{color:#730701!important; font-family: 'Playfair Display', serif!important; font-size: 15px!important;}
 
  .fonction{color:#3a3939;font-family: 'Playfair Display', serif!important; font-size: 15px!important;}
 
.postesvacants{
text-align:center;padding-top:2px;}
 
.postesvacants img{
width: 35px;
height: 35px;
border: 2px solid #9C9B92;
  object-fit:cover;
}

  .col3ligne1 {
padding-top: 5px;text-align: center;
}
  .ligne2PA{
  padding: 5px;
display: flex;
justify-content: space-around;}

  .part1{width: 220px;
  height: 70px;text-align: center;position: relative;}
 
  .part1 a{font-size: 9px;
  text-transform: uppercase;}
 
  .infos{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
font-size : 11px; 
font-family: verdana;
color: #84846c;
width: 480px;
height: 60px;
text-align: justify;
padding: 5px;
overflow: auto; line-height: 11px;
      position: relative;left: -3px;}
  .blocpa select {
width: 220px;
height: 23px;
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
color: #84846c;
}
 
.quote-fiche-presinfos {
    color: #730701;
    display: inline;
    font-family: Lato, serif;
    font-size: 10px;
    font-weight: 500;
    margin-top: -10px;
    text-transform: uppercase;
} 
  .credits {
  background-color: #E8E7DE;
    border: 1px solid #e6e6e2;
    font-size: 11px;
    font-family: verdana;
    color: #84846c;
    width: 240px;
    height: 60px;
    text-align: justify;
    padding: 5px;
    overflow: auto;
    line-height: 11px;
    position: relative;
  left: 3px;}
 
</style>
</head>
    <body><div class="blocpa"><div class="blocbienvenue">Bienvenue sur Forum</div><div class="ligne1PA"><div class="ligneinterne"><div class="lienspa">
<a href="xx" target="_blank">Règlement</a> | <a href="xx" target="_blank">Bottin</a> | <a href="xx" target="_blank">Groupes</a> | <a href="x" target="_blank">Invités et Partenariats</a> | <a href="xx" target="_blank">Jeux</a>                                                                                                                                                                                                                                                                                           
</div><div class="ligneinterne1"><div class="contexte">
                                                                                                                                                                                                                                                                                              <span class="titre">CONTEXTE</span> écrire ici le contexte.                                                                                                                                                                                                                                                                                           
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
 <div class="news">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
 <div class="newsimg">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <img src="https://zupimages.net/up/21/04/vzbp.png" style="width:205px; height: 148px" />                                       
 <div>
                                    <span class="titre">07/01/2021</span> Naissance de l'idée.
                          <br />
                          <span class="titre">00/00/2021</span> Ouverture du Forum.                                                                                                                 
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
 </div>
  </div>
</div>
  <div class="col3ligne1">
                                                                                                                                     
 <div class="systeme_ongletsstaff">
                                                                                                                                                                                                   
 <div class="contenu_ongletsstaff">
                                               
 <div id="contenu_onglet_staff1" class="contenu_ongletstaff">
                        <span class="pseudo">Le Corbeau -</span> <span class="fonction">Fondateur</span> <br />DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>                                                       
 </div>
                                                                                           
 <div id="contenu_onglet_staff2" class="contenu_ongletstaff">
                        <span class="pseudo">Aelis Crawford -</span> <span class="fonction">Fondatrice</span> <br />DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>                                                       
 </div>
                                                                                                   
 <div id="contenu_onglet_staff3" class="contenu_ongletstaff">
                        <span class="pseudo">Katherina Browns -</span> <span class="fonction">Fondatrice</span> <br /> DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>                                                         
 </div>
                                                                                                   
 <div id="contenu_onglet_staff4" class="contenu_ongletstaff">
                        <span class="pseudo"> Karl Godwinson -</span> <span class="fonction">Fondateur</span> <br /> DISPONIBLE <br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>                                                       
 </div>
 
                                  <div class="onglets_staff">
        <span onclick="javascript:change_onglet('staff1');" id="onglet_staff1" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin410.png" /></span> <span onclick="javascript:change_onglet('staff2');" id="onglet_staff2" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin111.png" /></span> <span onclick="javascript:change_onglet('staff3');" id="onglet_staff3" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin210.png" /></span> <span onclick="javascript:change_onglet('staff4');" id="onglet_staff4" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin310.png" /></span>                                                   
 </div>
 </div>
                                                 
    </div><br/>
    <div class="blocbienvenue">Topsites</div>  <br/>                                                                                                                           
                    <div>
                   <a href="https://impedimenta.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/20/20/fbv9.png" /></a><a href="https://impedimenta.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/20/20/fbv9.png" /></a><a href="https://impedimenta.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/20/20/fbv9.png" /></a><a href="https://impedimenta.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/20/20/fbv9.png" /></a><a href="https://impedimenta.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/20/20/fbv9.png" />  </a>       
      </div>                                                                                         
 </div>
       
     
      <div class="col3ligne1">
       
        <div class="event">
          <span class="titre">EVENT</span> description de l'évent en cours
        </div>
        <div class="blocbienvenue">Recherchés</div>
             
        <div class="postesvacants">
          <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <br/>
        <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> </div>
                       
  </div>
</div><div class="ligne2PA">
 
  <div class="infos">
                                                                                                                                                                                                                                          <span class="titre">INFOS PRATIQUES</span> Il n'y a pas de minimum de ligne ☾ Votre Avatar doit être de                               
                              Il n'y a pas de minimum de ligne ☾ Votre Avatar doit être de                               
 <div class="quote-fiche-presinfos">
                              <strong>200 x 320</strong>                             
 </div>
                                ☾ Celui-ci n'est réservé qu'après votre fiche terminée ☾ Vous avez                               
 <div class="quote-fiche-presinfos">
                                <strong>3 JOURS</strong>                               
 </div>
                                pour poster votre fiche et                               
 <div class="quote-fiche-presinfos">
                              <strong>7 JOURS</strong>                             
 </div>
                                pour la finaliser ☾ Le forum est administré par XXXX ☾ Le design est de XX et le code de PA par Arya                                                                                                                                                                                                                                           
 </div>
      <div class="part1">
    <select onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">
TOP PARTENAIRES
</option>
<option value="http://lien_forum" target="_blank">
Nom Forum
</option>
<option value="http://lien_forum" target="_blank">
Nom Forum
</option>
</select>     
    <div>
      <a href="xxx" target="_blank">Nos partenaires</a> <span class="quote-fiche-presinfos">|</span> <a href="xx" target="_blank">Demandes</a>
        </div>
</div>
      <div class="credits"><span class="titre">CREDITS</span> .....
      </div>
      </div>
</div>
    <script type="text/javascript">
//<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        //<!--
                var anc_onglet = 'staff1';
                change_onglet(anc_onglet);
        //-->
        </script>
  </body>
</html>

De plus, voici les catégories que tu peux installer :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 
 <!-- END switch_user_logged_in -->

 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->

 <!-- END switch_user_logged_in -->

 </td>
 </tr>
</table>

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie1">
 <div class="titrecategorie">{catrow.tablehead.L_FORUM}</div>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
<span class="cattitle">
 <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
 </span>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
  <div class="blocForum">
 <!-- BEGIN inc -->
{catrow.forumrow.inc.INC_CLASS}<img src="{SPACER}" height="0" width="46" alt="." />
 <!-- END inc -->
 <div class="stats">{catrow.forumrow.TOPICS} Sujets | {catrow.forumrow.POSTS} Posts </div>
<div class="titreforum"><h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </span>
  </h{catrow.forumrow.LEVEL}></div>
  <div class="categoriedescription">{catrow.forumrow.FORUM_DESC}</div>
 
  <div class="listecategories">
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
    <script type="text/javascript">$('.listecategories').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>
 </div>

  <div class="avatarcate"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
 
 <div class="derniermessage">{catrow.forumrow.LAST_POST}
  <span class="AD_LastInfos">
 <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b>
  {catrow.forumrow.ads.DATE}
 {catrow.forumrow.ads.LOCATION}
  </span></div>
  <div class="imgcategorie">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
  </div><!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- BEGIN inc -->
  {catrow.catfoot.inc.INC_CLASS}<img src="{SPACER}" height="0" width="46" />
 <!-- END inc -->
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
 </div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


le css :

Code:

/*ARYA CATEGORIES*/

.categorie1{
background-color: #000000;
width: 750px!important;
margin: auto;
}

.blocForum{
position:relative;
height: 150px;
width: 100%;
background-color:#cbcac1;
}

.titrecategorie{
background-color :#AFA79B;
margin: auto;
width: 100%;
height: 25px;
}

.titrecategorie h2{
color: #dad6ca;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 15px;
font-weight: normal;
text-transform : uppercase;
line-height: 22px;
}

.categoriedescription{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
width: 425px!important;
height: 74px!important;
font-size: 11px;
color:#84846c;
font-family: Verdana;
position: absolute;
left: 84px;
top: 25px;
height: 10px;
padding: 5px;
text-align:justify;
}

.titreforum{
Position: absolute;
width: 400px;
left: 85px;
}

.titreforum a{
font-size: 16px!important;
font-family: 'Playfair Display', serif;
font-weight: normal;  cursive;
text-decoration: none!important;
color:#730701;
}

.lienssujets{
background-color:#E8E7DE;
border: 1px solid #e6e6e2;
height: 22px!important;
line-height: 22px;
text-align: normal;
color:#a5634d;
width: 509px!important;
position: absolute;
left: -75px;
top: 92px;
}

.lienssujets a{
font-family: 'Gupter', sans serif;
color: #730701;
font-size: 12px;
text-transform: uppercase;
font-weight: normal;
padding-left: 1px;
padding-right: 5px;
}

.derniermessage{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
position: absolute;
 height: 60px;
left: 526px;
top: 54px;
width: 196px;
height: 39px;
text-align: center;
font-family: 'Lato', sans-serif!important;
color: #504a3e!important;
font-size: 10px!important;
line-height: 13px;
padding: 8px;
}

.derniermessage a{
font-family: 'Gupter', serif!important;
font-size:13px!important;
text-align: center;
font-weight: normal;
color:grey!important;
}

.derniermessage strong{
font-family: 'Gupter', serif!important;
font-size: 12px!important;
text-align: center;
text-transform: uppercase!important;
}

.stats{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
position: absolute;
width: 212px;
font-family: 'Playfair Display', serif;
text-align : center;
color :#84846c!important;
font-size: 13px;
line-height: 20px;
left: 526px;
top: 25px;
}

.imgcategorie{
width: 208px!important;
position: absolute;
height: 18px!important;
border: 3px solid #e6e6e2;
left: 526px;
height: 18px;
top: 118px;
}

.avatarcate{
position: absolute;
top: 5px;
left: 10px;
}

.avatarcate img{
height: 100px;
width: 62px;
border-radius: 0px;
border: 3px solid #e8e7de
}

et le qeel :

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="" width="97%" border="0" cellspacing="1" cellpadding="0"style="margin-left:auto;margin-right:auto;">
  <!-- BEGIN message_admin_titre -->
  <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
  </tr>
  <!-- END message_admin_titre -->
  <!-- BEGIN message_admin_txt -->
  <tr>
      <td class="" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
  </tr>
  <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="97%" 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">
       
       
      </td>
      <td width="50%" align="right">
        <span class="gensmall">
           
            <!-- BEGIN switch_on_index -->
           
            <!-- 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="97%" 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 class="qeel">
  <div class="titreQeel">
        Qui est en ligne ?
      </div>
 
<div class="ligneqeel">
<div class="colone1qeel">
  <div class="lesgroupes">
<span class="titre1">LES GROUPES</span>
<div>{GROUP_LEGEND}</div>
</div>
  <br/>
    <div class="nouveaumembre">
  <span id="avatar_dernier_membre"></span>
        <span id="dernier_membre">{NEWEST_USER}</span>
    </div>
</div>
  <div class="colone1qeel">
    <div class="derniersmembresco">
<img src="https://i.servimg.com/u/f89/20/20/82/41/imageq11.png"/>
<div class="derniersmembrescoOverlay">
<table id="connmembers">{L_CONNECTED_MEMBERS}</table>
</div>
</div>
  </div>
<div class="colone1qeel">
<div class="statsqeel">
  <span id="membres">{TOTAL_POSTS} | {TOTAL_USERS}</span>
</div>       
<div class="membresco">
  <span id="loggedlist">{LOGGED_IN_USER_LIST}</span>
</div>
<div class="infosqeel">
  <span id="infosqeel">{TOTAL_USERS_ONLINE}</span>
  </div>
  <div class="creditqeel">
    Forum administré par AELS., BLACKSHEEP et CATBLACK. Copie totale ou partielle prohibée. 2020
  </div>
</div> 

       
</div>
</div>
<!-- END disable_viewonline -->
<script type="text/javascript">$('.lesgroupes').each(function() {
    $(this).html($(this).html().replace(/\[/g,""));
});
$('.lesgroupes').each(function() {
    $(this).html($(this).html().replace(/\]/g,"|"));
});

    /* nouveau membre */
    document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"BIENVENUE A STRATFORD");
 /* membres connectés au cours des 24 dernières heures */
    document.getElementById('connmembers').innerHTML=document.getElementById('connmembers').innerHTML.replace(/Membres connectés au cours des [0-9]* dernières heures :/,"Membres connectés il y a 24h :");
    document.getElementById('membres').innerHTML=document.getElementById('membres').innerHTML.replace(/Nos membres ont posté un total de/," ");
      document.getElementById('membres').innerHTML=document.getElementById('membres').innerHTML.replace(/membre(s?) enregistré(s?)/,"Inscrits");
      document.getElementById('membres').innerHTML=document.getElementById('membres').innerHTML.replace(/Nous avons/," ");
      /* membres en ligne */
    document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés :/," ");

    document.getElementById('infosqeel').innerHTML=document.getElementById('infosqeel').innerHTML.replace(/utilisateur(s?) en ligne/,"Ame$1 vagabonde$1");
      document.getElementById('infosqeel').innerHTML=document.getElementById('infosqeel').innerHTML.replace(/Il y a en tout/," ");

</script>
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="2" 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}

css :

Code:

/*DEBUT QEEL*/

.qeel{
width:750px;
height:200px;
background: #cbcac1;
color:#84846c;
font-size:12px;
font-family: 'Gupter', serif;
margin:auto;
text-align: center;}

.titreQeel {
background: #AFA79B;
color: #dad6ca;
font-family: 'Playfair Display', serif;
font-size: 15px;
line-height: 25px;
text-transform: uppercase;
}

.ligneqeel{
display: flex;
max-width: 750px;
height: auto;
justify-content: space-around;}

.colone1qeel{display:flex;flex-direction:column;min-width: 250px;max-width:250px;}

.lesgroupes {    background: #e8e7de;
    border: 1px solid #e8e7de;
    height: 50px;
    Max-width: 228px;
  Min-width:228px;
    padding: 5px;
    text-transform: uppercase;
    margin: 5px;margin-top: 6px;
margin-left: 10px;}

.lesgroupes div{
    overflow: hidden;
    margin: 5px;
    height: auto;
    width: 210px!important;
    overflow-wrap: break-word;      margin-left: 10px!important;  padding-top: 5px;}

#avatar_dernier_membre img{
width:56px;
height:56px;
object-fit: cover;
border: solid 2px #9C9B92;
}

.nouveaumembre{
background: #e8e7de;
    border: 1px solid #e8e7de;
    color: #653c00;
    display: flex;
    font-family: 'Playfair Display', serif;
    height: 60px;
    text-align: center;
    width: 208px;
    margin: 5px;
    margin-left: 10px;
    padding: 15px;    margin-top: -12px!important;
}

#dernier_membre{
font-family:Verdana;
display:block;
color:#8F8E8E;
font-size:12px;
margin-top: -5px!important;
  text-transform: uppercase; padding: 10px;margin: auto;width: 120px;
}

#dernier_membre a {
font-weight:bold;
text-transform: uppercase;
  font-size: 12px;
  font-family: 'Playfair Display', serif;
}

.derniersmembresco {
    overflow: hidden;
    position: relative;
    width: 209px;
    height: 151px;
  margin: auto;
    margin-top: 6px;border: 5px solid #9C9B92;
}

.derniersmembresco img {
  width: 209px;
    height: 151px;
}


.derniersmembrescoOverlay {
    position: absolute;
    transition: 0.3s ease-out;
    opacity: 0;font-family: 'Gupter', serif;
    top: 0; text-transform: uppercase;
  width: 209px;    display: flex;
    height: 151px;
    background-color: #E8E7DE!important;
    color: #D1D1D1;
    overflow:auto;text-align: justify;
}
.derniersmembrescoOverlay td.row1 {background-color: #E8E7DE!important;}

.derniersmembresco:hover > .derniersmembrescoOverlay {
    opacity: 1;
    left: 0;
}

#connmembers A {
    DISPLAY: inline-block;
    FONT-SIZE: 11PX;
font-family: 'Gupter', serif;
}

.statsqeel{background: #e8e7de;
    border: 1px solid #e8e7de;
    font-size: 15px;
        margin-top: 5px;
    margin-left: -2px;
    max-width: 230px;
    min-width: 230px;
    padding: 5px;}

.membresco{background: #e8e7de;
    border: 1px solid #e8e7de;
    font-size: 15px;
    margin-left: -2px;margin-top: 5px;
    max-width: 230px;
    min-width: 230px;
  max-height: 30px;
  min-height: 30px; overflow: auto;text-align: justify;
  padding: 5px;}

.membresco a{
    FONT-SIZE: 13PX;
font-family: 'Gupter', serif;}

.infosqeel{
    font-size: 12px;
    margin-left: -2px;
    max-width: 230px;
    min-width: 230px;
    padding: 5px; text-transform: uppercase;
    text-align: center;}

.creditqeel{background: #e8e7de;
    border: 1px solid #e8e7de;margin-top: -4px;
    max-width: 230px;height: 39px;
  min-width: 230px;
    overflow: auto;
    padding: 5px;font-family:Verdana;
    text-align: justify;}

Je passerai sur discord sûrement pour te demander les accès pour modifier directement dessus, ce sera plus simple :3 en cas de soucis tu me BIP sur discord
belle soirée

Coucou
Suite à ton message sur discord, je considère que tout est ok
Hésite pas au besoin