Header
Partagez | 

[FA] Mises en page prédéfinies pour chaque membre

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [FA] Mises en page prédéfinies pour chaque membre   Ven 20 Mai - 10:03

Bonjour bonjour Smile

Dans ce tutoriel, nous allons voir une méthode permettant de donner à chaque membre du forum une liste de mise en page particulière.

Idea Pré-requis :
• La toolbar doit être activée ;
• Le HTML doit être autorisé dans les messages ;
• Avoir accès aux templates ;
• Connaître un minimum le PA ;
• Avoir des connaissances en HTML & CSS ;
• Des connaissances en JS sont un plus.

Idea Ce tutoriel fonctionne pour phpBB2, phpBB3, Punbb et Invision.

Le principe

Voilà donc ce qu'on va faire dans ce tutorial :

1) On va créer une zone où seul le staff (par exemple) pourra poster. Cette zone n'est pas visible par les membres, mais ils peuvent lire les messages qui y sont déposés.

2) Dans cette partie, chaque membre a un topic avec les mises en page de son perso. Chaque mise en page doit avoir une présentation spécifique, par exemple :
Code:
<div class="mep-user">
Mise en page 1
[---]
Personnage 1
[---]
[img]http://r30.imgfast.net/users/3012/23/80/22/avatars/1-95.png[/img]
[---]
info1 - perso 1<br />info2 - perso 1<br />info3 - perso 1
</div>
Il peut y avoir autant de mise en page qu'on veut.

Idea Rassure-toi, on va faire une page html qui générera automatiquement le code à copier/coller.

3) Dans le profil du membre, on va créer un nouveau champs "Mise en page" qui contiendra le lien vers les mises en page prédéfini du membre.

4) Le javascript fera ensuite son boulot en :
a] récupérant l'id du membre et en allant regarder sur son profil si le champs est rempli
b] Si le champs est rempli, il va aller voir dans le message les mises en page a sa disposition
c] il va enregistrer dans la "mémoire" du navigateur ses mises en pages
d] si le membre est sur une page avec un éditeur de texte, il aura une liste déroulante à sa dispo.




Nous allons diviser ce tutoriel en 4 étapes :
1) Une série de manip' à faire sur le PA ;
2) La création d'un formulaire ;
3) La création d'un javascript ;
4) La modification des templates.

Idea La suite du tutoriel se base sur une aide réalisée ; à toi de te baser sur ce tutoriel pour réaliser tes propres mises en page Wink Merci de ne pas copier bêtement ce qui a été fait Smile

I] Direction le PA

On va donc aller sur le Panneau d'Administration.

a)Le profil du membre

On va commencer par créer dans le profil du membre un nouveau champs. Pour ça, on va aller dans Panneau d'admin > Utilisateurs & groupes > Utilisateurs > Profils.

Là, on va créer un nouveau champs du profil qu'on va nommer "Mises en page" et on va lui appliquer les réglages suivants :

Et on va le placer tout en haut :


b) La zone

On va ensuite créer un forum qui contiendra toutes nos mises en page. Ici, je te laisse le faire comme tu veux. Il faut juste que :
> Les membres ne puissent pas voir la zone
> Les membres puissent lire les messages

Donc au minimum, tu dois avoir ces réglages :


II] Un formulaire pour générer la mise en page


Maintenant, on va créer un formulaire à utiliser pour que les personnes ayant les droits puissent ajouter des mises en page avec un simple copier/coller.

Idea Voici un [tutoriel] qui t'explique les bases de la réalisation d'un formulaire ; je t'invite vivement à la lire avant de regarder le code suivant Smile

Voilà le formulaire "final" :
http://formations-sop.forumactif.com/h2-formulaire-mise-en-page

Et son code :
Code:
<!DOCTYPE html>
<!--[if lte IE 6]>
<html class="ie" lang="fr">
<![endif]-->
<!--[if IE 7]>
<html class="ie ie7" lang="fr">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="fr">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="fr">
<!--<![endif]-->

  <head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <title>Formulaire - Mise en page</title>

    <style type="text/css">

      body{
        background: #cdcdcd;
        color: #666;
        font: normal 12px/18px "Trebuchet MS";
      }

      /*** Mise en page titre ***/
      .titre1 {
        border-bottom: 4px double #000;
        font-size: 18px;
        font-variant: small-caps;
      }

      .titre2{
        border-bottom: 2px solid #000;
        font-size: 16px;
        padding-left: 12px;
      }
      .titre1,
      .titre2{
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #000;
        font-weight: 700;
        line-height: 27px;
        padding: 2px;
        width: 100%;
      }

      /*** Mise en page code ***/
      .code {
        background: #DDE1E9;
        border: dashed 1px #a0a7b9;
        color: #000;
        font-family: Courier,CourierNew,sans-serif;
        font-size: 12px;
      }

      /*** Autres ***/
      .inl-block{
        display: inline-block;
        vertical-align: top;
      }

      .hide{
        display: none;
      }

      #code-genere{
        margin: auto;
        width: 80%;
      }

      #code-genere form p{
        margin: 0;
      }
      #code-genere input,
      #code-genere label{
        display: block;
      }

      #code-genere label{
        width: 200px;
      }

      #code-genere input{
        height: 30px;
        line-height: 30px;
        width: 380px;
      }

      #code-genere textarea,
      #code_genere{
        background: #fff;
      }

      #code-genere .textarea label{
        vertical-align: top;
      }

      #code-genere input[type="button"]{
        width: 150px;
      }

      #code_genere:hover{
        cursor: pointer;
      }

      #code-genere .error{
        color: #982626;
        font-size: 11px;
        height: 20px;
        line-height: 13px;
        padding: 0;
        margin: 0 0 8px 0;
      }

      #code-genere .error.hide + p{
        margin-top: 20px;
      }

      #blk-preview,
      #blk-form{
        vertical-align: top;
        width: 35%;
      }

      #blk-preview{
        margin-left : 2%;
        width: 50%;
      }

      @media (max-width: 980px){
        #blk-preview,
        #blk-form{
          display: block;
          width: 100%;
        }

        #code-genere input,
        #code-genere label{
          display: inline-block;
          vertical-align: top;
        }
      }


    </style>

  </head>

  <body>

    <main id="code-genere">
      <h1 class="titre1">Générer une mise en page</h1>
      <p>Ce formulaire génére un code de mise en page à copier/coller dans le sujet adéquate. Vous pourrez également voir un aperçu du rendu qu'il y aura dans les messages sur la droite.</p>

      <p class="note">Attention, dans les champs de texte, seul le html est pris en compte ; voici donc une liste de codes "utiles" :</p>
      <ul class="note">
        <li>Retour à la ligne : <span class="code">‹br /›</span></li>
        <li>Mettre en gras : <span class="code">‹strong›Texte‹/strong›</span></li>
        <li>Mettre en italique : <span class="code">‹em›Texte‹/em›</span></li>
      </ul>

      <h2 class="titre2">Le formulaire</h2>
      <section class="inl-block" id="blk-form">
        <form method="post" action="#">
          <p>
            <label for="nom">Nom :</label>
            <input type="text" name="nom" class="oblig"/>
          </p>
          <p class="error hide">Champs obligatoire</p>

          <p>
            <label for="avatar">Lien de l'avatar :</label>
            <input type="text" name="avatar" class="oblig"/>
          </p>
          <p class="error hide">Champs obligatoire</p>

          <p>
            <label for="rang">Rang :</label>
            <input type="text" name="rang" class="oblig" />
          </p>
          <p class="error hide">Champs obligatoire</p>

          <p>
            <label for="age">Âge :</label>
            <input type="text" name="age" class="oblig"/>
          </p>
          <p class="error hide">Champs obligatoire</p>

          <p>
            <label for="jeu">Jeu :</label>
            <input type="text" name="jeu" class="oblig"/>
          </p>
          <p class="error hide">Champs obligatoire</p>

          <p>
            <label for="race">Race :</label>
            <input type="text" name="race" class=""/>
          </p>
          <p class="error hide">Champs obligatoire</p>

          <p>
            <label for="classe">Classe :</label>
            <input type="text" name="classe" class=""/>
          </p>
          <p class="error hide">Champs obligatoire</p>

          <p class="textarea">
            <label for="inventaire">Inventaire :</label>
            <textarea cols="60" rows="10" name="inventaire" class="oblig"></textarea>
          </p>
          <p class="error hide">Champs obligatoire</p>

          <p class="textarea">
            <label for="autre">Autres :</label>
            <textarea cols="60" rows="10" name="autre" class=""></textarea>
          </p>
          <p class="error hide">Champs obligatoire</p>

          <input type="button" onClick="verif(this.form)" value="Générer le code" />

        </form>
      </section><!--
    --><section class="inl-block" id="blk-preview">
        <h2 class="titre2">Aperçu du rendu</h2>
        <section id="preview"></section>
      </section>

      <h2 class="titre2">Le code généré</h2>
      <p class="textarea">
        <label for="codeGenere">Voici le code à copier/coller</label>
        <textarea cols="60" rows="10" name="codeGenere" id="code_genere"></textarea>
      </p>
    </main>


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

  <script type="text/javascript">
  <!--

function recupInfo(LeForm, idBloc){
    // On enregistre les données renseignées
    var nom = LeForm.nom.value
    ,  avatar = LeForm.avatar.value
    ,  rang = LeForm.rang.value
    ,  age = LeForm.age.value
    ,  jeu = LeForm.jeu.value
    ,  race = LeForm.race.value
    ,  classe = LeForm.classe.value
    ,  inventaire = LeForm.inventaire.value
    ,  autre = LeForm.autre.value
    ,  contenu = ""
    ,  code = "";

    // On prépare la variable qui va afficher "en temps réel" le rendu
    contenu =
    '<div class="profil_perso">'+
      '<div class="nom_perso">'+ nom +'</div>'+
      '<div class="avatar_perso"><img src="'+ avatar +'" alt="'+ nom +'" /></div>'+
      '<div class="rang_perso">'+ rang +'</div>'+
      '<div class="infos_perso">'+
      '<span class="intitule">Age - </span>'+ age +' ans<br />'+
      '<span class="intitule">Jeu - </span>'+ jeu +'<br />'+
      '<span class="intitule">Race - </span>'+ race +'<br />'+
      '<span class="intitule">Classe - </span>'+ classe +'<br />'+
      '<span class="inventaire">Inventaire</span>'+'<br />'+
      '<div class="inventaire_contenu">'+ inventaire +'</div>'+
      '<span class="inventaire">Autres</span>'+
      '<div class="inventaire_contenu">'+ autre +'</div>'+
      '</div><!-- FIN INFORMATIONS PERSONNAGE -->'+
    '</div>'+
    '<div class="fleche"></div>'+
    '<div class="contenu_rp">'+
      '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra egestas leo, id rhoncus justo fermentum sed. In faucibus purus nisi, sed ultricies arcu molestie nec. Curabitur suscipit eros justo. Fusce rhoncus orci sed sapien imperdiet, nec dignissim sem mollis. Duis consequat ipsum mi, vel euismod magna ullamcorper ut. Ut hendrerit tincidunt neque, vel efficitur diam gravida ac. Proin eleifend egestas diam, nec sodales felis pharetra vitae. Donec feugiat rutrum ex quis mollis. Aliquam cursus nulla eget neque ullamcorper rhoncus. Sed et arcu sit amet dolor viverra aliquam. Morbi fringilla porttitor elit quis sagittis. Praesent volutpat metus ut gravida vulputate. Integer at augue justo. Curabitur non sapien nec dui cursus aliquam nec at urna. Vivamus a lacus pharetra, dapibus risus malesuada, vehicula velit.</p>'+
    '</div><div style="clear: both;"></div>'  ;

    // On remplit la variable qui générera le code à copier/coller.
    code = '<div class="mep-user">'+ nom +'<br />[---]<br />'+ rang +'<br />[---]<br />'+ age +'<br />[---]<br />'+ jeu +'<br />[---]<br />'+ race +'<br />[---]<br />'+ classe +'<br />[---]<br />'+ inventaire +'<br />[---]<br />'+ autre +'</div>';

    if(idBloc == "code_genere"){
      document.getElementById("code_genere").focus();
      document.getElementById(idBloc).innerHTML = ""+code+"";
    }else{
      document.getElementById(idBloc).innerHTML = ""+contenu+"";
    }
  }

  // Au clic sur "générer", on vérifie que le formulaire est bien rempli
  function verif(LeForm){

    var ok = true ;

    // Est ce que tous les champs obligatoires sont remplis ?
    $( "form .oblig" ).each(function( index ) {
       // Si l'un d'eux est vide
      if( $(this).attr('value') == ""){
         // On affiche un message d'erreur
        $(this).parent().next('.error').removeClass('hide');
        // On le met en "surbrillance"
        $(this).focus();
        ok = false;
      }
    });

    // Tout est bon : on génère le code !
    if (ok){
      recupInfo(LeForm, 'code_genere');
    } 
  }


  $(document).ready( function(){
    // A chaque fois que je remplis un champs, ça met à jour le rendu de la mise en page.
    $("body")
      .on('click', '#code_genere', function(){
        $(this).select();
      })
      .on('keyup','form', function(){
        recupInfo(this, 'preview')
      });
  });

  -->
  </script>

</body>
</html>

Pour faire simple, j'ai plein de champs qui sont ou non à remplir obligatoirement (ceux qui le sont ont la classe "oblig").

Dans le javascript, je teste le formulaire quand je clique sur générer. Le but : vérifier que tous les champs obligatoires sont bien remplis :
Code:
  function verif(LeForm){

    var ok = true ;

    $( "form .oblig" ).each(function( index ) {
      if( $(this).attr('value') == ""){
        $(this).parent().next('.error').removeClass('hide');
        $(this).focus();
        ok = false;
      }
    });

    if (ok){
      recupInfo(LeForm, 'code_genere');
    } 
  }

Il y a aussi une partie qui met à jour automatiquement le rendu de la mise en page dès que j'écris de nouveaux trucs :
Code:
$(document).ready( function(){
    // A chaque fois que je remplis un champs, ça met à jour le rendu de la mise en page.
    $("body")
      .on('click', '#code_genere', function(){
        $(this).select();
      })
      .on('keyup','form', function(){
        recupInfo(this, 'preview')
      });
  });

Et enfin, il y a tout un script qui récupère les données enregistrées et qui génère le code à copier/coller :
Code:
function recupInfo(LeForm, idBloc){
    // On enregistre les données renseignées
    var nom = LeForm.nom.value
    ,  avatar = LeForm.avatar.value
    ,  rang = LeForm.rang.value
    ,  age = LeForm.age.value
    ,  jeu = LeForm.jeu.value
    ,  race = LeForm.race.value
    ,  classe = LeForm.classe.value
    ,  inventaire = LeForm.inventaire.value
    ,  autre = LeForm.autre.value
    ,  contenu = ""
    ,  code = "";

    // On prépare la variable qui va afficher "en temps réel" le rendu
    contenu =
    '<div class="profil_perso">'+
      '<div class="nom_perso">'+ nom +'</div>'+
      '<div class="avatar_perso"><img src="'+ avatar +'" alt="'+ nom +'" /></div>'+
      '<div class="rang_perso">'+ rang +'</div>'+
      '<div class="infos_perso">'+
      '<span class="intitule">Age - </span>'+ age +' ans<br />'+
      '<span class="intitule">Jeu - </span>'+ jeu +'<br />'+
      '<span class="intitule">Race - </span>'+ race +'<br />'+
      '<span class="intitule">Classe - </span>'+ classe +'<br />'+
      '<span class="inventaire">Inventaire</span>'+'<br />'+
      '<div class="inventaire_contenu">'+ inventaire +'</div>'+
      '<span class="inventaire">Autres</span>'+
      '<div class="inventaire_contenu">'+ autre +'</div>'+
      '</div><!-- FIN INFORMATIONS PERSONNAGE -->'+
    '</div>'+
    '<div class="fleche"></div>'+
    '<div class="contenu_rp">'+
      '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra egestas leo, id rhoncus justo fermentum sed. In faucibus purus nisi, sed ultricies arcu molestie nec. Curabitur suscipit eros justo. Fusce rhoncus orci sed sapien imperdiet, nec dignissim sem mollis. Duis consequat ipsum mi, vel euismod magna ullamcorper ut. Ut hendrerit tincidunt neque, vel efficitur diam gravida ac. Proin eleifend egestas diam, nec sodales felis pharetra vitae. Donec feugiat rutrum ex quis mollis. Aliquam cursus nulla eget neque ullamcorper rhoncus. Sed et arcu sit amet dolor viverra aliquam. Morbi fringilla porttitor elit quis sagittis. Praesent volutpat metus ut gravida vulputate. Integer at augue justo. Curabitur non sapien nec dui cursus aliquam nec at urna. Vivamus a lacus pharetra, dapibus risus malesuada, vehicula velit.</p>'+
    '</div><div style="clear: both;"></div>'  ;

    // On remplit la variable qui générera le code à copier/coller.
    code = '<div class="mep-user">'+ nom +'<br />[---]<br />'+ rang +'<br />[---]<br />'+ age +'<br />[---]<br />'+ jeu +'<br />[---]<br />'+ race +'<br />[---]<br />'+ classe +'<br />[---]<br />'+ inventaire +'<br />[---]<br />'+ autre +'</div>';

    if(idBloc == "code_genere"){
      document.getElementById("code_genere").focus();
      document.getElementById(idBloc).innerHTML = ""+code+"";
    }else{
      document.getElementById(idBloc).innerHTML = ""+contenu+"";
    }
  }

Tout ce code est à mettre sur une nouvelle page html (attention à bien la créer en cliquant sur ce bouton : ) :



A retenir






> Si tu veux ajouter un champ "simple"
Code:

<p>
  <label for="nomChamps">Nom du champs :</label>
  <input type="text" name="nomChamps"/>
</p>
<p class="error hide">Champs obligatoire</p>

> Si tu veux ajouter un champ "long"
Code:
<p class="textarea">
  <label for="nomChamps">Nom du champs :</label>
  <textarea cols="60" rows="10" name="nomChamps" class=""></textarea>
</p>
<p class="error hide">Champs obligatoire</p>

Si ces champs sont obligatoires, tu ajoutes :
Code:
class="oblig"
sur le input ou textarea Smile

Ensuite, coté js, tu dois déclarer ces nouvelles valeurs à récupérer :
Code:
nomChamps = LeForm.nomChamps.value

Exclamation pas d'accent, tiret, espace ou caractère spécial dans les noms Wink

Et il faut les ajouter dans le contenu et le code généré, de cette façon :
Code:
'+ nom +'



III] Le javascript

Maintenant, on va copier / coller ce javascript à afficher sur "toutes les pages".

Idea Les explications de ce js sont directement intégrés dedans sous forme de commentaires. Les lire n'est donc pas une option Wink

Code:
// On récupère les mises en page prédéfinies
function miseEnPage(){
   // On récupère le numéro de profil du membre (num_profil)
   // On crée une div "virtuelle" qui va récupérer les infos (recup_info)
   var num_profil = _userdata["user_id"]
   ,   recup_info = document.createElement('div');

   // On récupére le lien du sujet où sont les mises en page
   // champ renseigné dans le profil du membre
   $(recup_info).load('/u'+ num_profil +' #profile-advanced-details #field_id2 .field_uneditable', function(){
      var url_mep = this.innerHTML;

      // On teste qu'il y ait bien un lien renseigné pour les mises en page
      if( url_mep.length > 44){
         // On s'occupe d'isoler uniquement l'url du topic de mises en page
         url_mep = url_mep.split('>');
         url_mep = url_mep[1].replace('</div', '');

         // On crée une liste "virtuelle" qui récupèrera les mises en page
         var selectMep = document.createElement('select');
         selectMep.setAttribute('name', 'mep_predef');
          selectMep.setAttribute('id', 'mep-predef');
          selectMep.innerHTML = '<option value=""></option>';

         // On charge les différentes mises en page
         $(recup_info).load(''+ url_mep +'  .forumline > tbody > tr.post .postbody .content-msg .mep-user', function(){
            var content = this.innerHTML;

            recupInfoMep(content, selectMep);

         });
      }
   });

}

// On traite chaque mise en page
// content = tableau - mise en page dans le message
// selectMep = string - liste "virtuelle" des mises en page
function recupInfoMep(content, selectMep){
   // On sépare chaque mise en page
   content = content.split('<div class="mep-user">');

   // On parcours le tableau des mises en page
   for( var i = 1 ; i < content.length ; i ++){
      content[i] = content[i].replace('</div>', '');
      content[i] = content[i].split('[---]');

      // Pour chaque élement de mise en page, on supprime les br
      // sauf pour les infos du perso
      for( var j = 0 ; j < content[i].length ; j ++){
         if( j < (content[i].length - 2)){
            content[i][j] = content[i][j].replace(/<br>/g, '');
         }
      }

      // On met en forme les infos
      contenu =
          '<div class="profil_perso">'+
            '<div class="nom_perso">'+ content[i][0] +'</div>'+
            '<div class="avatar_perso"><img src="'+ content[i][1] +'" alt="'+ content[i][0] +'" /></div>'+
            '<div class="rang_perso">'+ content[i][2] +'</div>'+
            '<div class="infos_perso">'+
            '<span class="intitule">Age - </span>'+ content[i][3] +' ans<br />'+
            '<span class="intitule">Jeu - </span>'+ content[i][4] +'<br />'+
            '<span class="intitule">Race - </span>'+ content[i][5] +'<br />'+
            '<span class="intitule">Classe - </span>'+ content[i][6] +'<br />'+
            '<span class="inventaire">Inventaire</span>'+'<br />'+
            '<div class="inventaire_contenu">'+ content[i][7] +'</div>'+
            '<span class="inventaire">Autres</span>'+
            '<div class="inventaire_contenu">'+ content[i][8] +'</div>'+
            '</div>'+
          '</div>'+
          '<div class="fleche"></div>'+
          '<div class="contenu_rp">'+
            'MESSAGE'+
          '</div><div style="clear: both;"></div>'  ;

      // On enregistre dans le navigateur la mise en page
      localStorage.setItem('' + content[i][0] + '', '' + contenu + '');

      // On ajoute la mise en page dans la liste virtuelle
      selectMep.innerHTML += '<option value="' + content[i][0] + '">' + content[i][0] + '</option>';
   
   }

   // on récupére la liste virtuelle
   selectMep = selectMep.outerHTML;

   // On enregistre la liste virtuelle dans le navigateur
   localStorage.setItem('hasSelectMep', '' + selectMep + '');

   // On recharge la page
   //window.location.reload(true);
}

// Une fois la page chargée
$(function(){

   var hasSelectMep = localStorage.getItem('hasSelectMep');

   // Si des mises en page sont stockées
   if(hasSelectMep != null){

      // Si on est sur une page avec l'éditeur de texte
      // envoie message ou réponse rapide
      if( $('#text_editor_textarea').length ){
         // On injecte la liste
         var target = document.getElementById('liste-deroulante');
            target.innerHTML = 'Choisis ton personnage : ' + hasSelectMep + '';

            // Quand on sélectionne une mise en page prédéf
            $('body').on('change', '#mep-predef', function(){
               var type_msg = this.value ;

               if(type_msg in localStorage) {
                   var code_mep = localStorage.getItem(type_msg) ;
                   $('#text_editor_textarea').sceditor("instance").insertText( code_mep );
               }
           });
      }

      // Au clic sur "déconnexion", on supprime les mises en page du navigateur
      $('body')
         .on('click', '#logout', function(){
            localStorage.clear();
      });

   }else{
      // Si pas de mise en page stockée
      miseEnPage();
   }

});

Exclamation Attention ! Dans cette partie :
Code:
#profile-advanced-details #field_id2 .field_uneditable
#field_id2 est à adapter en fonction de ton forum. Pour cela, ouvre la console de ton navigateur (en cliquant sur F12), sélectionne le champs, et observe l'id de son parent Smile

IV] Modifier les templates

Dernier détail : les templates ^^

a) viewtopic_body

Parce que oui, dans le javascript, on cible ça :
Code:
.content-msg .mep-user

Pour récupérer les mises en page. Sauf que, pour le moment, cette classe : content-msg n'existe pas.

On va donc ouvrir le template viewtopic_body, chercher ça :
Code:
<div>{postrow.displayed.MESSAGE}</div>
et le remplacer par :
Code:
 <div class="content-msg">{postrow.displayed.MESSAGE}</div>

On va aussi ajouter ceci :
Code:
<div id="liste-deroulante"> </div>
avant
Code:
{QUICK_REPLY_FORM}<br />

b) posting_body


Et sur le template "posting_body" (dans poster et messages privées) :
Code:
<div id="liste-deroulante"> </div>
juste avant :
Code:
<textarea id="text_editor_textarea" class="post" name="message" tabindex="3" wrap="virtual">{MESSAGE}</textarea>&nbsp;

Idea Sur punbb, il s'agit de ce code :
Code:
<textarea id="text_editor_textarea" onclick="storeCaret(this)" rows="15" cols="9" onkeyup="storeCaret(this)" name="message" tabindex="3" onselect="storeCaret(this)" wrap="virtual" style="width:98%">{MESSAGE}</textarea>




C'est terminé ^^

Si tu rencontres un souci avec ce tutoriel, viens poser ta ou tes questions [ici]

Idea N'oublie pas de lire et de suivre les règles de la section



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[FA] Mises en page prédéfinies pour chaque membre.
Revenir en haut Aller en bas
[FA] Mises en page prédéfinies pour chaque membre
Page 1 sur 1
 Sujets similaires
-
» [Akino] Un page d'accueil pour New Day :)
» getmoreofwhatyoulovesampling/pour les membre de costco
» ['Christa] Quelque chose de plus esthétique sous les avatars des membres
» définir une résolution d'écran pour chaque compte utilisateur
» Un effet de style différent pour chaque lien du menu
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+