Isoler les champs de profil dans la page du profil

[Terpsychor_]

Version du forum : ModernBB
Screen : https://images2.imgbox.com/1e/ac/4QIxRfLE_o.png

Bonjour,
Utilisant le blank theme de genius panda, je désire néanmoins totalement personnaliser le look de mon forum. M'attelant à la mise en page de ma page de profil ( celle qui se termine par /u1 ) je me retrouve face à une petite impasse.

En effet, je souhaiterais isoler chaque champ ( age, messages, métier etc ) afin de pouvoir les déplacer dans 4 tableaux différents spécifiques ( ramener les informations perso ensemble, les informations IRL ensemble, la zone libre toute seule etc ) et si j'ai, grâce a plusieurs tutos trouvés ici et là, réussi à faire cela sur l'affichage des profils dans un sujet, je ne parviens pas à le faire sur la page de profil.

voici mon profile_view_body

Code:

<!-- IMPORTANT!!-->
<!-- ACTIVATE SIMPLE PROFILE: Users & Groups › Profiles › General options › Activate advanced profile: no -->

<br/><!-- Username -->
  <center><div class="cate_title"><h2>{USERNAME}</h2></div></center>

<div class="bigprofil">  
<!-- Avatar -->
  <div class="profile_avatar" id="user_avatar"><span id="avatar_membre"> {AVATAR_IMG}</span></div>

<div class="container" id="wombat">

      <!-- Profile contents -->
    <div class="user_profile">

      
        <!-- Profile info -->
        <div class="profile_infos">

          <div class="profilepreinfo">
            <!-- Status: online -->
            <!-- BEGIN switch_show_status -->
          <div class="boutonprofil">{USER_ONLINE}</div>
            <!-- END switch_show_status -->

<!-- "Last visited" field -->
           <div class="boutonprofil">{LAST_VISIT_TIME}</div>
              
            <div class="boutonprofil"><a rel="nofollow" href="/sta/{PUSERNAME}" id="alltopics">{L_TOPICS}</a></div>
            <div class="boutonprofil"><a rel="nofollow" href="/spa/{PUSERNAME}" id="allposts">{L_POSTS}</a></div>
            
            </div>

          
  
            <!-- PROFILE FIELDS -->
            <div class="profile_content">

              <div style="display:flex;flex-direction:row;"><div class="userg"><div class="prof_perso"></div><div class="prof_irl"></div></div><div class="userd"></div><div class="prof_infos"></div><div class="prof_freestyle"></div></div>

                <!-- Other fields -->
                <!-- BEGIN profile_field -->
                <div class="profile_field" id="field_id{profile_field.ID}">
                 <label>{profile_field.LABEL}</label><field>{profile_field.CONTENT}</field>
              </div>
                <!-- END profile_field -->

              
               <!-- Character sheet -->
                <!-- BEGIN switch_rpg -->
                <!-- BEGIN rpg_fields -->
              <div class="profile_field" ><label>{switch_rpg.rpg_fields.F_NAME} :</label><field>{switch_rpg.rpg_fields.F_VALUE_NEW}</field></div>
                <!-- END rpg_fields -->

                <fieldset class="submit-buttons">{U_ADMIN_RPG_NEW}</fieldset>
                <!-- END switch_rpg -->


            </div>
            <!-- End of profile fields -->

           <div class="profile_contact">
                <!-- Contact image link -->
                <form action="{S_PROFILE_ACTION}" method="post" name="post">
                    <!-- BEGIN contact_field -->
                    <div id="field_id{contact_field.ID}">{contact_field.CONTENT}</div>
                    <!-- END contact_field -->
                </form>
            </div>
          
        </div>


    </div>

    <!-- Liens de modération -->
    <div class="profile_admin">
      
       <!-- Bouton d'administration du membre -->
        <!-- BEGIN switch_auth_user -->
        {ADMINISTRATE_USER}{BAN_USER}
        <!-- END switch_auth_user -->
    
    </div>

  

</div></div>




<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 voici le CSS associé :

Code:

/*** PAGE DE PROFIL ---------------- ***/
.bigprofil {
  display:flex;
}

.label {
  font-family: var(--fontA);
    color: var(--colorA);
    font-weight: 600;
    text-transform: uppercase;
}

.userg, .userd {
display: flex;
    flex-direction: column;
    width: 49%;}

.userd {  }
.userg { margin-right: 11px; }

.prof_perso { height: 152px; }
.prof_irl { height: 152px; }
.prof_infos { height: 152px; }
.prof_freestyle { height: 152px; }

.user_profile {   background: var(--neutralDark);
    height: 480px;
  width: 650px;
    overflow: auto;
border-radius: 0px 20px 20px 0px;}

.profile_avatar { width: 250px; }

.profile_avatar img { border-radius: 20px 0px 0px 20px; }

.profilepreinfo { padding: 10px 20px;
    display: flex;
    justify-content: space-around; }


.profile_infos {   }

.profile_contact {  }

.profile_contact form {
  display: flex;
    justify-content: center;}

.profil_rank { }

.profile_contact form > div {  margin-left: 5px;}

/* Suppression des cases vides de contact qui affichent " -"
 * nth-child(n+4) supprime toutes les cases après la quatrième */
.profile_contact form div:nth-child(n+4) {
    display: none
}
#field_id13 { margin-bottom: 10px; }
#field_id13 > label  { font-size: 0px; background: none; }

#field_id13 img {width: 300px;
    height: 150px;
    object-fit: cover;
    padding: 2px;
    border-radius: 10px;
   margin-left: -90px;
    filter: opacity(0.8);}

.profile_content { background: var(--neutral);
    padding: 20px 50px;
    margin: 0px 25px;
    height: 410px;
    overflow: auto;
    border-radius: 10px;
    text-align: justify;}

.profile_field { display: grid;
    grid-template-columns: 160px auto;
    grid-gap: 30px;
    align-items: baseline;
margin-bottom: 10px;}

.profile_field label,
.profile_field label > span {  font-family: var(--fontA);
    text-transform: lowercase;
    color: var(--colorB);
    font-size: 13px;}

.profile_field field {    position: relative;}

.profile_admin {    text-align: center;
    margin: 10px 0 0;}

et j'ai utilisé ce javascript pour l'affichage dans un sujet :

Code:

jQuery(function () {
    var versionForum = 'ModernBB',
        $chemin,
        $eltParent = '.post';

    $chemin = ".post .post_profile .infos-posteur";
    $( $chemin ).each(function( index ) {
        var champs = $(this).find('.label').html() ;
      if( champs == "⊰ décades : "  champs == "⊰ endocarde : "  champs == "⊰ besogne : "  champs == "⊰ alcôve  : "  champs == "⊰ marque : " ){
            $(this).parents($eltParent).find('.infos-supp').append(this);
 
        }
 
    });
});

Dois-je réutiliser ce-même javascript en changeant le chemin, parent et enfant ? Y a-t-il un autre js qui puisse me permettre de réaménager l'emplacement des label sur la page du profil ?

Merci d'avance pour le temps que vous accorderez à ma demande et mon petit soucis

[Invité]

Hello ! Ce ne sont pas les mêmes balises dans l'affichage du profil, donc il faut cibler ces balises, il me semble néanmoins qu'isoler les champs dans le profil simple et plus simple puisqu'ils possèdent déjà un numéro/une id, les créateur.ice.s du blank theme sont sur le discord "Le Piscine" donc ils pourront plus facilement t'aider là-bas !