Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages
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!
Re: Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages
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 :
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 );
});
});
MlleAlys- Membre actif
- Messages : 5808
Inscrit(e) le : 12/09/2012
Re: Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages
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ù :
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 />
Re: Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages
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é ?
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é ?
MlleAlys- Membre actif
- Messages : 5808
Inscrit(e) le : 12/09/2012
Re: Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages
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
Re: Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages
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) :
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.
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.
MlleAlys- Membre actif
- Messages : 5808
Inscrit(e) le : 12/09/2012
Re: Ajouter des classes à chaque champ de la feuille de personnage dans le profil + rassembler les labels et fields de celle-ci dans les messages
Woaaah ça marche merci beaucoup !!!!!
Je passe le sujet en résolu
Je passe le sujet en résolu
Sujets similaires
» Affichage de la feuille de personnage dans le profil (masquer/afficher)
» Ajouter une image dans la feuille de personnage
» Feuille de personnage ne s'affiche plus dans le profil.
» Feuille de personnage trop basse dans le profil
» Un 'tit bouton dans le profil en place des infos et de la feuille de personnage
» Ajouter une image dans la feuille de personnage
» Feuille de personnage ne s'affiche plus dans le profil.
» Feuille de personnage trop basse dans le profil
» Un 'tit bouton dans le profil en place des infos et de la feuille de personnage
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum