Salutations !

Je réponds à ta demande d'abord pour accéder à ton schéma s'il est caché (si ce n'est pas le cas et qu'il s'agit d'un oubli de ta part j'éditerai mon message). Si tout est en ordre, je regarde ce que je peux faire pour t'aider le plus rapidement possible et j'éditerai mon message s'il me manque quoique ce soit. :)

Ton schéma est très clair, je te rassure ! J'essaie de voir ce que je peux faire dans la soirée pour la structure principale et on avisera par la suite de quelle manière tu souhaites personnaliser tes différentes entête de groupe/rang.

Hello,

Merci beaucoup pour cette réponse rapide ^^

Je viens de regarder se que tu as commencé à faire sur le forum test et ça me parait déjà super. Si tu veux voici le lien du forum sur le quelle ça va s'intégrer : https://hildriss.forumactif.com/
Hésites pas a me dire si tu as besoin de plus d'informations et si il faut que je te fasse les visuelle pour chacun des groupes.

et encore une fois merci beaucoup ! globalement j'arrive pas trop mal à bidouiller pour arriver a mes fin mais là je m'en sortais pas du tout avec cette partie là ^^

Content que ça te plaise pour l'instant (et désolé pour le délai de réponse, les mercredis sont mes vendredis et j'en profite pour décompresser) !

Pour le visuel de chaque groupe (l'entête), j'aurais surtout besoin de savoir de quelle façon tu comptes t'y prendre pour les différencier.

La première méthode, assez minutieuse, serait d'utiliser la couleur des groupes et un peu de JS pour l'appliquer ailleurs (notamment pour le cadre des profils, comme dans tes schémas). Malheureusement, cette façon devient plus compliquée si on y ajoute différentes modifications (notamment des images) parce qu'il faut s'assurer que la couleur choisie dans le panneau d'administration pour chaque groupes soit bien celle appliquée par ForumActif sur le forum, et ce n'est pas toujours le cas (l'oeil humain ne s'en rend pas compte, mais une couleur "#EFEFEF" peut se transformer en "#EEFEEF" et le JS devient difficile à prédire et encore plus à modifier).

Une autre façon de faire, que j'affectionne particulièrement (parce qu'elle ne requiert aucun JS et parce que le moins on en utilise le mieux c'est), est d'utiliser directement le rang des membres pour différencier les groupes. Si tu t'y connais un peu en CSS, les templates permettent de le faire comme ceci, en utilisant la variable qui affiche normalement le nom du rang :

Code:

<div class="post" data-rank="{postrow.displayed.POSTER_RANK}"></div>

.post[data-rank^="Admin"] {
  background-image: url('image.png');
}

Donc, tout dépendra de si tu comptes utiliser tes rangs indépendamment des groupes ou non.

Sinon, je pense que tout est bon côté structure (image). Pour ce qui manque, les couleurs et les champs de profil qui ne sont pas ceux de ton schéma, tu pourras toi-même les modifier facilement sur ton forum (avec les images de contact, dans ton panneau d'administration). (boutons nouveau/répondre)

EDIT : Je viens de remarquer et de me souvenir : je n'ai pas "Century Gothic" d'installer sur mon PC, donc le texte que tu verras toi en live (et certains de tes membres) sera différent de celui sur mes screenshots.

hello,

effectivement moins je bidouille de JS mieux je me porte donc je pense que passer par les rang pour pouvoir appliquer non seulement une couleur mais également des images pour différencier les différents groupes me parait plus à ma porté ^^

en plus ça pourra me permettre également de mettre des nom de rang adapter à chaque joueurs s'il le faut sans à avoir à ajouter des groupes !

Monomer a écrit:et désolé pour le délai de réponse, les mercredis sont mes vendredis et j'en profite pour décompresser !

mais il n'y a pas de soucis ! je ne suis absolument pas pressé et s'il avait fallu plusieurs semaines ça m'aurait été parfaitement ^^

Salutations !

Me voilà de retour, avec une première version que tu peux installer. Tu peux remplacer le template "viewtopic_body" par ceci :

Code:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<div class="mnmr__topic">
<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
   //<![CDATA[
   var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
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="breadcrumbs">
    <div class="breadcrumbs__buttons">
      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow">Nouveau</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}">Répondre</a>
      <!-- END switch_user_authreply -->
    </div>
    <div class="breadcrumbs__links">
      <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
      {NAV_CAT_DESC_SECOND}
    </div>
    <div class="mnmr__pagination pagination"><span class="gensmall">{PAGINATION}</span></div>
  </div>
 

  <h1 class="mnmr__cattitle">{TOPIC_TITLE}</h1>
 
  <!-- BEGIN postrow -->
  <!-- BEGIN displayed -->
  <div class="mnmr__post post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}" data-rank="{postrow.displayed.POSTER_RANK}">
    <header class="mnmr__header">rang</header>
    <aside class="mnmr__aside">
      <div class="mnmr__username">{postrow.displayed.POSTER_NAME}</div>
      <div class="mnmr__rank">{postrow.displayed.POSTER_RANK}</div>
      <div class="mnmr__avatar">{postrow.displayed.POSTER_AVATAR}</div>
      <div class="mnmr__contact">
        {postrow.displayed.PM_IMG}
        {postrow.displayed.PROFILE_IMG}
        <!-- BEGIN contact_field -->
        {postrow.displayed.contact_field.CONTENT}
        <!-- END contact_field -->
      </div>
      <div class="mnmr__profile">
        <!-- BEGIN profile_field -->
        {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
        <!-- END profile_field -->
      </div>
      <div class="mnmr__rpg">
        {postrow.displayed.POSTER_RPG}
      </div>
    </aside>
    <article class="mnmr__article">
      <div class="mnmr__meta">
        <div class="mnmr__date">{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</div>
        <div class="mnmr__meta-buttons">{postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
      </div>
      <div class="mnmr__postbody postbody">{postrow.displayed.MESSAGE}</div>
      <!-- BEGIN switch_signature -->
      <div class="mnmr__signature signature_div">
        {postrow.displayed.SIGNATURE}
      </div>
      <!-- END switch_signature -->
    </article>
  </div>
  <!-- END displayed -->
  <!-- END postrow -->
 
  <div class="breadcrumbs">
    <div class="breadcrumbs__buttons">
      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow">Nouveau</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}">Répondre</a>
      <!-- END switch_user_authreply -->
    </div>
    <div class="breadcrumbs__links">
      <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
      {NAV_CAT_DESC_SECOND}
    </div>
    <div class="mnmr__pagination pagination"><span class="gensmall">{PAGINATION}</span></div>
  </div>

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">

   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>


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

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


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

et ajouter ceci à ton CSS :

Code:

/* MONOMER - Never Utopia */
.mnmr__topic {
  --group: #fff; /* couleur de groupe par défaut blanc */
  --color-bg: #262023; /* violet sombre */
  --color-cell: #31262b; /* voilet clair */
  --color-pale: #837a6d; /* beige clair */
  margin: 64px 0;
  font-family: Century Gothic;
  font-size: 16px;
}

/* RANG ADMIN */
.mnmr__post[data-rank^="Admin"] {
  --group: #a3a3f5;
}
.mnmr__post[data-rank^="Admin"] .mnmr__header {
  background-image: url(image.png);
}
/* RANG ADMIN */
.mnmr__post[data-rank^="Guerrier"] {
  --group: #a3a3f5;
}
.mnmr__post[data-rank^="Guerrier"] .mnmr__header {
  background-image: url(image.png);
}

.breadcrumbs {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
}
.breadcrumbs__buttons {
  /* contexte des boutons nouveau et repondre */
  display: flex;
  flex-shrink: 0;
  gap: 15px;
  margin-right: 30px;
}
.breadcrumbs__buttons a {
  /* bouton noureau et répondre */
  background-color: var(--color-pale);
  font-family: 'Great Vibes', cursive;
  paddign: 8px;
  font-size: 1.5rem;
  color: var(--color-bg);
  padding: 10px 15px;
  text-decoration: none;
  box-shadow: 6px 6px 6px rgba(0,0,0,.8);
  border: 1px solid var(--color-pale);
  transition: .2s ease;
  font-weight: bold;
}
.breadcrumbs__buttons a:hover {
  /* bouton noureau et répondre survol */
  text-decoration: none!important;
  background-color: var(--color-cell);
  color: var(--color-pale);
}
.breadcrumbs__links {
  /* alignement et contexte de la hiérarchie */
  color: var(--color-pale);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;
}
.breadcrumbs__links a {
  /* liens de la hiérarchie */
  color: inherit;
}
.mnmr__pagination {
  /* pages du sujet */
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

h1.mnmr__cattitle {
  /* titre du sujet */
  color: var(--color-pale);
  text-align: center;
  margin: 10px 0;
  text-shadow: 4px 4px 4px rgba(0,0,0,.8);
  font-size: 1.2rem;
  font-weight: normal;
}

.mnmr__post {
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
  margin-bottom: 15px;
}

.mnmr__header {
  /* boite rang/groupe d'entête */
  font-family: 'Great Vibes';
  font-size: 2rem;
  text-align: center;
  color: var(--group);
  border: 1px solid var(--color-pale);
  padding: 10px;
  background-color: var(--color-cell);
  background-image: url(http://placekitten.com/g/1000/80);
  background-size: cover;
  background-position: 50% 50%;
  text-shadow: 4px 4px 4px rgba(0,0,0,.8);
  flex: 1 1 100%;
}
.mnmr__aside {
  /* boite profile */
  flex: 0 0 200px;
  background-color: var(--color-cell);
  border: 2px solid var(--group);
  border-top: 0;
  margin-right: 15px;
  box-sizing: border-box;
}
.mnmr__username {
  /* nom d'utilisateur */
  margin-top: 10px;
  font-family: 'Great Vibes';
  font-size: 1.4em;
  text-align: center;
  line-height: 1;
}
.mnmr__username a {
  text-decoration: none;
}
.mnmr__rank {
  /* rang sous le pseudo */
  text-align: center;
  line-height: 1;
  margin-bottom: 10px;
  font-family: 'Great Vibes';
  font-size: 1.3em;
  font-weight: bold;
  text-transform: lowercase;
}
.mnmr__avatar {
  margin-bottom: 4px;
}
.mnmr__profile,
.mnmr__rpg {
  /* boite champs de profil */
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--color-pale);
  font-size: .8rem;
}
.mnmr__profile .label {
  font-weight: 600;
}
.mnmr__rpg {
  font-weight: 600;
  margin-bottom: 4px;
}
.mnmr__rpg a,
.mnmr__rpg br {
  /* retire lien feuille de personnage
  et les sauts de ligne désagréables */
  display: none;
}
.mnmr__rpg textarea {
  width: 192px; /* 200px - 8px pour les espaces */
  box-sizing: border-box;
  border: 1px solid var(--color-pale);
  background-color: var(--color-bg);
  color: var(--color-pale);
  resize: vertical;
}
.mnmr__contact {
  /* petit bloc pour les boutons contact */
  display: flex;
  align-items: center;
  padding: 5px;
  justify-content: center;
  border: 1px solid var(--color-pale);
  border-width: 1px 0;
  background-color: var(--color-bg);
  margin-bottom: 4px;
}

.mnmr__article {
  /* boite du message */
  color: var(--color-pale);
  flex: 1;
  border: 1px solid var(--color-pale);
  border-top: 0;
  background-color: var(--color-cell);
  padding: 0 15px 30px 15px;
  align-self: stretch;
}
.mnmr__meta {
  /* extra au dessus du message */
  padding: 5px 0;
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--color-pale);
  margin-bottom: 5px;
}
.mnmr__meta-buttons {
  display: flex;
  gap: 15px;
}
.mnmr__meta-buttons a img {
  display: none;
}
.mnmr__meta-buttons a {
  /* bouton moderation du message */
  color: var(--color-cell);
  border: 1px solid var(--color-pale);
  background-color: var(--color-pale);
  text-decoration: none!important;
  min-width: 35px;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s ease;
}
.mnmr__meta-buttons a:hover {
  /* bouton moderation du message survol */
  text-decoration: none!important;
  background-color: var(--color-cell);
  color: var(--color-pale);
}
.mnmr__meta-buttons a:before {
  /* texte qui remplace les images */
  font-family: 'Great Vibes';
  font-size: 20px;
  font-weight: bold;
}
/* astuce pour afficher les boutons edition et citation
  sans les images, en utilisant les liens pour remplacer le
  contenu par du texte. */
.mnmr__meta-buttons a[href*="mode=quote"]:before {
  content: '”';
}
.mnmr__meta-buttons a[href*="mode=edit"]:before {
  content: 'Ed';
}
.mnmr__meta-buttons a[href*="mode=delete"]:before {
  content: 'X';
}
.mnmr__meta-buttons a[href*="mode=ip"]:before {
  content: 'Ip';
}
.mnmr__date {
  /* date du post */
  flex-grow: 1;
}
.mnmr__signature {
  /* signature */
  color: var(--color-pale);
  margin-top: 30px;
  border-top: 2px solid var(--color-pale);
}
.mnmr__postbody {
  /* format du text du message */
  color: var(--color-pale);
  font-size: .9rem;
}

La magie des rangs se passe dans les premières lignes du CSS :

Code:

.mnmr__post[data-rank^="Admin"] {
  --group: #a3a3f5; /* "écraser" la variable de couleur */
}
.mnmr__post[data-rank^="Admin"] .mnmr__header {
  background-image: url(image.png); /* image de fond */
}

Si tu as déjà quelques notions en CSS, tu pourras modifier facilement ces lignes et les copier/coller les unes sous les autres (en modifiant le "Admin" entre guillemets) pour affecter un autre rang. À savoir que cette méthode a quelques restrictions : les majuscules sont importantes (il faudra copier/coller exactement le texte du rang, accents compris). Aussi, je te déconseille d'utiliser du HTML dans tes rangs (certains forums le font) et de mettre les guillemets anglais qu'on utilise en HTML (Maj + 2 sur azerty, si je ne me trompe pas). Un exemple :

Code:

.mnmr__post[data-rank^="Sorcière des Landes"] {
  --group: pink; /* "écraser" la variable de couleur */
}
.mnmr__post[data-rank^="Sorcière des Landes"] .mnmr__header {
  background-image: url(image_galaxie_super_rose.png); /* image de fond */
}

Dis-moi si l'intégration se passe bien et on regardera ensuite les petites détails que tu aimerais améliorer ou changer (ou s'il y a quelques oublis de ma part, ce qui est fort possible avec mon petit pois de cerveau) ! Bonne chance.

OOOO top merci beaucoup j'essaye de mettre tout ça en place dans la semaine (désolée pour le temps de réponses j'étais chargé au niveau boulot la semaine dernière)

je reviens vers toi pour te montrer le rendu final quand tout sera installer et les réglages adapté !

merci infiniment pour ce travail !