Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages

[ErynGold]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 30/12/23
Lien du forum : https://rise-of-the-abyss.forumactif.com/

Description du problème

Bonjour,

La feuille de personnage me rend totalement fou. Dans la visualisation d'un profil, j'aimerais personnaliser chaque champ de la feuille de personnage pour qu'il prenne une certaine place dans ma div. Pour obtenir ça:

Spoiler:

Or, ils n'ont pas de moyens d'être différenciés de base et je ne peux que les modifier tous en même temps. De plus, j'aimerais organiser ma partie feuille de personnage ainsi :
Une div dans laquelle j'aurais les champs "nom", "métier", "âge" et "atout
Une autre div dans laquelle j'aurais les champs "rune" et "magie"
Une autre div dans laquelle j'aurais le champ "mission divine"
Comme ça, je pourrais les organiser avec un flex.

Pour l'instant, j'obtiens ça:

Spoiler:

--------------------

Mon second problème avec la feuille de personnage est dans les messages. Là pour faire court, leur présentation est différente du profil : chaque field prend la même apparence que le label, mais ils se retrouvent séparés par deux points. Je ne veux pas retirer les deux points, je veux que les deux points s'affichent dans la même div que le label et surtout, que le field ne soit pas séparé... Comme dans les profils, en somme. Afin d'obtenir ce résultat:

Spoiler:

Or, j'obtiens ça:

Spoiler:

Et là vous vous dites "c'est presque pareil", mais pas exactement. Dans mon code, j'ai dû appliquer un margin négatif à mon field pour qu'il couvre les deux points et se rapproche du label... Ils ne sont pas dans la même div. Ce n'est pas optimal...

Voilà mon CSS appliqué à tous les ID des fields pour la feuille de personnage dans les messages :

Code:

#rpg-nom, #rpg-atout, #rpg-métier, #rpg-âge, #rpg-rune {
    margin-left: -35px;
    font-weight: 300!important;
    font-style: normal!important;
    padding: 9px 14px 9px 9px;
}

Sans le margin, ça donne ça:

Spoiler:

Pouvez-vous m'aider? Merci d'avance!

[ErynGold]

Up! ^^

[ErynGold]

Up

[MlleAlys]

Bonjour,
A défaut d'une réponse sans doute plus propre, vous pouvez tenter ce code javascript, qui permet de récupérer l'identifiant de la valeur du champ pour l'appliquer à la div du champ complet :

Code:

$(function(){
  $("div.rpg-fields *[id]").each(function(){
    var idchamp = $(this).attr("id");
    $(this).removeAttr('id').closest('div.rpg-fields').attr('id', idchamp );
  });
});

[ErynGold]

Bonjour et merci pour votre réponse !

Malheureusement le code ne fonctionne pas. Tous mes champs ont, pour une raison inconnue, un id qui leur est propre et donc le script le trouve pas rpg-fields. Je ne vois apparaître cette mention nulle part dans le code. Voici le code de la feuille de personnage au cas où :

Code:

<h1 class="page-title">{L_VIEWING_PROFILE}</h1>
<div class="panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <div class="column1">
   <p>{POSTER_RANK} {RPG_IMAGE}</p>
   <fieldset>
      <!-- BEGIN rpg_fields_left -->
      <dl>
         <dt><label>{rpg_fields_left.F_NAME} :</label></dt>
         <dd>{rpg_fields_left.F_VALUE_NEW}</dd>
      </dl>
      <!-- END rpg_fields_left -->
   </fieldset>
   </div>
   <div class="column2">
   <fieldset>
      <!-- BEGIN rpg_fields -->
      <dl>
         <dt><label>{rpg_fields.F_NAME} :</label></dt>
         <dd>{rpg_fields.F_VALUE_NEW}</dd>
      </dl>
      <!-- END rpg_fields -->
   </fieldset>
   </div>
   <span class="corners-bottom"><span></span></span></div>
</div>
<br />

[MlleAlys]

Je me suis basée via le lien que vous avez fourni au début de votre sujet, sur la structure de la fiche de personnage ici :
https://rise-of-the-abyss.forumactif.com/u1
... qui effectivement ne semble pas correspondre au template que vous venez de fournir : Ce n'est pas le forum concerné ?

[ErynGold]

Ah non pardon ! Je pensais que votre script était pour les messages, my bad. J'ai testé sur les profils et effectivement, ça fonctionne merci beaucoup ! Je laisse le sujet en non-résolu car j'ai toujours mon problème avec la feuille de personnage dans les messages, mais merci à vous pour votre aide

[MlleAlys]

Le template ne semble pas non plus correspondre à l'affichage dans les profils des messages...

Vous pouvez en tout cas déjà tester ce code là (c'est vraiment du bidouillage de type patchwork, et je doute que ce soit optimal, mais ça semble fonctionner chez moi) :

Code:

$(function(){
  $(".roa-infos-content .gen:not([id])").each(function(){
    $(this).nextUntil(".gen:not([id])").andSelf().wrapAll("<div class='rpg-champ'></div>");
    $(this).append(" : ");
  });
  $(".roa-infos-content").contents().filter(function(){
    return (this.nodeType == 3);
  }).remove();
  $(".roa-infos-content br").remove();
  $(".rpg-champ *[id]").each(function(){
    var idchamp = $(this).attr("id");
    $(this).removeAttr('id').closest('.rpg-champ').attr('id', idchamp );
  });
});

Le code rassemble dans une div "rpg-champ" le label et la valeur du champ, puis supprime le texte "libre" dans le bloc (les ":" qui ne sont pas entrés dans le bloc précédent) et les br, rajoute du coup un " : " à la fin du label, puis déplace l'identifiant du champ sur le bloc "rpg-champ" de la même façon que pour le code précédent.

à partir de là normalement vous pouvez mettre le fond noir sur rpg-champ, retirer les marges négatives, etc.

[ErynGold]

Woaaah ça marche merci beaucoup !!!!!
Je passe le sujet en résolu