Problème avec le template profile_view_body

[Hitoki]

Détails techniques

Version du forum : PunBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis l'édition du template profil
Lien du forum : https://deliquescence.actifforum.com/

Description du problème

Bonjour !

Les informations ne sont pas alignées et je ne sais pas comment m'y prendre. Elles sont les unes en dessous des autres. Par ex, le nombre de messages n'est pas aligné avec l'information.

Ensuite, ce membre n'a pas activé sa fiche de personnage est hors de sa zone, hors du codage prévu à cet effet.

Voilà mon css !

Code:


/* Contenant */

#block_profil {
   background: #0b1626;
    border: 1px solid #2b3c57;
  display: block;
  Palatino linotype,Arial,Helvetica,sans-serif;
  height: 410px;
  margin: auto;
   width: 850px;
}


/* Bloc profil */

.bloc_profil2 {
  margin-left: 9px;
}

/* Fond information profil */

div.info_profil2 {
 background: #0b0f1f;
      border: 1px solid #2b3c57;
      border-radius: 20px 20px;
  float: left;
  font-style: normal !important;
  height: 290px;
  padding: 10px 10px;
    margin: 15px 0 0 15px;
  width: 245px;


}


/* bloc fiche personnage */

div.fiche_perso2 {
background: #0b0f1f;
      border: 1px solid #2b3c57;
      border-radius: 20px 20px;
  float: left;
  font-style: normal !important;
  height: 290px;
  padding: 10px 10px;
    margin: 15px 0 0 15px;
  width: 245px;
 
}


/* Marge gauche bouton e-mail */

#i_icon_email, #i_icon_pm {
background: #0b0f1f;
      border: 1px solid #2b3c57;
      border-radius: 20px 20px;
  margin: 15px 15px;
  padding: 10px 10px;
}

/* Boutons MP EMAIL */



 .avat img{
  display: block;
    float: left;
  height: 400px;
  width: 300px;
}

/* Fond nom */

 .blockname2 {
 background: #00000a;
   border: 1px solid #2b3c57;
  border-radius: 10px 10px 0 0;
      justify-content: center;
  height: 70px;
    align-items: center;
  margin: auto;
  padding: 10px 10px;
  text-align: center;
  width: 850px;

}

/* Nom */

div.name2 {
    font-family: 'Dancing Script', cursive !important;
     font-size: 30px;
  margin: auto;
  text-align: center;
  
}


Et mon template

Code:

<div class="blockname2"><div class="name2"> {USERNAME}</div>{POSTER_RANK}</div><div id="block_profil">

   <div>
          

          
               <div class="avat">{AVATAR_IMG}
                                   <div class="info_profil2"><!-- BEGIN profile_field -->
         
                        
                        {profile_field.LABEL}{profile_field.CONTENT}
                  
      
         <!-- END profile_field -->
                  
                      <a rel="nofollow" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a>
    <br />&nbsp;- <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
    <br />&nbsp;- <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a></div>
   
                                                                 <div class="fiche_perso2"><!-- BEGIN switch_rpg -->
   

   
   
      

      <fieldset>
      <!-- BEGIN rpg_fields -->
         <dl>
            <dt>{switch_rpg.rpg_fields.F_NAME} :</dt>
            <dd>{switch_rpg.rpg_fields.F_VALUE_NEW}</dd>
         </dl>
      <!-- END rpg_fields -->
      </fieldset>
                                                              
        
      <br class="clear" />
      <fieldset class="frm-set clearfix">
         <div class="frm-buttons">
            {U_ADMIN_RPG}
         </div>
      </fieldset>
      <br />
                                                  <!-- END switch_rpg --></div>  
   </div>
                   
            



                               <div class="boutonsprofil2"><!-- BEGIN contact_field -->
{contact_field.CONTENT}
            
            <!-- END contact_field --></div>
</div>

</div>

   <br class="clear" />   <br />   <br />
<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>

Merci d'avance pour l'aide que vous apporterez !

[Toryudo]

Bonjour !

Pour aligner les champs, le principe va être le suivant.
Dans le Template, vous allez remplacer la ligne :

Code:

{profile_field.LABEL}{profile_field.CONTENT}

par la ligne :

Code:

<div class="profil2_fields">{profile_field.LABEL}{profile_field.CONTENT}</div>

Il ne reste plus qu'à ajouter ce CSS pour que les valeurs des champs soient sur la même ligne que les labels :

Code:

.field_uneditable {
  display: inline;
}

En ce qui concerne le texte "ce membre n'a pas activé sa fiche de personnage", il vous suffit de rajouter ce CSS en plus, qui va supprimer les padding qu'il y a par défaut :

Code:

.frm-buttons {
  padding: 0;
}

Vous pouvez aussi ajouter/supprimer les margins, je vous laisse voir comment ajuster le rendu comme vous voulez !

[Hitoki]

Bonjour à vous !

Merci

Cela fonctionne **

Mon problème est donc résolu