Dim 2 Avr - 13:48

Salut toi :) j'aurais bien besoin de tes talents de codeur pour mon forum, je t'avoue que moi et le codage, on est pas très copain copain XD Mon forum il est en construction, mais il est bientôt terminé ^^ (tu le verras sûrement aux nombres de messages XD) Si tu veux je peux te mpoter quand il seras terminé, que tu le vois de tes propres yeux ;)

Commande

Type de commande : Template des profils/messages
Lien du forum : par ici la compagnie (faut pas faire attention aux catégories et qeel, ils seront bientôt changé ^^)
Maquette(s) : https://i.imgur.com/HOSCwuN.png
Image(s) à insérer : par ici. J'ai tout mis sur le même album :) Normalement tu as tout ^^
Précisions : Alors alors :) L'espèce de bannière derrière l'avatar, c'est les rangs. Les six rectangles dessous, ce sont les informations du profil (messages, nombre d'or, etc). Les informations sous l'avatar, c'est un jumelage des informations du profil et de la feuille rpg.

Les couleurs maintenant :
La zone de texte : #cbc9bd
Sous le pseudo et le titre du rang : #463138
La bordure autour de la zone de texte : #463138
Le genre de contour autour de l'avatar (mais distancé, je sais pas si ça se fait ? Sinon c'est pas grave ^^) : #fffaff
La couleur sous le titre du sujet : #6f505f
La couleur sous tout ça (l'espèce de mauve très pâle) : #928388 (je sais pas si tu en auras besoin, mais je fournis quand même ^^)
Couleur du pseudo/rang : #fffaff


Voilà :) Je crois que tu as tout x)

Dim 2 Avr - 19:35

Coucou !
Je vais essayer de faire une première tentative d'ici à demain soir (je vais être un peu occupé demain donc je ne peux pas te le garantir à 100% mais je vais vraiment essayer).
Juste une question, si j'ai bien compris, la fiche rp se situera dans la partie survolée par l'avatar, et les champs du profil seront répartis entre cette partie survolée et les rectangles en dessous ? Si c'est le cas, j'aurai probablement besoin d'informations complémentaires, mais ce n'est pas urgent. ;)

Dim 2 Avr - 22:43

Hey :) Pas de soucis c'est pas une commande urgente ^^ Sinon oui c'est bien cela, tu as tout compris

Lun 3 Avr - 20:43

Bonsoir !
Du coup j'ai avancé sur le template, tu peux voir le résultat ici. Dis-moi déjà si l'affichage te convient/ne bugue pas (si ton navigateur n'est à jour il est possible que ça ne s'affiche pas correctement, mais je m'occuperai plus tard des adaptations ).

Du coup j'ai encore deux-trois questions pour toi :
- tu n'as rien mis concernant les boutons profil, mp... est-ce que tu les veux ? si oui, lesquels seraient à afficher ? (si par exemple tu as un bouton de lien vers la présentation)
- est-ce que tu actives les sondages sur ton forum ? et l'affichage des sujets similaires ?
- j'aurais besoin que tu me fasses une liste des six champs du profil que tu souhaites voir dans l'inventaire, avec leur intitulé exact, pour que je puisse les intégrer au code. + quels types de champs tu mets dans ta fiche rp, ligne, zone de texte, etc. ? comment est-ce que je distingue les champs de la fiche du reste des champs ?

Voilà, je te souhaite une très bonne soirée.

Mar 4 Avr - 3:28

Hey :) Alooors :


- tu n'as rien mis concernant les boutons profil, mp... est-ce que tu les veux ? si oui, lesquels seraient à afficher ? (si par exemple tu as un bouton de lien vers la présentation) Hey :) Alors oui j'ai bien ces boutons-là, je comprends pas pourquoi la personne ne les a pas affiché sur la maquette XD Et pourquoi MOI j'ai pas remarqué x_x #Boulet Alors les boutons seront sous la zone de texte, juste en haut de la signature :) (à côté du online XD) Alors il y aura seulement les liens normaux (mp, profil, etc)
- est-ce que tu actives les sondages sur ton forum ? et l'affichage des sujets similaires ? Euh les sondages ils vont êtres activés oui :) Mais pour les sujets similaires je t'avoue que je ne vois pas du tout de quoi tu veux parler o_o
- j'aurais besoin que tu me fasses une liste des six champs du profil que tu souhaites voir dans l'inventaire, avec leur intitulé exact, pour que je puisse les intégrer au code. + quels types de champs tu mets dans ta fiche rp, ligne, zone de texte, etc. ? comment est-ce que je distingue les champs de la fiche du reste des champs ? Wow alors là je t'avoue que tu me prends au dépourvu XD J'avais pas pensé qu'il fallait avoir tout ces renseignements-ci Donc les voilà ^^

Pour l'inventaire (les six champs du profil) il y aura :
XP
Race
Caste
Spécialisation
Magie
Armimales

Pour l'xp, il y aura une barre d'xp graphé spécialement pour le champ, tu crois qu'elle va rentrer ? Sinon on peut la mettre au survol de l'avatar et à la place d'XP mettre Pièces d'Or.

Ensuite pour les informations sous l'avatar, en auras-tu besoin ? Sinon concernant les deux dernières questions :

quels types de champs tu mets dans ta fiche rp, ligne, zone de texte, etc. ? Alors là, ce sera XP : Barre d'expérience
Si pas XP mais Pièce d'or : Ligne
Race : Liste de choix
Caste : Liste de choix
Spécialisation : Liste de choix
Magie : Ligne
Armimales : Ligne


comment est-ce que je distingue les champs de la fiche du reste des champs ? J'avoue que je n'ai pas compris la question

Mar 4 Avr - 18:29

Bonsoir !
Du coup j'ai rajouté les sondages, les boutons Profil/MP et j'ai commencé les champs de profil.
Au survol tu auras les messages, inscription, et autre champ (comme tu veux).
Et l'inventaire, avec les pièces d'or (la barre d'exp aurait été longue donc j'ai choisi ce champ-là, elle pourra apparaître au survol du coup) et les autres champs cités, l'apparence n'est pas encore fixe. Je n'ai pas encore mis la feuille rp, sachant que maximum trois champs apparaissent, mais je ferai ça demain. (:
En fait j'ai utilisé le titre de tes champs pour déterminer lequel déplacer dans les cas, si tu veux savoir.
Du coup, est-ce que ça correspond bien à ce que tu demandais ?

Sinon les sujets similaires, c'est ce qu'il y a tout en bas des sujets et qui s'appelle ainsi, normalement tu devrais les voir sur la page que je t'ai donné ?

Mar 4 Avr - 22:57

Aaaaah oui non ça je ne les afficherai pas les sujets similaires ^^ Je trouve qu'ils servent à rien Sinon tout est parfait, je te remercie, c'est totalement dans l'esprit de ce que je voulais '^' Sinon j'ai une question (si tu veux pas faire je m'en occuperai, ça je sais au moins faire ^^'). Crois-tu que pour une question d'esthétisme, lorsque l'on survole l'avatar, celui-ci se grise légèrement ? (je dirais un scalegray d'environ .2/.3 maxi' ^^). Comme dit, si ça t'embête, je peux le faire Pour le online, l'as-tu installé ? comme tu n'es pas en ligne, je me pose la question, parce que je t'ai jamais vu co sur ce forum-là, donc mes excuses si c'est bien mit :)

Merci pour l'explications ^^ Donc en fait tu as mit par ordre de priorité ? Ou c'est pas ça et j'ai compris de travers ? XD

Mer 5 Avr - 10:26

D'accord, du coup j'essaye de continuer cela. (: Et oui c'est possible pour l'avatar, je vais rajouter cela de suite !
Oui, je l'ai mis, on ne doit pas avoir les mêmes horaires de connexion.

Alors j'ai simplement mis les champs dans l'ordre où tu me les as cités. (:

Mer 5 Avr - 13:04

Aaaah je vois Sûrement oui, tu dois être de France ? Je suis du Québec alors Wala, XD Merci pour l'avatar

Jeu 6 Avr - 11:57

Oui, de France, ça explique bien des choses en effet.
Du coup, normalement tout y est : http://sept-cinq-zero.forumactif.org/t6-sujet-avec-sondage (l'avatar est légèrement grisé, je ne sais pas si c'est très visible).
N'hésite pas si tu veux ajouter ou modifier des choses. Sinon je te passe le code (il faut encore que je le nettoie un peu ).

Jeu 6 Avr - 13:28

Waw merci beaucoup c'est parfait

Jeu 6 Avr - 18:32

Les codes du coup.

Le template :

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

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="bord-topic haut">
  <!-- Boutons Nouveau, Répondre, Verrouillé -->
  <div class="boutons-reponse">
 <!-- BEGIN switch_user_authpost -->
    <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /> <span></span></a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /> <span></span></a>
 <!-- END switch_user_authreply -->
  </div>
  
  <!-- Arbre de navigation -->
  <div class="nav-topic">
    <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
  </div>
</div><!-- fin bord-topic -->


<!-- Titre du sujet -->
<h1 class="topic-title">{TOPIC_TITLE}</h1>


<!-- Espace message -->
<div class="messages">
  <!-- Pagination -->
  <!-- BEGIN topicpagination -->
 <div class="gensmall pagination haut">{PAGINATION}</div>
  <!-- END topicpagination -->
  
  <!-- Sondage -->
  <table class="sondage">
    {POLL_DISPLAY}
  </table>
  
  <!-- BEGIN hidden -->
  <div class="hidden">{postrow.hidden.MESSAGE}</div>
  <!-- END hidden -->
  
  <!-- BEGIN postrow -->
  <!-- BEGIN displayed -->
  <div class="message">
    <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
    
    <!-- Colonne gauche -->
    <div class="colonne-auteur">
      <!-- Rang image -->
      <div class="rang-image">
        {postrow.displayed.RANK_IMAGE}
      </div>
      
      <div class="bordure-auteur">
        <!-- Avatar -->
        <div class="avatar-auteur">
          {postrow.displayed.POSTER_AVATAR}
          <div class="survol-avatar">
            <!-- BEGIN profile_field -->
            <div class="champ">
              {postrow.displayed.profile_field.LABEL}
              <div class="field-content">{postrow.displayed.profile_field.CONTENT}</div>
            </div>
            <!-- END profile_field -->
            <!-- Fiche RPG -->
   <div class="rpg">{postrow.displayed.POSTER_RPG}</div>
          </div>
        </div>
        <!-- Nom et rang -->
        <div class="auteur">
          <div class="nom-auteur">{postrow.displayed.POSTER_NAME}</div>
          <div class="rang-auteur">{postrow.displayed.POSTER_RANK}</div>
        </div>
      </div><!-- fin bordure -->
      
      <!-- Inventaire -->
        <div class="inventaire">
          <div class="titre-inventaire">Inventaire</div>
          <div class="un"></div>
          <div class="deux"></div>
          <div class="trois"></div>
          <div class="quatre"></div>
          <div class="cinq"></div>
          <div class="six"></div>
      </div>
     </div>
  
  <!-- Colonne droite -->
  <div class="colonne-message">
    <div class="haut-message">
      <!-- Date -->
      <div class="date">
        {postrow.displayed.POST_DATE}
      </div>
      <!-- Boutons Citer & cie -->
      <div class="boutons">
        {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG}
      </div>
    </div>
    
    <!-- Contenu du message -->
    <div class="postbody">

 <div>{postrow.displayed.MESSAGE}</div>

 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd>
 <!-- BEGIN switch_post_attachments -->
 <dl class="file">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

 <!-- BEGIN switch_dl_att -->
 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
 <!-- END switch_no_dl_att -->
 </dt>

 <!-- BEGIN switch_no_comment -->
 <dd>
 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
 </dd>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <dd>
 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
 </dd>
 <!-- END switch_no_dl_att -->

 <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->

 <div class="clear"></div>

 </div>
    <!-- En ligne -->
    <div class="online">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.ONLINE_IMG}</div>
    
    <!-- BEGIN switch_signature -->
 <div class="signature_div">
          {postrow.displayed.SIGNATURE}
    </div>
    <!-- END switch_signature -->
 
  </div><!-- fin colonne message -->
  
  </div>
  <!-- END displayed -->
  <!-- END postrow -->
  
  <!-- BEGIN no_post -->
  <div class="hidden">{no_post.L_NO_POST}</div>
 <!-- END no_post -->
  
  <!-- Pagination -->
  <!-- BEGIN topicpagination -->
  <span class="gensmall">{PAGE_NUMBER}</span>
 <div class="gensmall pagination bas">{PAGINATION}</div>
  <!-- END topicpagination -->
  
</div><!-- fin messages -->
<div class="bord-topic bas">
  <!-- Boutons Nouveau, Répondre, Verrouillé -->
  <div class="boutons-reponse">
 <!-- BEGIN switch_user_authpost -->
    <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /> <span></span></a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /> <span></span></a>
 <!-- END switch_user_authreply -->
  </div>
  
  <!-- Arbre de navigation -->
  <div class="nav-topic">
    <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
  </div>
</div><!-- fin bord-topic -->

<!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <div class="gensmall watch-topic">{S_WATCH_TOPIC}</div>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->

 <!-- BEGIN switch_user_logged_in -->
 <div class="quick-reply"><a name="quickreply"></a>
                          {QUICK_REPLY_FORM}</div>
 <!-- END switch_user_logged_in -->

<!-- BEGIN show_permissions -->
<div class="permissions">
<table>
 <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>
</table>
</div>
 <!-- END show_permissions -->





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


<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>

 <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

 <!-- BEGIN moderation_panel -->
 <td align="center">
 <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
 </td>
 <td align="center" width="250">
 <span class="gensmall"> </span>
 </td>
 <!-- END moderation_panel -->
 </tr>
</table>
</form>

<!-- 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 -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

Le CSS :

Code:

.bord-topic {
  display: flex;
  justify-content: space-between;
}

/* boutons Nouveau, Répondre, Verrouillé */
.boutons-reponse {
  font-size: 30px;
  line-height: 1;
  font-family: Georgia, serif;
  flex-shrink: 1;
  flex-grow: 1;
  margin-right: 20px;;
}
.boutons-reponse a {
  color: #fffaff;
}
.boutons-reponse img {
  display: none;
}
.boutons-reponse img[alt*="nouveau"] + span:after {
  content: 'Nouveau ';
}
.boutons-reponse img[alt*="Répondre "] + span:after {
  content: 'Répondre ';
}
.boutons-reponse img[alt*="verrouillé"] + span:after {
  content: 'Verrouillé ';
}

/* navigation */
.nav-topic {
  flex-grow: 1;
  flex-shrink: 1;
  text-align: right;
  font-size: 12px;
  line-height: 1;
  font-family: Georgia, serif;
  text-transform: uppercase;
}
.haut .nav-topic { /* en haut de la page */
  padding-top: 15px;
}
.bas .nav-topic { /* en bas de la page */
  padding-bottom: 15px;
}

/* titre du sujet */
h1.topic-title {
  background: #6f505f;
  margin: 0;
  padding: 10px;
  text-align: center;
  color: #fffaff;
  font-size: 30px;
  line-height: 1;
  font-family: Georgia, serif;
}

/* fond message */
.messages {
  background: #928388;
  margin: 0;
  padding: 50px 10px 10px;
  position: relative;
}
.hidden { /* messages masqués */
  text-align: center;
  padding: 20px;
}

/* affichage d'un message */
.message {
  margin-bottom: 20px;
  min-height: 630px;
}

/* pagination */
.pagination.haut {
  position: absolute;
  top: 10px;
  right: 10px;
}
.pagination.bas {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* sondage */
.sondage {
  width: 100%;
  margin: -60px 0 20px;
}
.sondage .row2 {
  background: transparent;
}
.sondage:empty {
  margin: 0;
}

/* colonne auteur */
.colonne-auteur {
  position: relative;
  margin-top: 20px;
}

/* rang image */
.rang-image {
  position: absolute;
  top: -110px;
  left: -220px;
}

/* contenant avatar + pseudo */
.bordure-auteur {
  border: 1px solid #fffaff;
  width: 200px;
  padding: 3px;
  position: absolute;
}

/* avatar */
.avatar-auteur, .avatar-auteur img {
  width: 200px;
  height: 320px;
  transition: all 1s;
}
.avatar-auteur {
  position: relative;
  overflow: hidden;
}

/* survol de l'avatar */
.survol-avatar {
  padding: 10px;
  transition: all 1s;
  background: rgba(255, 250, 255, .9);
  position: absolute;
  top: 320px;
  left: 10px;
  width: 160px;
  height: 280px;
  overflow: auto;
}
.avatar-auteur:hover .survol-avatar {
  transition: all 1s;
  top: 10px;
}

/* avatar grisé au survol */
.avatar-auteur:hover img {
  filter: grayscale(.3);
}

/* champs du profil */
.label {
  font-size: 12px;
  line-height: 1;
  font-family: Georgia, serif;
}
.field-content {
  background: #463138;
  color: #fffaff;
  font-size: 12px;
  line-height: 1;
  font-family: Georgia, serif;
  padding: 3px;
  margin-bottom: 5px;
}

/* fiche rpg */
.rpg {
  font-size: 12px;
  line-height: 1;
  font-family: Georgia, serif;
}
.rpg a {
  background: #463138;
  color: #fffaff;
  font-size: 12px;
  line-height: 1;
  font-family: Georgia, serif;
  padding: 3px;
  display: block;
}
.rpg a + br {
  display: none;
}

/* nom et rang */
.auteur {
  background: #463138;
  padding: 3px;
  text-align: center;
  font-family: Georgia, serif;
}
.auteur, .auteur a span strong {
  color: #fffaff;
}
.nom-auteur {
  font-size: 35px;
  border-bottom: 1px solid #FFF;
  padding-bottom: 3px;
  margin-bottom: 3px;
}
.rang-auteur {
  font-size: 12px;
  line-height: 1;
  font-family: Verdana, sans-serif;
}

/* inventaire */
.inventaire {
  position: absolute;
  top: 400px;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 207px;
}
.inventaire div:empty {
  padding: 0;
}

/* titre de l'inventaire */
.titre-inventaire {
  width: 100%;
  color: #463138;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  font-family: Georgia, serif;
  margin-top: 10px;
  margin-bottom: 5px;
}

/* cases de l'inventaire */
.un, .deux, .trois, .quatre, .cinq, .six {
  background: #463138;
  padding: 5px;
  flex-shrink: 1;
  flex-grow: 1;
  width: 26%;
  position: relative;
  float: left;
}
.un, .deux, .trois {
  margin-bottom: 5px;
}
.un, .deux, .quatre, .cinq {
  margin-right: 5px;
}

/* infobulles inventaire */
.inventaire .label {
  transition: all 1s;
  top: -5px;
  left: -5px;
  display: block;
  position: absolute;
  background: rgba(255, 250, 255, .9);
  color: #463138;
  padding: 3px;
  font: 10px;
  border-radius: 5px;
  opacity: 0;
}
.inventaire > div:hover .label {
  opacity: 1;
}

/* colonne message */
.colonne-message {
  margin-left: 227px;
}

/* date + boutons */
.haut-message {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  line-height: 1;
  font-family: Georgia, serif;
}
.haut-message, .haut-message a {
  color: #fffaff;
}
.date, .boutons {
  flex-shrink: 1;
  flex-grow: 1;
}
.boutons {
  text-align: right;
}
.boutons img {
  display: none;
}
.boutons a {
  padding-left: 13px;
}
/* boutons Citer & cie */
.boutons a[href*="quote"]:before {
  content: 'Citer ';
}
.boutons a[href*="edit"]:before {
  content: 'Éditer ';
}
.boutons a[href*="delete"]:before {
  content: 'Supprimer ';
}
.boutons a[href*="ip"]:before {
  content: 'IP ';
}

/* message */
div.postbody {
  border: 5px solid #463138;
  background: #cbc9bd;
  padding: 10px;
  text-align: justify;
  margin: 5px 0;
  color: #333;
  min-height: 366px;
}

/* signature */
.signature_div {
  min-height: 200px;
  font-size: 12px;
  line-height: 1.3;
  font-family: Verdana, sans-serif;
}
.signature_div br:first-of-type, .signature_div br:nth-child(2) {
  display: none;
}

/* en ligne + autres boutons */
.online {
  text-align: right;
  font-family: Georgia;
  font-size: 15px;
}
.online a img {
  display: none;
}
.online > * {
  padding-left: 15px;
}
.online a {
  color: #FFFAFF;
}
.online a[title*="profil"]:after {
  content: 'Profil ';
}
.online a[title*="message"]:after {
  content: 'Message privé ';
}
.online a[href*="email"]:after {
  content: 'Email ';
}

/* surveiller les sujets */
.watch-topic {
  margin-top: 30px;
  padding: 20px 20px 0;
  text-align: right;
  background: #928388;
}

/* réponse rapide */
.quick-reply {
  padding: 20px;
  background: #928388;
}
.quick-reply table {
  margin: 0 auto;
}
.quick-reply .row2 {
  background: transparent;
}

/* permissions */
.permissions {
  margin-bottom: 20px;
  padding: 20px;
  background: #6f505f;
}
.permissions a {
  color: #FFFAFF;
}
.permissions .row1, .permissions .row2 {
  background: transparent;
}


Le javascript :

Code:

$(function(){
  
  $('.label').each(function() {  
    var labelModif = $(this).text().replace(' : ','');
    var champProfil =  $(this).parents('.champ');
    
    
    // Déplacement des champs
    switch(labelModif) {
      case 'Armimales':
        $(champProfil).parents('.colonne-auteur').find('.six').append(champProfil);
        $('.six').find('.label').html(labelModif);
        break;
          
      case 'Magie':
        $(champProfil).parents('.colonne-auteur').find('.cinq').append(champProfil);
        $('.cinq').find('.label').html(labelModif);
        break;
        
      case 'Spécialisation':
        $(champProfil).parents('.colonne-auteur').find('.quatre').append(champProfil);
        $('.quatre').find('.label').html(labelModif);
        break;          
 
      case 'Caste':
        $(champProfil).parents('.colonne-auteur').find('.trois').append(champProfil);
        $('.trois').find('.label').html(labelModif);
        break;  
        
      case 'Race':
        $(champProfil).parents('.colonne-auteur').find('.deux').append(champProfil);
        $('.deux').find('.label').html(labelModif);
        break;

      case 'Pièces d\'Or':
        $(champProfil).parents('.colonne-auteur').find('.un').append(champProfil);
        $('.un').find('.label').html(labelModif);
        break;
          
    }
    
  });
  
});

Vérifie quand même que le titre de chacun de tes champs est bien identique à ceux écrits dans le code. Sinon, il suffit de modifier comme ceci : case 'Label': en respectant la casse, et normalement ça devrait marcher.

N'hésite pas s'il y a un bug quand tu installes tout ça.

Jeu 6 Avr - 19:28

Bijour    
Je passe faire une toute pitite commande si tu le veux bien \o/

Commande

Type de commande : Fiche
Maquette(s) : https://www.zupimages.net/up/17/14/fjrf.png
Image(s) à insérer :https://www.zupimages.net/up/17/14/2r1d.png pour le fond
Précisions : Couleur en blanc pour les écritures - La police c'est du Orator Std (mais de l'Arial convient parfaitement aussi sans problème) - Pour le petit cadre à image si elle pouvait se redimensionner automatiquement en 150*100, et un scroll si le message s'allonge, c'est tout ce que j'aurais à demander XD.

Merci bien

Jeu 6 Avr - 20:53

Coucou Lys !
Je te fais quelque chose demain. Je verrai si j'arrive à trouver la police que tu désires. Simplement, est-ce que tu aurais une autre version de ton image de fond ? à moins que les carrés du transparent fassent partie du fond désiré, j'aurai un peu de mal à l'utiliser en l'état. (:

Jeu 6 Avr - 20:57

Ah non du tout, ma faute je l'ai mal enregistré x)

du coup, la revoilà https://www.zupimages.net/up/17/14/sr4s.png