Commande thème complet

Rappel du premier message :

Bonsoiiir **

OMG je suis tellement heureuse de voir que tes commandes sont ouvertes, je suis passée hier, j'étais désespérée de voir ces commandes fermées mais là ma semaine est refaite !    

J'espère que tu vas bien ! Du coup je profites de ce moment pour te passer une assez grosse commande. Je tiens à précisé que le forum est encore en construction mais les 3/4 des choses sont prêtes, il manque quelques détails ainsi que le codage. :)

Commande de codage

Élément à coder : NAVIGATION, PA, CATEGORIE, QEEL, , MESSAGE ET PROFIL, PROFIL
Adresse du forum : https://shadowoflegacy.forumactif.com/
Version du forum : phpBB2

Décrire un peu le code souhaité, son apparence, ses couleurs, etc.
Schéma : https://cdn.discordapp.com/attachments/637355992098668560/637390363090223108/Accueil.png
https://media.discordapp.net/attachments/444808777288515584/637341267579371551/Categorie.png?width=432&height=408
https://cdn.discordapp.com/attachments/637355992098668560/637357873491476501/QEEL.png
https://cdn.discordapp.com/attachments/637355992098668560/637585256995618827/Message--Profil.png
https://cdn.discordapp.com/attachments/637355992098668560/637591110549766145/Affichage-sujet.png
https://cdn.discordapp.com/attachments/637355992098668560/637704569027166229/Profil.png

Taille des éléments : La taille du forum doit être de 800px après je ne sais pas vraiment au niveau du reste c'est plus de la proportion, si tu as besoins de plus d'indications n'hésites pas . :)

Ressources :POLICE : https://www.dafont.com/fr/high-tide.font et Arial

COULEUR : #D4C8C8; #E3E3DC ; #e8e1e1

IMAGE pour le staff :
https://66.media.tumblr.com/c42e179e0db819502a9a21e2d4bf6d48/tumblr_pkyr3ojyq71xjjyzao3_250.png
https://i.pinimg.com/236x/22/53/69/2253692cb671a089490f003798658a0f.jpg
https://66.media.tumblr.com/30f6e89adc042e14b0ed69b594d69c9a/tumblr_pkfg9u2lg71vc8ncjo1_250.png



Autres précisions : NAVIGATION & PAGE D'ACCUEIL :
Pour la Pa serait-il possible de mettre une barre de défilement pour nos top partenaires afin de pouvoir accueillir plus de top ?
En cliquant sur les images sur staff cela dévoile le nom avec les dc la présence ainsi que le lien vers le profil et les mps.  

CATEGORIE :
Il faudrait juste que les sous-groupes ne soient pas trop gros pour que lorsque nous avons des sous-groupes assez long cela ne déforme pas tout.

PROFIL ET MESSAGE :
Profil avec possibilité de mettre le rang Fondatrice et en dessous le rang du personnage.
Possibilité de forcer la largeur du forum même lorsqu'il y a une grande image ?




Merci d'avance et à bientôt

Ravi que ça te plaise ! Ça prend peu à peu forme mais je préfère faire l'installation au fur et à mesure comme ça, ça fait moins de bugs à corriger en même temps xD

La barre en dessous du titre des forums dans les catégories qui est décalé

Comme je l'ai dit plus haut :

N'oublie pas de cocher "non" à "Optimiser votre CSS" dans les options en dessous.

Le "En Ligne" dans le profil des messages qui s'affiche également pour les utilisateurs qui ne sont pas en ligne

En effet, petit oubli de ma part. Dans ton CSS, ajoute le code suivant :

Code:

.post-profile-online:empty {
    display: none;
}

Pour ce qui est des gifs dans le profil et le message je n'ai pas trouvé comment les redimensionner, tu m'avais dis il me semble que c'était une commande dans le panneau admin mais je n'ai rien trouvé (que ce soit au niveau du profil ou du message). Il faudrait juste qu'on puisse pouvoir forcer à rester dans la largeur du message et du profil sans déformer la page/dépassé du cadre.

Je n'ai pas géré la taille des gifs du profil, donc à ajouter dans ton CSS :

Code:

.post-profile-infos img {
    max-width: 100%;
}

Pour les images dans les messages, c'est dans ton panneau d'administration > Général > Messages et emails > Configuration. Dans le bloc message il y a un champ "Redimensionnement des images :" où tu peux indiquer une largeur maximale pour ton image. (pour le forum test j'ai mis 550)

Dans le QEEL également dans la partie des derniers connecté 24h cela est écrit deux fois : ils étaient à MF il y a 24h (en plus des 48h marqué au dessus). Je te laisse également jeter un coup d’œil ce sera surement plus claire. x)

C'est que dans ton schéma, il est marqué 48 heures alors j'ai réglé le code pour cette durée. Dans ton panneau d'affichage > Affichage > Page d'accueil > Généralités, dans le bloc "Général", à "Durée de la période en heures :" j'ai rentré "48".
Tu peux sinon dans le template index_body retrouver cette ligne-là :

Code:

document.getElementById('last-online').innerHTML = document.getElementById('last-online').innerHTML.replace(/Membres connectés au cours des 48 dernières heures : /, "");

et remplacer "48" par "24".

Et pour finir la barre de navigation, alors ca buggait déjà avant d'installer les codes mais je croyais qu'il s'agissait de notre ancien code, mais ca ne change rien même avec le tiens. J'ai cherché, je n'ai pas trouvé la source du problème. Sur le fofo original cela fonctionne pourtant. Ici on a juste la barre sans les liens de la navig (à savoir que j'ai supp l'ancien code en remplaçant par tous les tiens). Après peut-être que quand on le mettra sur le fofo original ca buggera pas et c'est le principal. Après si t'as une explication je suis preneuse !

Par hasard, dans ton panneau d'admin > Affichage > Page d'accueil > En-tête et navigation, aurais-tu coché "oui" à "N'afficher que des images dans la barre de navigation :" ?

Si c'est bon pour toi après ces corrections, je te file les codes restants !

Ahhhh merci tu es trop fort(e) ! Tu as tout juste !
Du coup, tout est corrigé, merci beaucoup!

Enfin il manque seulement pour le qeel je crois qu'on c'est pas bien compris. Je ne parle par du nombre d'heure mais du fait que cela soit marqué deux fois. Je te montre une image ce sera surement plus simple pour expliquer :



Sinon tout est parfait c'est bon.

Je m'excuse pour le double post !
Je viens juste de voir qu'il n'y a pas la scrollbar dans le profil

Je te remets le lien si tu veux voir :
http://sostest.forumactif.com/t2-ceci-est-un-test

Est-ce possible d'en rajouter une ?
merci encore !

Pretty Girl a écrit:Enfin il manque seulement pour le qeel je crois qu'on c'est pas bien compris. Je ne parle par du nombre d'heure mais du fait que cela soit marqué deux fois. Je te montre une image ce sera surement plus simple pour expliquer :

Justement. Ça s'affiche deux fois parce que les heures ne correspondent pas.

Je viens juste de voir qu'il n'y a pas la scrollbar dans le profil

A ajouter dans ton CSS :

Code:

.post-profile-infos {
    height: XXpx;
    overflow: auto;
}

Remplace XXpx par la valeur que tu souhaites !

Ahh pardon c'est moi qui avais rien compris. x)

Du coup c'est tout bon ! J'ai tout bien modifié !
Super pour la scrollbar !

Je pense qu'on est bon maintenant.

Bonsoir, :)

Je viens aux nouvelles concernant les derniers codes. Cela fait un moment que nous attendons de faire la maintenance nous aimerions si possible avoir un délai. Savoir si on doit attendre les codes ou si on doit faire sans.

Je me doute que tu sois très occupé et je respecte totalement ça. Je ne veux pas te mettre la pression mais ça nous freine beaucoup (depuis novembre) nous n’avons pas osé faire de maintenance étant dans l’attente des codes.

Si ils ne sont pas prêt on comprendra mais juste nous donner une marge ou une petite nouvelle sur le sujet qu’on sache quoi faire de notre côté.

Merci de ta compréhension.

Up

Hello !
Encore désolé pour l'attente, c'est impardonnable u.u

Je crois que je n'ai pas fourni la PA :

Code:

<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<style>
  body {
  margin: 0;
  }
  * {
  box-sizing: border-box;
  }
  a {
  text-decoration: none;
  }
  .pa {
     background-color: #ad9ec4;
  display: flex;
  flex-wrap: wrap;
  font-family: Arial, sans-serif;
  font-size: 14px;
  width: 800px;
  }
  .pa-title {
  border-bottom: 2px solid;
  color: #433558;
  font-family: 'Dancing Script', cursive;
      margin: 20px 30px;
  padding-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  }
  .pa-links {
  background-color: #9e8dba;
  display: flex;
  justify-content: space-between;
  margin: 0 50px 10px;
  padding: 10px 30px;
  width: 100%;
  }
  .pa-links a {
  color: #221c2e;
  font-style: italic;
  font-weight: bold;
  }
  .pa-context {
  background-color: #9e8dba;
  color: #241d2f;
  flex: 1;
  font-size: 0.9em;
  margin-left: 30px;
  overflow: auto;
  padding: 10px;

  }
  .pa-middle {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
  width: calc(80px * 3 + 10px);
  }
  .pa-staff {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
  .pa-staff-item {
    border: 1px solid #000;
  cursor: pointer;
    height: 80px;
    width: 80px;
}
  .pa-staff-item.active {
    border: 1px solid red;

}
  .pa-staff-content {
   
    height: 100px;
    margin-top: 5px;
  position: relative;
    width: 100%;
}
  .pa-staff-content-item {
  align-items: center;
  background-color: #241d2f;
  display: flex;
  flex-direction: column;
      height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%;
  }
  .pa-staff-content-item.active {
 opacity: 1;
  visibility: visible;
  }
  .pa-staff-content-item h3 {
      color: #b2a5c8;
  font-family: 'Dancing Script', cursive;
  font-size: 1.6em;
  margin: 0;
  }
  .pa-staff-content-item b {
  color: #ad9ec4;
  font-size: 0.9em;
  }
  .pa-staff-content-item div {
    color: #70b84d;
font-size: 0.9em;
  }
  .pa-links-middle {
  display: flex;
  height: 30px;
  justify-content: space-between;
  margin: 10px 0;
  }
  .pa-links-middle a {
  align-items: center;
  background-color: #9e8dba;
  color: #221c2e;
  display: flex;
  flex: 1;
  font-size: 0.6em;
      justify-content: center;
  margin-right: 5px;

  text-transform: uppercase;
  }
  .pa-links-middle a:last-child {
  margin: 0;
  }
  .pa-top {
    background-color: #9e8dba;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}
  .pa-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-right: 30px;
  }
  .pa-pv {
  background-color: #9e8dba;
  display: grid;
  grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
 
    justify-items: center;
  margin-bottom: 10px;
  padding: 10px;
  }
  .pa-news {
  background-color: #9e8dba;
  color: #241d2f;
  flex: 1;
  font-size: 0.9em;
  font-style: italic;
  overflow: auto;
  padding: 10px;
  }
 
  .pa-partners {
  display: flex;
  height: 30px;
  justify-content: space-around;
  margin: 10px 0;
  overflow: auto;
  width: 100%;
  }
  .pa-partners a {
  align-items: center;
  background-color: #000;
  border-radius: 2em;
  color: #ad9ec4;
      display: flex;
    font-size: 0.8em;
  font-style: italic;
  margin-right: 10px;
  padding: 0 10px;
  }
  .pa-partners a:last-child {
  margin-right: 0;
  }
 
</style><div class="pa">
  <h2 class="pa-title">Titre du forum</h2>
  <div class="pa-links">
    <a href="" target="_blank">Lien</a>
    +
    <a href="" target="_blank">Lien</a>
    +
    <a href="" target="_blank">Lien</a>
    +
    <a href="" target="_blank">Lien</a>
    +
    <a href="" target="_blank">Lien</a>
    +
    <a href="" target="_blank">Lien</a>
  </div>
  <div class="pa-context">
    contexte
  </div>
  <div class="pa-middle">
    <div class="pa-staff">
      <div class="pa-staff-item active" data-id="1">
      </div>
      <div class="pa-staff-item" data-id="2">
      </div>
      <div class="pa-staff-item" data-id="3">
      </div>
      <div class="pa-staff-content">
        <div class="pa-staff-content-item active" id="1">
          <h3>Pseudo + DC</h3>
          <b>Profil + MP</b>
          <div>Présente</div>
        </div>
        <div class="pa-staff-content-item" id="2">
          <h3>Pseudo + DC 2</h3>
          <b>Profil + MP</b>
          <div>Présente</div>
        </div>
        <div class="pa-staff-content-item" id="3">
          <h3>Pseudo + DC 3</h3>
          <b>Profil + MP</b>
          <div>Présente</div>
        </div>
      </div>
    </div>
    <div class="pa-links-middle">
      <a href="" target="_blank">événement</a>
      <a href="" target="_blank">chronologie</a>
      <a href="" target="_blank">à tous</a>
    </div>
    <div class="pa-top">
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/70" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/70" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/70" />
      </a>
    </div>
  </div>
  <div class="pa-right">
    <div class="pa-pv">
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
     
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
     
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
      <a href="" target="_blank">
        <img src="https://via.placeholder.com/40" />
      </a>
    </div>
    <div class="pa-news">
      <div><b>10.11.19</b> Lorem ipsum</div>
    </div>
  </div>
  <div class="pa-partners">
    <a href="" target="_blank">Partenaire</a>
  </div>
</div>
  <script>
    let staffTabs = document.querySelectorAll('.pa-staff-item');
    let staffTabContent = document.querySelectorAll('.pa-staff-content-item');
    staffTabs.forEach(function(e) {
       e.onclick = ()  => {
          staffTabs.forEach((el) => { el.classList.remove('active'); });
          e.classList.add('active');
          staffTabContent.forEach((el) => {
             el.classList.remove('active');
             if (parseInt(el.id) === parseInt(e.getAttribute('data-id'))) {
                el.classList.add('active');
             }
          });
       }
    });
  </script>

Et le profil
Dans ton PA, le template profile_view_body

Code:

<div class="profile">
  <h1 class="profile-name">{L_VIEWING_PROFILE}</h1>
  <div class="profile-links">
  <!-- BEGIN profile_field -->
    <!-- BEGIN profil_type_user_posts -->
    <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
    <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a>
    <!-- END profil_type_user_posts --><!-- END profile_field -->
  </div>
  <div class="profile-status">
    <!-- BEGIN switch_show_status -->
    {USER_ONLINE}
    <!-- END switch_show_status --> |
    {LAST_VISIT_TIME}
  </div>
  <div class="profile-infos">
    <!-- BEGIN profile_field -->
    <div class="profile-infos-item">
    {profile_field.LABEL}
    {profile_field.CONTENT}
    </div>
  <!-- END profile_field -->
  </div>
  <div class="profile-avatar" id="avatar">{AVATAR_IMG}</div>
  <div class="profile-pm">
  <!-- BEGIN contact_field -->
  {contact_field.CONTENT}
  <!-- END contact_field -->
  </div>
  <!-- BEGIN switch_auth_user -->
  <div class="profile-admin">{L_ADMINISTRATE_USER}: {ADMINISTRATE_USER}{BAN_USER}</div><!-- END switch_auth_user -->
</div>

<br />
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('[id^=field_id]').each(function(){
         if ( $(this).find('.field_editable').is('span, div') )
         {
            $(this).hover(function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                  $(this).find('.ajax-profil_edit').attr({
                        alt: "{L_FIELD_EDIT_VALUE}",
                        title: "{L_FIELD_EDIT_VALUE}"
                     }).click(function(){
                     $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                     $(this).prev().find('.ajax-profil_valid').attr({
                        alt: "{L_VALIDATE}",
                        title: "{L_VALIDATE}"
                     }).click(function(){
                        var content = new Array();
                        $(this).parent().find('[name]').each(function(){
                           var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                           if ( (type_special && $(this).is(':checked')) || !type_special )
                           {
                              content.push(new Array($(this).attr('name'), $(this).attr('value')));
                           }
                        });
                        var id_name = $(this).parents('[id^=field_id]').attr('id');
                        var id = id_name.substring(8, id_name.length);
                        $.post(
                           "{U_AJAX_PROFILE}",
                           {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                           function(data){
                              $.each(data, function(i, item){
                                 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                              });
                           },
                           "json"
                        );
                     });
                     $(this).remove();
                  });
               }
            },function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                  $(this).find('.ajax-profil_edit').remove();
               }
            });
         }
      });
   });
//]]>
</script>

Et le CSS associé :

Code:

/***** PROFIL ******/
.profile {
    display: flex;
    flex-wrap: wrap;
  padding: 0 30px;
}
.profile-name {
    align-items: center;
    background-color: #cdb7db;
    border: 3px double #b595ca;
      box-shadow: 0 0 0 10px #cdb7db;
    display: flex;
  font-size: 0;
    height: 50px;
    justify-content: center;
  margin: 20px auto;
    width: calc(100% - 20px);
}
.profile-name strong {
    font-family: "Dancing Script", cursive;
    font-size: 20px;
    text-transform: uppercase;
}
.profile-links {
    display: flex;
  height: 20px;
    justify-content: space-between;
  margin: 0 auto 10px;
    width: 70%;
}
.profile-links a {
    align-items: center;
    background-color: #cfbadd;
    border-radius: 5px;
      color: #08050a;
    display: flex;
    flex: 1;
  font-weight: bold;
    justify-content: center;
    padding: 0 10px;
  text-transform: uppercase;
}
.profile-links a:last-child {

    background-color: #c4aad5;
margin-left: 10px;
}
.profile-status {
    color: #08050a;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 1px;
      margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.profile-infos {
    background-color: #cdb7db;
    border-radius: 10px;
    flex: 1;
  height: 320px;
    margin-right: 20px;
  overflow: auto;
    padding: 10px;
}
.profile-infos-item {
    display: flex;
    flex-direction: column;
    font-size: 0;
}
.profile-infos-item:first-child::before {
    content: 'Tout ce qu\'on peut savoir sur moi';
    display: block;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-style: italic;
    text-align: center;
    border: 3px double #b595ca;
    padding: 5px 0;
    margin-bottom: 15px;
    color: #3e274e;
}
.profile-infos-item span,
.profile-infos-item div {
      color: #754993;

    font-size: 11px;
  font-style: italic;
  font-weight: bold;
  padding: 5px;
  text-transform: uppercase;
}
.profile-infos-item > span {
  background-color: #c4abd5;
  color: #3e274e!important;
}
.profile-pm {
      font-size: 0;
    width: 100%;
}
.profile-pm a, .profile-pm img {
      display: none;
}
.profile-pm a[href^="/privmsg"] {
  display: flex;
      justify-content: flex-end;
}
.profile-pm a[href^="/privmsg"]::before {
    background: #c4abd5;
    color: #3e274e;
    content: "MP";
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    line-height: 1;
    margin-top: 10px;
    padding: 5px 0;
    text-align: center;
    width: 200px;
}

.resizebox {
    background-color: #bd97d1;
}
.resizebox .resize_border {
    border: 1px solid #9c64bb;
    display: flex;
}
.resizebox .resize_border a {
  color: #714988!important;
    font-size: 0.9em;
   
    font-weight: bold;
  text-transform: uppercase;
}
.resizebox .resize_border a:first-child {
 margin-right: 10px;
}

Et le CSS poru la page d'envoi des messages et la boîte MP :

Code:


/***** PAGE D'ENVOI DES MESSAGES ******/
.poster-title {
    align-items: center;
    background-color: #bd97d1;
    display: flex;
    font-family: "Dancing Script", cursive;
    font-size: 1.8em;
      font-weight: bold;
    height: 80px;
    justify-content: center;
    text-transform: uppercase;
}
.poster tr > td > .gen {
    padding: 8px;
    display: inline-flex;
}
.poster-btn {
    background: #bd97d1;
      background-color: #d8cbec!important;
    border: 1px solid #9c64bb;
  color: #714988!important;
    cursor: pointer;
        padding: 10px;
  text-transform: uppercase;
  transition: 0.3s;
}
.poster-btn:hover {
    background-color: #bd97d1!important;

}
th.poster-head,
.poster-head,
.poster-review-head {
    background-color: #bd97d1;
    background-image: none;
    border: 1px solid #9c64bb;
    color: #9c64bb;
    text-transform: uppercase;
}
.poster-options {
    display: block;
}
.poster-review-head:first-child {
    border-right: 0;
}
.poster-review-title {
    align-items: center;
    display: flex;
    font-family: "Dancing Script", cursive;
    font-size: 1.8em;
    height: 80px;
    justify-content: center;
    text-transform: uppercase;
}
.poster-review-author,
.poster-review-message tr:last-child td,
.poster-review-message tr:first-child td,
.poster-options {
    padding: 10px;
}
.poster-review-message tr:last-child td {
    padding-top: 0;
}
.poster-review-message tr:first-child td {
    padding-bottom: 0;
}
/***** BOITE DE RECEPTION DES MP ******/
.mpbox th {
    background-image: none;
    background-color: #bd97d1;
  border-bottom: 1px solid #9c64bb;
  border-top: 1px solid #9c64bb;
    color: #9c64bb;
}
.mpbox th:first-child {

  border-left: 1px solid #9c64bb;
}
.mpbox th:last-child {

  border-right: 1px solid #9c64bb;
}
.mpbox tr:not(:first-child) td {
    padding: 5px;
}
.mpbox-btn {
    background: #bd97d1;
      background-color: #d8cbec!important;
    border: 1px solid #9c64bb;
  color: #714988!important;
    cursor: pointer;
        padding: 5px 10px;
  text-transform: uppercase;
  transition: 0.3s;
}
.mpbox-btn:hover {
    background-color: #bd97d1!important;

}
.mpbox-btn[name="deleteall"] {
    font-weight: bold;
}

Et dis-moi s'il manque des choses ! >.<

Hey,
Merci pour le reste des codes. (:

Pour le profil c'est parfait !
En revanche pour la PA il y a pas mal petits bémols qu'on a pu remarquer en la complétant.  

- Pour commencer est-ce normal que les images du staff soient introuvable ? Je ne les trouve pas, comme si elles étaient inexistante. Est-ce parce qu'il s'agit ici juste de cadres et pas de photos ? Toujours pour le staff ce serait bien que le mp et profil puisse être des liens (mais à la limite ça on peut le changer nous même). ^^

- Pour le contexte et la nouveauté serait-il possible d'avoir un petit scroll pour la hauteur ?
Je te laisse voir ce que ca donne sur le fofo test pour l'instant :
https://sostest.forumactif.com

- Par ailleurs, pour les images top et pv serait-il possible de les redimensionner automatiquement ? Sinon ca déforme toute la PA à partir du moment où l'on colle une icone légèrement plus grande ce qui est embêtant. :/

- Et enfin concernant la barre de partenariat j'ai vu que tu avais mis un scroll mais de base on pensait plutôt à un défilement automatique car la scrollbar n'est pas très esthétique.

Désolée ça fait encore beaucoup de chose.  

Je te remercie encore pour ton travail,
Bonne journée (:

Pour commencer est-ce normal que les images du staff soient introuvable ? Je ne les trouve pas, comme si elles étaient inexistante. Est-ce parce qu'il s'agit ici juste de cadres et pas de photos ?

Tout simplement parce que je ne les ai pas ajoutées, je te laissais le soin de le faire !

Toujours pour le staff ce serait bien que le mp et profil puisse être des liens (mais à la limite ça on peut le changer nous même). ^^

Pareil ici !

J'ai donc ajouté les images et les liens pour te faciliter la vie (le code est plus bas). Pour info, les images de staff se redimensionnent automatiquement mais la taille idéale est de 80*80px. Pour le cadre rouge (l'onglet staff actif), la couleur est à changer dans le CSS :

Code:

 .pa-staff-item.active {
    border: 1px solid red;
}

Le "red" est à remplacer par la couleur de ton choix ! (j'avais mis rouge pour qu'on voie bien l'onglet actif, mais évidemment c'est un peu moche)

Pour le contexte et la nouveauté serait-il possible d'avoir un petit scroll pour la hauteur ?

C'est ajouté !

Au passage, pour les nouveautés, il faut remplir le cadre comme ceci :

Code:

<div><b>10.11.19</b> Lorem ipsum</div>
<div><b>10.11.19</b> Lorem ipsum</div>
<div><b>10.11.19</b> Lorem ipsum</div>

Et non pas comme ceci, comme tu l'as fait :

Code:

<div><b>10.11.19</b> Lorem ipsum
<b>10.11.19</b> Lorem ipsum
<b>10.11.19</b> Lorem ipsum</div>

Par ailleurs, pour les images top et pv serait-il possible de les redimensionner automatiquement ? Sinon ca déforme toute la PA à partir du moment où l'on colle une icone légèrement plus grande ce qui est embêtant. :/

C'est modifié !

Et enfin concernant la barre de partenariat j'ai vu que tu avais mis un scroll mais de base on pensait plutôt à un défilement automatique car la scrollbar n'est pas très esthétique.

Pas de souci, c'est ajouté

Donc voilà le nouveau code de la PA, j'espère avoir bien tout corrigé :

Code:

<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<style>
  body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.pa {
  background-color: #ad9ec4;
  display: flex;
  flex-wrap: wrap;
  font-family: Arial, sans-serif;
  font-size: 14px;
  width: 800px;
}

.pa-title {
  border-bottom: 2px solid;
  color: #433558;
  font-family: 'Dancing Script', cursive;
  margin: 20px 30px;
  padding-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.pa-links {
  background-color: #9e8dba;
  display: flex;
  justify-content: space-between;
  margin: 0 50px 10px;
  padding: 10px 30px;
  width: 100%;
}

.pa-links a {
  color: #221c2e;
  font-style: italic;
  font-weight: bold;
}

.pa-context {
  background-color: #9e8dba;
  color: #241d2f;
  flex: 1;
  font-size: 0.9em;
  margin-left: 30px;
  max-height: 325px;
  overflow: auto;
  padding: 10px;
}

.pa-middle {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
  width: calc(80px * 3 + 10px);
}

.pa-staff {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pa-staff-item {
  border: 1px solid #000;
  cursor: pointer;
  height: 80px;
  width: 80px;
}

.pa-staff-item img {
  height: 100%;
  width: 100%;
}

.pa-staff-item.active {
  border: 1px solid red;
}

.pa-staff-content {
  height: 100px;
  margin-top: 5px;
  position: relative;
  width: 100%;
}

.pa-staff-content-item {
  align-items: center;
  background-color: #241d2f;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%;
}

.pa-staff-content-item.active {
  opacity: 1;
  visibility: visible;
}

.pa-staff-content-item h3 {
  color: #b2a5c8;
  font-family: 'Dancing Script', cursive;
  font-size: 1.6em;
  margin: 0;
}

.pa-staff-content-item b,
  .pa-staff-content-item a {
  color: #ad9ec4;
  font-size: 0.9em;
}

.pa-staff-content-item div {
  color: #70b84d;
  font-size: 0.9em;
}

.pa-links-middle {
  display: flex;
  height: 30px;
  justify-content: space-between;
  margin: 10px 0;
}

.pa-links-middle a {
  align-items: center;
  background-color: #9e8dba;
  color: #221c2e;
  display: flex;
  flex: 1;
  font-size: 0.6em;
  justify-content: center;
  margin-right: 5px;
  text-transform: uppercase;
}

.pa-links-middle a:last-child {
  margin: 0;
}

.pa-top {
  background-color: #9e8dba;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.pa-top img {
  height: 70px;
  width: 70px;
}

.pa-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-right: 30px;
max-height: 325px;
}

.pa-pv {
  background-color: #9e8dba;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  margin-bottom: 10px;
  padding: 10px;
}

.pa-pv img {
  height: 40px;
  width: 40px;
}

.pa-news {
  background-color: #9e8dba;
  color: #241d2f;
  flex: 1;
  font-size: 0.9em;
  font-style: italic;
  overflow: auto;
  padding: 10px;
}

.pa-partners {
  height: 30px;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.pa-partners:hover .pa-partners-inner {
  animation-play-state: paused;
}

.pa-partners-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  animation: scroll-left 10s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.pa-partners a {
  align-items: center;
  background-color: #000;
  border-radius: 2em;
  color: #ad9ec4;
  display: inline-flex;
  font-size: 0.8em;
  font-style: italic;
  margin-right: 10px;
  padding: 0 10px;
}

.pa-partners a:last-child {
  margin-right: 0;
}
  
</style>
  <div class="pa">
    <h2 class="pa-title">Titre du forum</h2>
    <div class="pa-links">
        <a href="" target="_blank">Lien</a> +
        <a href="" target="_blank">Lien</a> +
        <a href="" target="_blank">Lien</a> +
        <a href="" target="_blank">Lien</a> +
        <a href="" target="_blank">Lien</a> +
        <a href="" target="_blank">Lien</a>
    </div>
    <div class="pa-context">
        Par où commencer ? Tu nous manques. Tu manques aux filles. La vie à l'école n'a pas été de tout repos ces dernières années. Déjà, il y a eu l'arrivé de Landon. Lui qu'on pensait être un simple humain s'est révélé être un phoenix. Puis il y a eu tous ces monstres qui ont attaqué l'école. Sans compter la menace de Malivor qui n'a pas été facile à gérer. Mais Landon a vaincu Malivor, j'ignore comment à vrai dire. J'ai l'impression qu'il manque un pion à l'échiquier. Quelque chose qui nous échappe. L'idée qu'une pièce du puzzle n'est pas assemblée un peu comme si j'avais oublié quelque chose d'important, mais ca doit sûrement être dans ma tête. Quoi que, Malivor a la faculté de faire oublier des personnes. Et oui, comme je te l'ai dit Caroline il s'est passé beaucoup de choses pendant ton absence. Je sais que tu parcours le monde pour trouver une solution pour nos filles. Lizzie et Josie vont bientôt avoir 18 ans, ils ne leurs restes que quatre ans avant la fusion. Je crois que je ne pourrais pas leur cacher encore longtemps la vérité. Elles ont découvert l'ascendant. J'espère vraiment que tu vas finir par trouver une solution.
    </div>
    <div class="pa-middle">
        <div class="pa-staff">
            <div class="pa-staff-item active" data-id="1">
                <img src="https://i.imgur.com/QGhklnM.jpg" />
            </div>
            <div class="pa-staff-item" data-id="2">
                <img src="https://i.imgur.com/QGhklnM.jpg" />
            </div>
            <div class="pa-staff-item" data-id="3">
                <img src="https://i.imgur.com/QGhklnM.jpg" />
            </div>
            <div class="pa-staff-content">
                <div class="pa-staff-content-item active" id="1">
                    <h3>Pseudo + DC</h3>
                    <b><a href="#" target="_blank">Profil</a> + <a href="#" target="_blank">MP</a></b>
                    <div>Présente</div>
                </div>
                <div class="pa-staff-content-item" id="2">
                    <h3>Pseudo + DC 2</h3>
                    <b><a href="#" target="_blank">Profil</a> + <a href="#" target="_blank">MP</a></b>
                    <div>Présente</div>
                </div>
                <div class="pa-staff-content-item" id="3">
                    <h3>Pseudo + DC 3</h3>
                    <b><a href="#" target="_blank">Profil</a> + <a href="#" target="_blank">MP</a></b>
                    <div>Présente</div>
                </div>
            </div>
        </div>
        <div class="pa-links-middle">
            <a href="" target="_blank">événement</a>
            <a href="" target="_blank">chronologie</a>
            <a href="" target="_blank">à tous</a>
        </div>
        <div class="pa-top">
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/70" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/70" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/70" />
            </a>
        </div>
    </div>
    <div class="pa-right">
        <div class="pa-pv">
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>

            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>

            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
            <a href="" target="_blank">
                <img src="https://via.placeholder.com/40" />
            </a>
        </div>
        <div class="pa-news">
            <div><b>10.11.19</b> Lorem ipsum</div>
        </div>
    </div>
    <div class="pa-partners">
        <div class="pa-partners-inner">
            <a href="" target="_blank">Partenaire</a>
            <a href="" target="_blank">Partenaire 2</a>
            <a href="" target="_blank">Partenaire 3</a>
            <a href="" target="_blank">Partenaire 4</a>
            <a href="" target="_blank">Partenaire 5</a>
            <a href="" target="_blank">Partenaire 6</a>
            <a href="" target="_blank">Partenaire 7</a>
            <a href="" target="_blank">Partenaire 8</a>
        </div>
    </div>
</div>
  <script>
    let staffTabs = document.querySelectorAll('.pa-staff-item');
    let staffTabContent = document.querySelectorAll('.pa-staff-content-item');
    staffTabs.forEach(function(e) {
     e.onclick = ()  => {
     staffTabs.forEach((el) => { el.classList.remove('active'); });
     e.classList.add('active');
     staffTabContent.forEach((el) => {
     el.classList.remove('active');
     if (parseInt(el.id) === parseInt(e.getAttribute('data-id'))) {
     el.classList.add('active');
     }
     });
     }
    });
  </script>

Coucou C'est tout bon pour moi, tout fonctionne !    
Encore un grand merci pour ce design il est vraiment magnifique t’as fais un travail formidable      

Bonne continuation à toi