Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB

Membres connectés récemment
Voir tous les membres

[MODERNBB] Déplacer les champs de profil du profile_view_body


2 participants

 :: Astuces Forumactif :: Les sujets résolus

Voir le sujet précédent Voir le sujet suivant Aller en bas

Sujet résolu [MODERNBB] Déplacer les champs de profil du profile_view_body

1
Heaven.
Heaven.
https://onceuponatragedy.forumactif.org/

MessageHeaven. Mer 9 Juin 2021 - 1:16

  • Version du forum :
    MODERNBB
  • Templates modifiés :
    oui
  • Navigateur :
    Autre
Bonjour,

Tout d'abord je tiens à m'excuser platement pour ma disparition lors de ma précédente demande d'aide ici-même. J'avais eu un souci de pc et après j'ai totalement oublié de passer =/ 
De là je comprendrais si ma demande n'est pas traitée  [MODERNBB] Déplacer les champs de profil du profile_view_body 1f495 

Donc si jamais en ce qui concerne ma demande, cela serait donc pour déplacer les champs du profil des membres (profile_view_body)
Pour le moment le template est visuellement ainsi : https://i.imgur.com/89uBT31.png
J'aimerai donc pouvoir déplacer certains des champs de gauche sur la partie droite (au fond vert clair). J'ai essayé plusieurs tutos et plusieurs script liés au viewtopic_body en les modifiant mais rien y a fait.
À noter que je n'utilise pas la feuille de personnage et que je ne l'utiliserai pas.

Pour le moment le code est pour un forum test : https://dcdf-testing.forumactif.com/

Pour le moment le code du template se profile ainsi :
Code:
<div class="fondprofmembre_DCDF"><div class="titleprofmembre_DCDF"><h1>{USERNAME}</h1></div>
  <div class="avatarprofmembre"><span id="avatar_membre">{AVATAR_IMG}</span></div>
  <div class="rankprofmembre"><h6>{POSTER_RANK}</h6></div>
  <div class="blocgenprofinfopersojoueur">
    <div class="infoprofjoueur"><!-- BEGIN profile_field --><div id="field_id{profile_field.ID}" class="miseenpagprof">
    {profile_field.LABEL} {profile_field.CONTENT}</div><!-- END profile_field --></div>
    <div class="infoprofperso"></div>
  </div>  
</div>
<div class="basprofmembre_DCDF"><img src="https://i.imgur.com/MN76MBl.png" /></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 le CSS :
Code:
/******* Début profil membres ******/
.fondprofmembre_DCDF{width: 900px;
  height: 500px;
  background: var(--grand-fond);
  border-radius: 20px 20px 0 0;
  position: relative;
}
.titleprofmembre_DCDF{width: 900px;
  height: 110px;
  background: url('https://i.imgur.com/tgusi7h.png');
  border-radius: 20px 20px 0 0;
  text-align: center;
  margin:auto;
  display: flex;
}
.titleprofmembre_DCDF h1{font-size: 40px;
  font-family: var(--grand-titre);
  color: #c4926d;
  text-shadow: var(--dark-shadow);
  font-weight: 400;
  letter-spacing: 3px;
  margin:auto;
}
.avatarprofmembre{width: 200px;
  height: 320px;
  position: absolute;
  top: 125px;
  left: 15px;
}
.avatarprofmembre img{width: 200px;
  height: 320px;
  border: 4px solid #3b5039;
}
.rankprofmembre{width: 200px;
  height: 30px;
  background: url('https://i.imgur.com/tgusi7h.png');
  background-size: 100% 100%;
  text-align: center;
  margin:auto;
  display: flex;
  position: absolute;
  top: 452px;
  left: 15px;
}
.rankprofmembre h6{font-size: 17px;
  font-family: var(--grand-titre);
  color: #c4926d;
  text-shadow: var(--dark-shadow);
  font-weight: 400;
  letter-spacing: 3px;
  margin:auto;
}
.blocgenprofinfopersojoueur{width: 555px;
  height: 320px;
  position: absolute;
  top: 125px;
  left: 225px;
}
.infoprofjoueur{width: 270px;
  height: 320px;
  background: var(--moyen-fond);
  font-size: 13px;
  padding: 5px;
  overflow: auto;
  float: left;
}
.infoprofperso{width: 270px;
  height: 320px;
  background: var(--moyen-fond);
  padding: 5px;
  overflow: auto;
  float: right;
}
.miseenpagprof{width: 250px;
  float: left;
  padding: 5px 0 0 5px;
}
.miseenpagprof div{display: inline;
}
.miseenpagprof span{color: #c4926d!important;
  font-family: var(--grand-titre);
}
.miseenpagprof img{max-width: 220px;
}
.field_editable.invisible{display: none;
}
.basprofmembre_DCDF{width: 900px;
  height: 30px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}
.basprofmembre_DCDF img{object-fit: cover;
  object-position: 0px -34px;
}

Merci d'avance de toutes réponses ♥


Dernière édition par Heaven. le Mer 9 Juin 2021 - 22:03, édité 2 fois

Sujet résolu Re: [MODERNBB] Déplacer les champs de profil du profile_view_body

2
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 9 Juin 2021 - 7:00

Bonjour Céline,

J'avais eu un souci de pc et après j'ai totalement oublié de passer

Oui, j'ai une sainte horreur du non respect ainsi que de perdre le temps que je consacre bénévolement aux autres....

Bref,
tu peux me donner le template dans sa totalité ainsi que la css associée,
ensuite connais tu la console du navigateur ?


Sujet résolu Re: [MODERNBB] Déplacer les champs de profil du profile_view_body

3
Heaven.
Heaven.
https://onceuponatragedy.forumactif.org/

MessageHeaven. Mer 9 Juin 2021 - 18:25

Bonjour,

Milouze14 a écrit:
Oui, j'ai une sainte horreur du non respect ainsi que de perdre le temps que je consacre bénévolement aux autres....

Ce qui est tout à fait normal !

Milouze14 a écrit:tu peux me donner le template dans sa totalité ainsi que la css associée

J'édite ce pas pour ajouter le JS natif du template mais le html  est bon. J'ai mis le template à 0, je rajouterai les autres variables dont j'ai besoin plus tard.

Milouze14 a écrit:ensuite connais tu la console du navigateur ?

Un peu oui

Sujet résolu Re: [MODERNBB] Déplacer les champs de profil du profile_view_body

4
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 9 Juin 2021 - 19:47

Merci pour ta compréhension Céline,

alors si tu te débrouilles avec la console,
il faut regarder chaque champs et copier l'id de chaque div :

Exemple avec la date de naissance:

[MODERNBB] Déplacer les champs de profil du profile_view_body 119


On voit que la div porte l'id :field_id-12

On va donc reporter dans le script figurant dans le template:
Code:

div[id="field_id-12"]

Ainsi de suite en séparant par une virgule, tu as déjà trois divs de créées, il suffit de les modifier et en ajouter autant que tu le souhaites ici:
Code:
$(' div[id="field_id-7"] , div[id="field_id-5"] , div[id="field_id-12"] ')


Ton template modifié (juste le script) :

Code:
<div class="fondprofmembre_DCDF"><div class="titleprofmembre_DCDF"><h1>{USERNAME}</h1></div>
      <div class="avatarprofmembre"><span id="avatar_membre">{AVATAR_IMG}</span></div>
      <div class="rankprofmembre"><h6>{POSTER_RANK}</h6></div>
      <div class="blocgenprofinfopersojoueur">
        <div class="infoprofjoueur"><!-- BEGIN profile_field -->
          <div id="field_id{profile_field.ID}" class="miseenpagprof">
          
     {profile_field.LABEL} {profile_field.CONTENT} </div>
        
          <!-- END profile_field -->
        </div>
        <div class="infoprofperso"></div>
      </div>  
    </div>
<script>
$(function(){
var $this=$('.infoprofperso');
$('div[id="field_id-7"], div[id="field_id-5"],div[id="field_id-12"]').appendTo($this);
  });
</script>

    <div class="basprofmembre_DCDF"><img src="https://i.imgur.com/MN76MBl.png" /></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>

Ce qui donne avec les trois divs déplacées dans la partie droite:

[MODERNBB] Déplacer les champs de profil du profile_view_body 214

Sujet résolu Re: [MODERNBB] Déplacer les champs de profil du profile_view_body

5
Heaven.
Heaven.
https://onceuponatragedy.forumactif.org/

MessageHeaven. Mer 9 Juin 2021 - 22:02

Re,

Mon dieu, ça marche parfaitement ! Merci [MODERNBB] Déplacer les champs de profil du profile_view_body 1f495

Sujet résolu Re: [MODERNBB] Déplacer les champs de profil du profile_view_body

6
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 10 Juin 2021 - 4:03

De rien ok ,


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Astuces Forumactif :: Astuces Forumactif :: Les sujets résolus

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit