Bonjour à tous,
Aujourd’hui, ou demain selon le moment où vous lirez ce tutoriel, nous apprendrons à sortir notre profil du cadre du message, complètement ou en partie. Un effet sympathique qui permet, entre autres, d’optimiser l’espace pour l’écriture des messages pour les forums étroits. Comme ceci pour une sortie complète :


Ou cela pour une sortie partielle :



Notez, pour votre plus grand plaisir que ce tutoriel est parfaitement compatible avec la plupart des modifications de profil de message. Vous ne perdrez pas votre personnalisation actuelle. Si vous avez déjà mis un cadre autour de votre profil conventionnel, je vous indiquerai comment le garder.
Commençons :

---

Le HTML

Toute les modifications à faire se feront dans le template viewtopic_body. Pour accéder aux templates, vous devez être fondateur, puis allez dans votre panneau d'administration, onglet Affichage, menu Templates » Général et éditer votre template en cliquant sur son nom dans la liste.

• Dans un premier temps, il va nous falloir supprimer la colonne « Auteur » et ces deux cellules, celle qui contient le titre « Auteur » et celle qui contient le profil comme tel, profil que nous sauverons lors de la procédure, je vous rassure.
  
  
  
  La colonne "Auteur" qu'on va retirer
  
  
  Pour supprimer la colonne « Auteur », repérer l’équivalent de :
  

  Code:

  <tr>
        <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
        <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
     </tr>

  Et supprimer la cellule d’en-tête (balise <th>) qui contient le titre :
  

  Code:

   <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>

  Pour ce résultat :
  

  Code:

   <tr>
        
        <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
     </tr>

  Ne validez pas votre template tout de suite, vous risquez – vous et vos membres – de voir une mise en page affreusement déformée. Réglons ça tout de suite en supprimant la colonne du profil.
  
  
• Pour supprimer la colonne de profil tout en conservant le profil, repérer cette partie :
  

  Code:

   <!-- BEGIN displayed -->
     <tr class="post">

  Les lignes qui suivront celles-ci contiendront votre profil, si vous ne l’avez pas modifié, le code devrait être celui-ci. Si vous avez modifié, quelques indices vous permettront de voir qu’il s’agit du profil (les variables {POSTER_NAME}, {POSTER_RANK}, etc.), l’essentiel est de prendre toute la cellule, de la balise ouvrante <td> à la balise fermante </td> :
  

  Code:

        <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
           <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
              <span class="postdetails poster-profile">
              {postrow.displayed.POSTER_RANK}<br />
              {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
              <!-- BEGIN profile_field -->
              {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
              <!-- END profile_field -->
              {postrow.displayed.POSTER_RPG}
           </span><br />
           <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
        </td>

  Coupez tout ça (Ctrl+X) de manière à ce qu’il ne reste plus rien à cet endroit. Avant de faire quoi que ce soit d’autre, allons sauver votre profil avant qu’il ne soit écrasé par un autre Copier ou Couper non-désiré (si ça se produit, vous n’aurez qu’à quitter le template sans valider et recommencer).
  
  Collez votre profil fraichement coupé juste en dessous de la ligne suivante :

  Code:

   <!-- END switch_vote_active -->

  Nous avons donc déplacé votre cellule de profil dans l’opération et la colonne qui le contenait n’existe plus… pas tout à fait.
  
  
  Si vous oubliez l'étape qui suit, votre code sera faux car nous aurons une cellule perdue en dehors d'un tableau. Soyez attentif !
  
• Avant de terminer, nous devons encore transformer la cellule de votre profil (<td>) en conteneur de bloc (<div>) et lui attribuer une classe sur laquelle nous travaillerons par la suite. Nous avons ceci pour le moment :
  

  Code:

   <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
  [AVEC LE PROFIL A L'INTERIEUR]
  <td>

  Et nous modifions la cellule de tableau en bloc de contenu, ce qui nous donnera quelque chose de ce genre :
  

  Code:

  <div class="mon_profil_exterieur">
  [AVEC LE PROFIL A L'INTERIEUR]
  </div>

  Si vous n'aviez pas modifié votre profil, le code complet devrait donc être celui-ci :

  Code:

     <div class="mon_profil_exterieur">
           <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
              <span class="postdetails poster-profile">
              {postrow.displayed.POSTER_RANK}<br />
              {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
              <!-- BEGIN profile_field -->
              {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
              <!-- END profile_field -->
              {postrow.displayed.POSTER_RPG}
           </span><br />
           <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
        </div>

  Vous pouvez remplacer le nom de la classe (ici mon_profil_exterieur) par ce que vous voulez, tant que vous gardez en tête qu’il faudra faire de même pour la suite de ce tutoriel.
  
  
• Dernière chose avant de valider, nous allons ajouter une classe au conteneur div.postbody déjà présent dans notre template ; nous nous servirons de celle-ci pour définir une marge dans les messages, dans le cas d’un profil extérieur partiel. Cherchons :
  

  Code:

   <div class="postbody">
  
                       <div>{postrow.displayed.MESSAGE}</div>

  Et ajoutons notre classe, comme ceci :
  

  Code:

   <div class="postbody ma_marge_profil">
  
                       <div>{postrow.displayed.MESSAGE}</div>

  Vous pouvez remplacer le nom de la classe (ici ma_marge_profil) par ce que vous voulez, tant que vous gardez en tête qu’il faudra faire de même pour la suite du tutoriel
  

Vous pouvez désormais valider et publier ce template : nous passons au CSS.

---

Le CSS

Au risque d’en décourager quelques-uns, c’est la partie la plus complexe de ce tutoriel en ce qui à trait à la compréhension globale. N’essayez pas de fuir, maintenant que votre profil à l’air de ça (cliquez pour voir) il est trop tard pour reculer.

• Rendons-nous dans notre CSS personnalisé (Panneau d’administration, Affichage, Couleurs, Feuille de style CSS) et définissons une nouvelle classe, à la fin de notre CSS (ou au milieu, ça change rien).
  

  Code:

  .mon_profil_exterieur {
  
  }

  (Notez bien qu'il s'agit de la classe que nous avons utilisée dans la partie HTML, si vous aviez changé son nom, pensez à faire de même ici).
  
  
• La prochaine étape ne s’applique qu’à ceux qui n’ont pas déjà un cadre autour de leur profil, car nous allons justement en définir un, via notre classe .mon_profil_exterieur. Le style de votre cadre changera sensiblement selon si vous avez opté pour un profil complètement ou partiellement extérieur.
  
  
  
  CSS du premier cadre :
  

  Code:

   .mon_profil_exterieur {
     width: 150px; /* Largeur du profil */
     background: #EFEFEF; /* Couleur de fond */
  
     border-width: 2px 0px 2px 2px; /* Épaisseur des bordures HAUTpx DROITEpx BASpx GAUCHEpx */
     border-style: solid; /* Style des bordures */
     border-color: #006699; /* Couleur des bordures */
     
     /* Bordures arrondies : rayon HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx */
     -webkit-border-radius:10px 0 0 10px;
     -moz-border-radius:10px 0 0 10px;
     border-radius:10px 0 0 10px;
   
   }

  
  CSS du second cadre :
  

  Code:

   .mon_profil_exterieur {
     width: 150px; /* Largeur du profil */
     background: #E3E3E3; /* Couleur de fond */
  
     border-width: 2px 1px; /* Épaisseur des bordures HAUT-BASpx GAUCHE-DROITEpx */
     border-style: solid; /* Style des bordures */
     border-color: #006699; /* Couleur des bordures */
  
     /* Bordures arrondies */
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
   
  }

  Notez, pour la suite, qu’il est très important de donner une couleur de fond à votre cadre, même s’il s’agit de la même couleur que le reste du message (ce qui est le cas de premier cadre). Si vous ne le faites pas, l’arrière de votre profil sera transparent au terme de ce tutoriel : un résultat qui n’a rien de probant.
  
  Dans la suite, je noterai [propriétés du cadre] les propriétés CSS qu'on vient d'ajouter
  
  
• Passons au positionnement de notre profil. Le principe est complexe simple et s’effectue en deux propriétés. Dans un premier temps nous allons mettre notre profil en positionnement absolu. De ce fait, il ne sera plus dépendant du conteneur parent, le corps de notre message, comme ceci :
  

  Code:

  .mon_profil_exterieur {
  [Propriétés du cadre]
  position : absolute;
  }

  
  Voyez le résultat :
  
  
  
• Ensuite, nous positionnerons notre profil. Cependant, plutôt que de lui donner un postionnement haut, gauche (comme c'est généralement le cas avec le positionnement absolu) nous allons plutôt utiliser la propriété margin-left pour donner un petit coup de pied à notre profil.
  
  
  

  Code:

  .mon_profil_exterieur {
  [Propriétés du cadre]
  position : absolute;
  margin-left : TAILLEpx;
  }

  
  Même s’il est coutume de définir une marge de la largeur (propriété width) de notre profil pour un profil complètement extérieur et la moitié de cette largeur pour un profil en sortie partielle, des ajustements, de l’ordre de quelques pixels, peuvent être nécessaires, selon l’effet voulu.
  Voici à titre d'exemple mes propres ajustements :
  
  
  

  Code:

  .mon_profil_exterieur {
     width: 150px;
     background: #E3E3E3;
     border-width: 2px 1px;
     border-style: solid;
     border-color: #006699;
     
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     
     text-align: center;
     
     position: absolute;
     margin-left: -80px;
  }

  
  
  

  Code:

  .mon_profil_exterieur {
  width: 150px;
     background: #E3E3E3;
     border-width: 2px 1px;
     border-style: solid;
     border-color: #006699;
  
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     
     text-align: center;
     
     position: absolute;
     margin-left: -80px;
  }

  
  
• La dernière étape consiste à définir une marge à gauche du message, dans le cas d’un profil en sortie partielle et à donner une hauteur minimale à notre message.
  
  En effet, pour éviter que le profil dépasse comme ceci :
  
  La hauteur devra être suffisante pour contenir un profil bien rempli, tout en tenant compte de la taille maximale de vos avatars.
  
  Voyons donc les propriétés nécessaires pour ces deux réglages :
  

  Code:

  .ma_marge_profil {
  min-height: 230px; /* Hauteur minimale d’un message */
  padding-left : 80px; /* Espacement à gauche */
  }

  
  
• Admirez les résultats finaux :
  
  
  
  

Enjoy