Intégrer des iframes

Bonsoir !  

Tout d’abord, merci pour ce thème merveilleux et pour l’aide que tu nous apportes ! J’aime énormément ton travail. Je travaille actuellement sur un forum test et je le customise, c’est  vraiment que du bonheur ! Tout est si fluide, si bien agencé. Merci, merci, merci ! <3

Je t’écris car je rencontre une petite difficulté, enfin, c’est plus une question.  

Alors… J’ai réalisé une PA en iframe. Pour tout centraliser au même endroit et éviter les conflits avec le CSS principal de mon forum, surtout. Puis, je n’ai plus vraiment la place dans mon CSS et tous mes codes ne rentrent pas non plus dans le template, mais ça, c’est une autre histoire haha. (trop d’informations dans ma PA /pan/)

Elle est bien installée et tout, avec une balise code qui renvoie à l’iframe, sur le template index_body, mais… Le souci qui se pose ce sont les couleurs qui ne peuvent pas switcher avec les plugins, forcément, puisque la PA apparaît grâce à l'iframe et n'est pas rattachée au CSS principal + html.

Je me demandais donc…  comment intégrer ma PA en iframe et l’adapter au plugin de changement de thème sombre/clair de Monomer ?

J’ai essayé de passer par le « :root » mais ça ne fonctionne pas (ou alors, je m’y prends très très mal). Est-ce que tu aurais une solution à m’apporter, donc soit effectivement de passer par le raccourci :root avec le bon code, ou une autre petite astuce pour proposer un changement d’iframe en passant du thème clair au thème sombre du Blank Theme ? Éventuellement, j’aimerais soit que le CSS puisse parfaitement s'harmoniser, soit deux PA bien distinctes intégrées à l'un des thèmes apparaissant au moment du switchage. Si cela est possible, car j'ignore comment m'y prendre... et si c'est d'ailleurs envisageable en termes de codage  

Si jamais tu penses à une alternative, je te serais extrêmement reconnaissante

Je te remercie en tout cas d’avance pour ton aide et tes conseils et te souhaite une excellente journée !

Et une très belle année 2023, puisqu’on est encore en janvier  

Spice

Heyy! Merci pour ton message

Je n'ai malheureusement pas de solution à t'apporter. Comme tu l'as dis, tu as créé une HTML vierge pour éviter de entrer en collision avec ton CSS donc par extension, le plugin Edison qui gère que le CSS de ton forum ne peut atteindre le CSS de ta page. :/

Il y aurait bien des techniques alternatives (comme notamment faire ta PA dans un template) mais ça devient une question un peu trop poussée. Je ne m'occupe ici que du support en cas de problème avec le code source.
Si besoin, tu peux toujours passer par mes commissions pour qu'on règle ça plus en détails.

A très vite!

Bonsoir Kim

Je te remercie pour tes explications et oui, c'est ce que je craignais

Du coup, oui, je vais regarder pour une alternative directement dans le template et si je n'arrive pas à mettre en place, je serais très heureuse que tu m'aides par le biais de tes commissions

En attendant, je viens de remarquer un petit souci technique par rapport au JS des champs du profil. Je ne sais pas si je peux dévier le sujet d'aide puisque j'étais d'abord venue pour les iframes

J'ai installé un profil en onglets en m'aidant du tutoriel de Velunes (https://velunes.forumactif.com/t93-profil-en-onglets-isoler-les-champs-en-reecriture), alors tout marche très bien et s'incorpore à ton thème de base, sauf que lorsque je tente de déplacer les champs via l'option de Monomer sur le JS que tu proposes, les champs ne veulent pas bouger

Par exemple, deux images :

Spoiler:

Il me semble avoir indiqué les noms des champs comme conseillé directement sur le JS, mais quelque chose m'échappe

Je te montre ton JS que j'ai un peu modifié pour indiquer les champs à déplacer :

Code:

// PLACEMENT : Sur les sujets

// [SPANISH] by Flerex
// https://flerex.dev/entradas/clases-unicas-a-los-campos-del-miniperfil

// Options, by Monomer
// Possibilité de déplacer un champs dans un autre élément

!function() {

   const settings = {
                semicolon: false, // false = retire les (:) après un nom de champs
      cleanUp: true,
          
          // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
          move: ['.notes', '.gif-2', '.origines', '.age-rp', '.localisation', '.quartier', '.occupation', '.allegeance', '.convictions', '.cote-coeur', '.dollars', '.gif-4'], // Nom du champs en MINISCULE et SANS ACCENT (exemple : 'message') et séparer les champs à deux mots par un tiret (exemple : 'etat-civil')
          moveTo: '.rpg' // élément dans lequel les champs seront déplacés
   },

           // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
          move: ['.citation', '.gif-4', '.objectifs'], // Nom du champs en MINISCULE et SANS ACCENT (exemple : 'message') et séparer les champs à deux mots par un tiret (exemple : 'etat-civil')
          moveTo: '.other' // élément dans lequel les champs seront déplacés
   },
          
    

   slugify = str => {
        const from = 'àáäâãåăæçèéëêǵḧìíïîḿńǹñòóöôœøṕŕßśșțùúüûǘẃẍÿź·/_,:;',
        to = 'aaaaaaaaceeeeghiiiimnnnooooooprssstuuuuuwxyz------',
        reg = new RegExp(from.split('').join('|'), 'g');

        return str.trim().toLowerCase()
              .replace(/\s+/g, '-')
              .replace(reg, c => to.charAt(from.indexOf(c)))
              .replace(/&/g, '-and-')
              .replace(/[^\w\-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/^-+/, '')
                .replace(/-+$/, '');
    },

    hideSemicolon = (label, name) => {
        if (label.firstElementChild)
            label.lastChild.remove();
        else
            label.textContent = name;
    },

    main = _ => {

       document.querySelectorAll('.user_field').forEach(p => {
          const labelcontainer = p.querySelector('.field_label'),
          label = labelcontainer.querySelector('.label'),
            name = label.textContent.replace(/ *: *$/, ''),
          slug = slugify(name);

          p.classList.add('field-' + slug);
             
          if(settings.move.includes(slug)) {
          p.closest('.post_profile').querySelector(settings.moveTo).appendChild(p);
        }

          if (settings.cleanUp) {
          labelcontainer.textContent = settings.semicolon ? name + ': ' : name;
          } else if (!settings.semicolon) {
                hideSemicolon(label, name)
          }
       });

    };

    document.addEventListener('DOMContentLoaded', main);
}();

Et le template intégral viewtopic_body :

Code:

<br />

 <style>
 
</style>


<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->

 <div class="links_bar">
  
      
      <!-- Boutons : nouveau -->
        <!-- BEGIN switch_user_authpost -->
        <a class="buttons" href="{U_POST_NEW_TOPIC}" rel="nofollow"><img class="newtopic_button" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a> 
        <!-- END switch_user_authpost -->

   <div style="margin: 5px; display: inline-block; padding-right: 5px;"> • </div>
  
        <!-- Bouton : répondre -->
        <!-- BEGIN switch_user_authreply -->
        <a class="buttons" href="{U_POST_REPLY_TOPIC}"><img class="reply_button" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
        <!-- END switch_user_authreply -->
  
        <!-- Pagination -->
        <span class="pagination right">
            {PAGINATION}
        </span>
        

  
</div>

  <!-- Liste des participants du sujet -->
    {POSTERS_LIST}

<!----------------------------------------------->
<!-- MESSAGE -------------->


<!-- Contenenur des messages -->
<div class="container">

    <!-- Titre du poste -->
    <h1 class="page-title">{TOPIC_TITLE}</h1>
  
  
<!----------------------------------------------->
<!-- LIENS DE NAVIGATION -------------->

<div class="navigation_links-2">

    <!-- Chaîne de lien : Catégorie > Forum > Sous-fo -->
    <span class="navigation_chain">
        {NAV_CAT_DESC}
    </span>

</div>
  
  
    <!-- Sondage (template : viewtopic_poll_ballot /// viewtopic_poll_result) -->
    {POLL_DISPLAY}


    <!-- Affichage d'un message -->
    <!-- BEGIN postrow -->
    <!-- BEGIN displayed -->
    <div id="{postrow.displayed.U_POST_ID}"></div>
    <div class="post post_row post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}">

        <!-- Conteneur informations du message-->
        <div class="post_details">

            <span class="post_date">
                          
            </span>
              
          <div class="ligne-hori-sujet"></div>
          
          <div class="ligne-vert-sujet"></div>
          
                <!-- Boutons d'édition de message -->
      
                <ul class="profile-icons ">
                    <li>{postrow.displayed.QUOTE_IMG}</li>
                    <li>{postrow.displayed.EDIT_IMG}</li>
                    <li>{postrow.displayed.DELETE_IMG}</li>
                    <li>{postrow.displayed.IP_IMG}</li>
                </ul>
          
                <!-- Conteneur du bouton like -->
                <!-- BEGIN switch_likes_active -->
                <div class="like_button">

                    <!-- Bouton "j'aime" -->
                    <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}" data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">

                        <!-- Texte "j'aime" -->
                        <span class="like_text">{postrow.displayed.switch_likes_active.L_LIKE}</span>
                        <!-- Compte des "j'aime" -->
                        {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}

                    </button>
                </div>
                <!-- END switch_likes_active -->
                <!-- Fin du bouton like -->


        </div>
        <!-- Fin détails -->


        <!-- Colonne de profil -->
        
        <div class="post_profile" id="profile{postrow.displayed.U_POST_ID}">
<!-- En ligne -->
            <center>
                <div class="online"> <!-- VOIR CSS .online -->
                 {postrow.displayed.POST_DATE_NEW}<!-- Textuel -->
                </div>
          </center><br />
               <center> <div class="hautprofile">
                <!-- Pseudo -->
                <div class="post_pseudo">{postrow.displayed.POSTER_NAME}</div>
          <span class="post_rank"> <div class="porank">{postrow.displayed.POSTER_RANK_NEW}</div> </span><!-- Textuel -->
          </div>    </center>

            <!-- Avatar -->
            <div class="post_avatar">
                {postrow.displayed.POSTER_AVATAR}
            </div>
           <!-- Rang -->
              <center>  <span class="post_rank"><div class="postimgmodif">
                  {postrow.displayed.RANK_IMAGE}</div> <!-- Image -->
                </span></center>

            <br />  

              
           <div class="ligne-onglet-sujet"></div>
  
               <div class="post_userinfo">
               <div class="systab">
  <div class="selected">
    <span>IRL ▴ INFOS</span>

  <!-- Champs de profil -->
         <span class="profil"> <!-- BEGIN profile_field --><div class="infos-posteur">
        
   <!-- Label d'un champs de profil -->
           <span class="profil_label"><strong>{postrow.displayed.profile_field.LABEL}</strong></span>
              
<!-- Contenu d'un champs de profil -->
 <span class="profil_content">{postrow.displayed.profile_field.CONTENT}</span>
              
<!-- Séparateur entre champs de profil -->
                <span class="profil_separator">{postrow.displayed.profile_field.SEPARATOR}</span>
          
           </div> <!-- END profile_field --> </span>
  
                 </div>
  <div>
    <span>INRP ▴ INFOS</span>
    <div class="rpg"><!-- Champs de profil de la feuille de personnage -->
{postrow.displayed.POSTER_RPG}</div>
  </div>
  <div>
    <span>INRP ▴ POUVOIRS</span>
    <div class="other"><!-- Les champs seront déplacés ici --></div>
  </div>
</div>

            </div>

            <br />
            <br />

            <!-- Lien de contact -->
            <div class="profil_contact">
                {postrow.displayed.PROFILE_IMG}   <!-- Profil -->
                {postrow.displayed.PM_IMG}   <!-- MP -->
                 <!-- Autre contact-->
                <!-- BEGIN contact_field -->
                {postrow.displayed.contact_field.CONTENT} <!-- Autre champs de contact -->
                <!-- END contact_field -->
            </div>

      </div>
        <!-- Fin colonne profil -->

      
        <!-- Contenu du message -->
        <div class="post_message postbody content">
            <div>{postrow.displayed.MESSAGE}</div>

            <!-- Signature -->
            <!-- BEGIN switch_signature -->
            <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
            <!-- END switch_signature -->

        </div>
        
        <!-- Fin du contenu du message -->
    </div>

    <!-- END displayed -->
    <!-- END postrow -->
    <!-- Fin affichage d'un message -->

</div>
<!-- Fin des messages -->

<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->

<div style="text-align: center;">
<div class="links_bar">
  
    
        <!-- Lien "surveiller le sujet" -->
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
        <span class="specials_links">{S_WATCH_TOPIC}</span>
        <!-- END watchtopic -->
        <!-- END switch_user_logged_in -->
  
   <div style="margin: 5px; display: inline-block; padding-left: 5px; padding-right: 5px;"> • </div>

    
        <!-- BEGIN switch_plus_menu -->
        <!-- Lien "sujets surveillés" -->
         <a class="specials_links" href="{U_WATCHSEARCH_JS_PLUS_MENU}">Sujets surveillés</a>
        <!-- END switch_plus_menu -->


  
    <!-- Pagination -->
    <!-- BEGIN topicpagination -->
    <span class="pagination right">{PAGINATION}</span>
    <!-- END topicpagination -->

</div>
</div>

<!----------------------------------------------->
<!-- REGLES DE LA CATEGORIE (si activé) -------------->

<!-- BEGIN switch_forum_rules -->
<div class="panel" id="forum_rules">

    <!-- Titre "règlement" -->
    <div class="h3">{L_FORUM_RULES}</div>

    <!-- Règlement -->
    <div class="postbody">
        <!-- Image du règlement -->
        <!-- BEGIN switch_forum_rule_image -->
        <img class="left logo" src="{RULE_IMG_URL}" alt="" />
        <!-- END switch_forum_rule_image -->

        <!-- Contenu -->
        {RULE_MSG}
    </div>

</div>
<!-- END switch_forum_rules -->


<!----------------------------------------------->
<!-- REPONSE RAPIDE -------------->

<div class="container quickreply" id="quickreply_content">
    <!-- BEGIN switch_user_logged_in -->
    {QUICK_REPLY_FORM}
    <!-- END switch_user_logged_in -->
</div>



<br />
<!----------------------------------------------->
<!-- BOUTONS DE MODERATION -------------->

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}" class="right">
    <fieldset class="quickmod">
        <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}" />
        <label>{L_MOD_TOOLS}: </label>
        {S_SELECT_MOD} 
        <input class="button2" type="submit" value="{L_GO}" />
    </fieldset>
  <span class="right">{S_TOPIC_ADMIN}</span>
</form>
<!-- END viewtopic_bottom -->



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

<!-- Script image recadré -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
    //<![CDATA[
    $(resize_images({
        'selector': '.postbody .content',
        'max_width': {
            switch_image_resize.IMG_RESIZE_WIDTH
        },
        'max_height': {
            switch_image_resize.IMG_RESIZE_HEIGHT
        }
    }));
    //]]>
</script>
<!-- END switch_image_resize -->


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

Et le CSS aussi (modifié du coup) :

Code:

/*** ------------------------------- ***/
/*** PROFIL MISE EN PAGE --------------- ***/

.other, .profil { font-size: 11px !important; line-height:normal; font-family: 'Nunito Sans'; text-align: center; }

.other .label, .profil .label {  background: var(--sous-fond);  font-family: 'Playfair Display'; line-height:normal;   font-size:9px !important;  font-weight: 700; border-radius:4px; padding: 3px; margin-bottom: 20px; margin: 10px; text-transform: uppercase; }

.postdetailinfo { overflow-y: auto; height: 150px; }

.rpg::-webkit-scrollbar, .profil::-webkit-scrollbar { width: 5px; }

.rpg { margin-left: -5px; }

.rpg textarea { width:190px; height: 100px; line-height:normal; font-family: 'Source Code Pro', monospace; font-size: 10px; }

input,textarea, select { border : 1px solid var(--fond-credit); background-color: var(--fond-titre); box-shadow: 0px 1px 1px var(--ombre); }

/* LABEL D'UN CHAMP DE PROFIL */

.profil_label {   color: var(--texte-champ-profil);  }

/* CONTENU D'UN CHAMP DE PROFIL */

.profil_content { padding: 6px;  display: block; text-shadow: 1px 1px 1px var(--ombre); text-align: justify; justify-content: space-between;  }

/* BLOC DU PROFIL */

.infos-posteur {  margin-bottom: -9px; margin-top: -10px; margin-left: 5px; margin-right: -5px; padding: 2px; padding-top: 10px; color: var(--textColor); background-color: var(--fond-image); border-radius: 5px;  }

/*** PROFIL - MORCELLEMENT ***/

.profil_content.field_image .label { display:none; }
.profil_content.field_messages .label { display:none; }
.profil_content.field_messages { background:white; }
.infos-posteur strong { color: var(--texte-champ-profil); }
.field_gif strong, .field_gif-2 strong, .field_gif-3 strong, .field_gif-4 strong { display: none; text-align: center; }
.field_notes strong { display: none; font-style: none;  }
.field_gif, .field_gif-2, .field_gif-3, .field_gif-4 { display: block; margin-left: auto; margin-right: auto; }
.field_notes {  text-align: center; font-family: 'Times New Roman'; color: var(--textColorAccent); }
.field_citation strong { display: none; }
.field_sexe { display: none; }
.field_citation { text-transform: uppercase; text-align: justify; font-style: italic; font-family: courier new; letter-spacing: 1px; font-size: 9px; color: var(--textColor); padding: 5px; }
.field_objectifs { text-transform: uppercase; font-family: courier new; font-size: 9px; margin-top: 10px; padding:10px; border: 1px solid var(--border-ligne); background: var(--ombre); border-radius: 10px; text-align: justify; }
.field_multicomptes {  position: relative; top: 20px; left: 0px; }

.profil_content img { /* pour cibler spécifiquement les images dans un champ de profil */ width:150px; height: auto;   border: 1px var(--border-ligne) solid; text-align: center; background-color: var(--ombre); padding: 5px; border-radius: 30px; }
.profil_content img:hover { /* pour cibler spécifiquement les images dans un champ de profil */    border: 1px var(--border-pop) solid; }

/*** ------------------------------- ***/
/*** PROFIL SYSTEME ONGLET --------------- ***/

/* .systab .tab => les onglet */
.systab .tab { margin-top: -5px; box-shadow: 0px 1px 1px var(--ombre); background: var(--fond-credit); border: 1px solid var(--fond-image); text-shadow: 0px 1px 1px var(--grad4); color: var(--grad2); cursor: crosshair; letter-spacing: 1px; text-align: center; padding: 5px; width: 58px; margin-left: 5px; margin-right: 2px; font-family: 'DM Serif Display'; text-transform: uppercase; font-weight: bold; border-radius: 10px; font-style: italic; font-size: 7.5px; transition-duration: 1s; align-items: center; display: inline-block; margin-bottom: 15px; }

/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover { color: var(--fond-image); text-shadow: 0px 1px 1px var(--grad2); background-image: linear-gradient(140deg, var(--grad2), var(--grad4), var(--grad3)); transition-duration: 1s; }

/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{ color: var(--textColorAccent); border:1px solid var(--border-ligne); color: var--(ombre); text-shadow: 1px 1px 1px var(--ombre); }

/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents { height: 303px; padding-top: 15px; margin-top: 5px; text-align: justify; padding-right: 10px; margin-bottom: 1px; background-color: var(--border-ligne); color: var(--textColor); flex: 1; font-size: 10px; border: 1px solid var(--fond-credit);  border-radius: 3px; }

.systab img { margin-left: 5px;  }

.systab strong { text-transform: uppercase; }

/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px; }

/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents { float: left; }

D'ailleurs, au sujet du JS, j'ai changé de "true" à "false" pour enlever les ":" après un champ de profil, mais ça ne fonctionne pas non plus  (d'ailleurs, comment on fait si jamais on veut modifier le symbole ? même si dans mon cas, j'aimerais simplement enlever les ":", mais par curiosité )


Je te remercie d'avance pour tes conseils et te souhaite une très belle soirée  

Hey!

Essaye plutôt avec ce JS :

Code:

// PLACEMENT : Sur les sujets

// [SPANISH] by Flerex
// https://flerex.dev/entradas/clases-unicas-a-los-campos-del-miniperfil

// Options, by Monomer
// Possibilité de déplacer un champs dans un autre élément

!function() {

   const settings = {
                semicolon: false, // false = retire les (:) après un nom de champs
      cleanUp: true,
          
          // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
          moveRpg: ['.notes', '.gif-2', '.origines', '.age-rp', '.localisation', '.quartier', '.occupation', '.allegeance', '.convictions', '.cote-coeur', '.dollars', '.gif-4'], // Nom du champs en MINISCULE et SANS ACCENT (exemple : 'message') et séparer les champs à deux mots par un tiret (exemple : 'etat-civil')
          moveToRpg: '.rpg' // élément dans lequel les champs seront déplacés
   },

           // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
          moveOther: ['.citation', '.gif-4', '.objectifs'], // Nom du champs en MINISCULE et SANS ACCENT (exemple : 'message') et séparer les champs à deux mots par un tiret (exemple : 'etat-civil')
          moveToOther: '.other' // élément dans lequel les champs seront déplacés
   },
          
    

   slugify = str => {
        const from = 'àáäâãåăæçèéëêǵḧìíïîḿńǹñòóöôœøṕŕßśșțùúüûǘẃẍÿź·/_,:;',
        to = 'aaaaaaaaceeeeghiiiimnnnooooooprssstuuuuuwxyz------',
        reg = new RegExp(from.split('').join('|'), 'g');

        return str.trim().toLowerCase()
              .replace(/\s+/g, '-')
              .replace(reg, c => to.charAt(from.indexOf(c)))
              .replace(/&/g, '-and-')
              .replace(/[^\w\-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/^-+/, '')
                .replace(/-+$/, '');
    },

    hideSemicolon = (label, name) => {
        if (label.firstElementChild)
            label.lastChild.remove();
        else
            label.textContent = name;
    },

    main = _ => {

       document.querySelectorAll('.user_field').forEach(p => {
          const labelcontainer = p.querySelector('.field_label'),
          label = labelcontainer.querySelector('.label'),
            name = label.textContent.replace(/ *: *$/, ''),
          slug = slugify(name);

          p.classList.add('field-' + slug);
            
          if(settings.moveRpg.includes(slug)) {
          p.closest('.post_profile').querySelector(settings.moveToRpg).appendChild(p);
        }

if(settings.moveOther.includes(slug)) {
          p.closest('.post_profile').querySelector(settings.moveToOther).appendChild(p);
        }

          if (settings.cleanUp) {
          labelcontainer.textContent = settings.semicolon ? name + ': ' : name;
          } else if (!settings.semicolon) {
                hideSemicolon(label, name)
          }
       });

    };

    document.addEventListener('DOMContentLoaded', main);
}();

Le fait que tu as déplacé les éléments dans deux endroits différents a posé problème, il fallait précisé dans le code qu'il y avait deux déplacements.

Pour modifier les : tu peux le faire via template en ajoutant un symbole entre la balise du label et du contenu ou alors par CSS en utilisant un pseudo-element :after par exemple!

Dis moi ce qu'il en est

Hey Kim

Alors j'ai changé le JS mais les champs ne veulent toujours pas bouger du premier onglet (et la technique de la ligne -- semicolon: false, // false = retire les ( : ) après un nom de champs -- ne marche pas non plus) ;-(

Je ne sais pas s'il y a quelque chose fait conflit, car à l'exception d'un JS que j'ai ajouté pour pouvoir modifier les champs du profil "à la main" + un autre JS pour les onglets du profil + un JS pour renommer les champs de la barre de navigation, j'ai gardé tous ceux initialement installés avec le Blank Theme.

J'ai quand même testé le JS en enlevant celui que j'avais ajouté pour pouvoir modifier via le CSS les champs de profil au cas par cas, juste au cas où, mais ça n'a pas solutionné le souci non plus.

C'était celui-là :

Code:

$(function() {
  //* renomme les champs *//
  for (var field = $('.infos-posteur'), i = 0, j = field.length; i < j; i++) {
    field[i].className += ' field_' + $('.label', field[i]).text().toLowerCase().replace(/ : /, '').replace(/[^a-z0-9]/g, function(s) {
        var c = s.charCodeAt(0);
        if (c == 32) return '-';
        return '__' + ('000' + c.toString(16)).slice(-4);
    });
  }
});

Et celui pour les onglets du tutoriel de Velunes au cas où :

Code:

$(function() {
    // clic sur un onglet
    var d = function() {
        // si l'onglet est déjà actif, ne rien faire
        if ($(this).is(".selected")) return;
        // affiche le contenu correspondant et on met l'onglet en sélectionné
        var a = $(this).closest(".systab");
        a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
        $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
    };
    // pour chacun des systèmes d'onglets
    $("div.systab").each(function() {
        var a = $("> div", this).detach(),
            c = this,
            b;
        // on ajoute le conteneur d'onglet avant ou après ( si s_bottom )
        $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
            "tabs" : "contents") + '"></div>');
        $(a).each(function() {
            b = $(this).children(":first");
            b.is("span") ? (
                $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
        });
        $("> div.contents", this).append(a);
        b = $(".content:first,.content.selected", this).last();
        $(b).addClass("selected").siblings().hide();
        $(b).data("tab").addClass("selected")
    }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
});

Les champs du profil restent récalcitrants

Merci d'avance et encore merci pour ton temps

Hey ! Excuse moi du délais j'ai eu du mal à me poser pour regarder plus en détails ton problème ):

Le pire c'est qu'en le faisant, je me rends compte que l'erreur était peut-être pas si compliqué. Visiblement puisque tu as changé le nom des classes, le script initial du blank pouvait difficilement fonctionner.

Le script de Velune ne pose pas de problème, garde-le. Par contre, retire celui pour renommer les champs.

Normalement, cela devrait fonctionner avec les modifications nécessaires :

Code:

// PLACEMENT : Sur les sujets

// [SPANISH] by Flerex
// https://flerex.dev/entradas/clases-unicas-a-los-campos-del-miniperfil

// Options, by Monomer
// Possibilité de déplacer un champs dans un autre élément

!function() {

  const settings = {
              semicolon: false, // false = retire les (:) après un nom de champs
    cleanUp: true,
       
        // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
        moveRpg: ['.notes', '.gif-2', '.origines', '.age-rp', '.localisation', '.quartier', '.occupation', '.allegeance', '.convictions', '.cote-coeur', '.dollars', '.gif-4'], // Nom du champs en MINISCULE et SANS ACCENT (exemple : 'message') et séparer les champs à deux mots par un tiret (exemple : 'etat-civil')
        moveToRpg: '.rpg' // élément dans lequel les champs seront déplacés
  },

          // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
        moveOther: ['.citation', '.gif-4', '.objectifs'], // Nom du champs en MINISCULE et SANS ACCENT (exemple : 'message') et séparer les champs à deux mots par un tiret (exemple : 'etat-civil')
        moveToOther: '.other' // élément dans lequel les champs seront déplacés
  },
       
 

  slugify = str => {
      const from = 'àáäâãåăæçèéëêǵḧìíïîḿńǹñòóöôœøṕŕßśșțùúüûǘẃẍÿź·/_,:;',
      to = 'aaaaaaaaceeeeghiiiimnnnooooooprssstuuuuuwxyz------',
      reg = new RegExp(from.split('').join('|'), 'g');

      return str.trim().toLowerCase()
            .replace(/\s+/g, '-')
            .replace(reg, c => to.charAt(from.indexOf(c)))
            .replace(/&/g, '-and-')
            .replace(/[^\w\-]+/g, '')
              .replace(/\-\-+/g, '-')
              .replace(/^-+/, '')
              .replace(/-+$/, '');
  },

  hideSemicolon = (label, name) => {
      if (label.firstElementChild)
          label.lastChild.remove();
      else
          label.textContent = name;
  },

  main = _ => {

      document.querySelectorAll('.infos-posteur').forEach(p => {
        const labelcontainer = p.querySelector('.profil_label'),
        label = labelcontainer.querySelector('.label'),
          name = label.textContent.replace(/ *: *$/, ''),
        slug = slugify(name);

        p.classList.add('field-' + slug);
         
        if(settings.moveRpg.includes(slug)) {
        p.closest('.post_profile').querySelector(settings.moveToRpg).appendChild(p);
      }

if(settings.moveOther.includes(slug)) {
        p.closest('.post_profile').querySelector(settings.moveToOther).appendChild(p);
      }

        if (settings.cleanUp) {
        labelcontainer.textContent = settings.semicolon ? name + ': ' : name;
        } else if (!settings.semicolon) {
              hideSemicolon(label, name)
        }
      });

  };

  document.addEventListener('DOMContentLoaded', main);
}();

C'est juste le script des champs de profil du blank avec les bonnes classes cette fois.

Bonjour Kim

Ne t'en fait pas, encore désolée que ce problème s'éternise à ce point, je m'en veux

J'ai changé le script et enlevé celui dont tu m'as parlé (par contre à ce sujet, cela créé un autre problème parallèle, c'est que ce script me permettait apparemment de "viser" les champs pour pouvoir en modifier l'esthétisme via le CSS et du coup, en l'enlevant, les modifs disparaissent et je ne sais pas trop s'il existe une alternative, en nommant différemment les div, je ne sais pas trop, pour pouvoir les cibler toujours l'une et l'autre et les modifier par CSS)

Même en enlevant ce script et en ajoutant le bon corrigé, les champs ne veulent toujours pas se déplacer, je sèche complètement *dead*

Je t'envoie directement le lien du forum, il y a peut-être un truc qui bug quelque part, c'est pas possible D;



Du coup, comme tu le verras, vu que le script pour les champs n'est plus là, c'est un peu le bazar sur le premier onglet, la page est déformée parce que j'avais fait du CSS sur l'un des champs pour réduire l'image (et là elle est donc en taille réelle... entre autres petites choses), mais il suffit de changer d'onglet pour avoir la page "normale" de l'intérieur des sujets. J'essaie de trouver une alternative, mais mis à part la technique de cibler directement dans le CSS chaque .field accompagné du nom du champ, par le biais de ce js, je n'en connais pas d'autre.

Je faisais ça du coup :

Code:

 .field_multicomptes {  } etc.

... Pour modifier les images, faire disparaître le titre d'un champ, et modifier son contenu au niveau de la police, de l'alignement ou autre, surtout.

Encore merci de ton aide et désolée, vraiment désolée que ça prenne autant de temps >;<