forum-test-onyx4

forumtest
Le Deal du moment : -20%
Ecran PC GIGABYTE 28″ LED M28U 4K ( IPS, 1 ms, ...
Voir le deal
399 €

 

 Interforum - Épreuve 5

Aller en bas 
2 participants
AuteurMessage
Admin
Team Fighter I
Team Fighter I
Admin

Messages : 26
Date d'inscription : 01/10/2014
Age : 30
Métier : plombier

Feuille de personnage
Champ X RPG: Bla bla bla

Interforum - Épreuve 5 Empty
MessageSujet: Interforum - Épreuve 5   Interforum - Épreuve 5 EmptySam 5 Oct - 20:27

Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc.

Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc.

Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc. Je suis un message, je suis un message, etc.
Revenir en haut Aller en bas
https://forum-test-onyx4.forum-canada.com
Karla

Karla

Messages : 1
Date d'inscription : 17/02/2015

Feuille de personnage
Champ X RPG: Bla bla bla

Interforum - Épreuve 5 Empty
MessageSujet: Re: Interforum - Épreuve 5   Interforum - Épreuve 5 EmptySam 4 Sep - 15:51

Un autre test
Revenir en haut Aller en bas
Admin
Team Fighter I
Team Fighter I
Admin

Messages : 26
Date d'inscription : 01/10/2014
Age : 30
Métier : plombier

Feuille de personnage
Champ X RPG: Bla bla bla

Interforum - Épreuve 5 Empty
MessageSujet: Re: Interforum - Épreuve 5   Interforum - Épreuve 5 EmptyJeu 23 Sep - 20:11

Pour faire cela, il est toujours plus aisé d'utiliser le Profil Simple.

Contrairement au Profil Avancé, le profil Simple a moins d'options. On ne peut pas laisser de commentaire, on ne voit pas les admis et les statistiques sont moins détaillées. Considérant que ce sont des éléments très peu utilisés, ce n'est pas une grosse perte. Le gros avantage du profil Simple au profil Avancé, c'est qu'on a accès au template et c'est exactement ce qu'on veut faire ici.

Avec le profil Simple, la première chose à faire est d'aller dans le template X.

Le Template est composé de plusieurs éléments sur lesquels on va passer.

Voici le fil d'Ariane au dessus du profil :
Code:
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
    <td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
  </tr>
</table>

Nous avons ensuite un tableau qui va contenir plusieurs sections.

IMAGE.

Nous allons avoir un grand tableau avec 6 lignes.
- En bleu, nous avons la 1ère ligne, celle du titre "Voir le profil de ..."
- En rouge, nous avons la 2ème ligne, celle des en-êtes des deux premières sections.
- En vert, nous avons la 3ème ligne qui contient:
- - À gauche, l'avatar, le rang, la présence, la gestion des amis et les options des Admins.
- - À droite, les statistiques et les champs de profil.
- En mauve, nous avons les lignes 4 et 5, celles des champs de contact.
- En orange, nous avons les lignes 6 à 8, celles de la feuille de personnage RPG.

Du coup, nous allons commencer les lignes 1 et 2 :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center"><!-- Début du tableau qui comprend tout le profil -->

  <tr><!-- Première ligne qui indique "Voir le profil de PSEUDO" -->
    <th class="thHead" colspan="2" nowrap="nowrap" height="25">
      <h1 class="h_member">{L_VIEWING_PROFILE}</h1>
    </th>
  </tr>
  
  <tr><!-- Deuxième ligne qui indique, "Présence sur le forum" à gauche et "Tout à propos de PSEUDO" à droite -->
    <td class="catLeft" align="center" width="40%" height="28"><b><span class="gen">{L_USER_PRESENCE}</span></b></td><!-- "Présence sur le forum" à gauche -->
    <td class="catRight" width="60%" align="center"><b><span class="gen">{L_ABOUT_USER}</span></b></td><!-- "Tout à propos de PSEUDO" à droite -->
  </tr>

Ensuite, on arrive enfin aux informations du profil de la 3ème ligne. On va voir la section "Présence sur le forum" à gauche pour commencer :
Code:
 <tr><!-- Troisième ligne -->
    <td class="row1" align="center" valign="top" height="120"><!-- On est à gauche -->
      <table width="100%" border="0" cellspacing="1" cellpadding="0"><!-- Les informations à gauche sont dans un tableau -->
      
        <tr><!-- Ligne de l'avatar -->
          <td valign="middle" nowrap="nowrap" align="right" width="20%"><span class="gen">{L_AVATAR_IMG} </span></td><!-- "Avatar:" -->
          <td width="80%"><b><span class="gen">{AVATAR_IMG}</span></b></td><!-- Image de l'avatar -->
        </tr>
        
        <tr><!-- Ligne du rang -->
          <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_RANK}: </span></td><!-- "Rang:" -->
          <td><b><span class="gen">{POSTER_RANK}</span></b></td><!-- Rang (incluant le nom et l'image) -->
        </tr>

        <!-- BEGIN switch_show_status -->
        <tr><!-- Ligne de présence (s'affiche seulement si on ne cache pas notre présence) -->
          <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_STATUT}: </span></td><!-- Le "Statut:" -->
          <td><b><span class="gen">{USER_ONLINE}</span></b></td><!-- Affiche si la personne est connectée ou non -->
        </tr>
        <!-- END switch_show_status -->

        <!-- BEGIN switch_allow_friendsfoes -->
        <tr><!-- Ligne pour gérer les amis et les ignorés -->
          <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_FRIENDS_AND_FOES}: </span></td><!-- "Amis et ignorés:" -->
          <td><span class="gen"><strong>{FRIENDSFOES}</strong></span></td>
        </tr><!-- Permet de supprimer de la liste d'amis ou de la liste d'ignorés -->
        <!-- END switch_allow_friendsfoes -->

        <!-- BEGIN switch_auth_user -->
        <tr><!-- Ligne pour les administrateurs -->
          <td valign="middle" nowrap="nowrap" align="right"><br /><span class="gen">{L_ADMINISTRATE_USER}: </span></td><!-- "Administrer l'utilisateur:" -->
          <td><br /><strong><span class="gen">{ADMINISTRATE_USER}{BAN_USER}</span></strong></td><!-- Permet d'accéder au profil dans la panneau d'administration ou de bannir l'utilisateur -->
        </tr>
        <!-- END switch_auth_user -->
        
      </table>
    </td>

 
Maintenant, on passe à droite, à savoir la section des statistiques et des champs de profil.
Code:
   <td class="row1" rowspan="3" valign="top"><!-- On est à droite -->
      <table width="100%" border="0" cellspacing="1" cellpadding="0"><!-- Les informations sont dans un tableau -->
      
        <tr><!-- Ligne de la dernière visite -->
          <td align="right" valign="top" nowrap="nowrap"><span class="gen">{L_LAST_VISITED}:  </span></td><!-- "Dernière visite:" -->
          <td><b><span class="gen">{LAST_VISIT_TIME}</span></b></td><!-- Date de la dernière visite -->
        </tr>

        <!-- BEGIN switch_dhow_mp -->
        <tr><!-- Ligne du nombre de MP -->
          <td align="right" valign="middle" nowrap="nowrap"><span class="gen">{L_PRIVATE_MSG}:  </span></td><!-- "Messages privés" -->
          <td><b><span class="gen">{PRIVATE_MSG}</span></b></td><!-- Nombre de messages privés -->
        </tr>
        <!-- END switch_dhow_mp -->

        <!-- BEGIN profile_field -->
        <tr id="field_id{profile_field.ID}"><!-- Ligne de chaque champ de profil -->
          <td width="40%" align="right" valign="top" nowrap="nowrap"><span class="gen">{profile_field.LABEL}  </span></td><!-- Le nom du champ de profil -->
          <td width="60%">
            <div class="gen" style="font-weight:bold;">{profile_field.CONTENT}</div><!-- Contenu du champ -->
            <br />
            
            <!-- BEGIN profil_type_user_posts -->
            <span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span><!-- Pour le champ des messages, on a les statistiques du nombre de messages -->
            <br />
            <span class="genmed">
            <a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a><!-- Sujets ouverts par l'utilisateur -->
            <br />  
            - <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><!-- Sujets où l'utilisateur a participé -->
              <br />  
              - <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a><!-- Messages de l'utilisateur -->
              </span>
              <!-- END profil_type_user_posts -->
              
          </td>
        </tr>
        <!-- END profile_field -->

      </table>
    </td>
    </tr>

Donc si on résume, on une ligne pour la dernière visite, une ligne pour les messages privés, puis la section des champs de profil avec une particularité pour le nombre de messages qui a des statistiques.


Passons maintenant à la 4ème et 5ème ligne, soit la section des champs de contact.
Code:
 <tr><!-- Quatrième ligne ligne -->
    <td class="catLeft" align="center" height="28"><b><span class="gen">{L_CONTACT} {USERNAME}</span></b></td><!-- Troisième ligne -->
  </tr>

  <tr><!-- Cinquième ligne -->
    <td class="row1" valign="top" height="{S_CONTACT_HEIGHT}">
      <table width="100%" border="0" cellspacing="1" cellpadding="0"><!-- Comme d'habitude, les informations sont dans un tableau... -->
      
        <!-- BEGIN contact_field -->
        <tr id="field_id{contact_field.ID}"><!-- Ligne de chaque champ de contact -->
          <td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">{contact_field.LABEL} &nbsp;</span></td><!-- Label d'un champ de contact -->
          <td width="60%" valign="middle">
            <div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div>
          </td><!-- Contenu du champ de contact -->
        </tr>
        <!-- END contact_field -->

        <!-- Cette section est pour que l'Admin puisse laisser un message -->
        <!-- BEGIN switch_admin_user_comment_active -->
        <tr>
          <td align="right" valign="middle" nowrap="nowrap" width="50%">
            <span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span>
          </td>
          <td class="row1" valign="middle">
            <table align="center">
              <tr>
                <td>
                  {ADMIN_USER_COMMENT}
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <!-- END switch_admin_user_comment_active -->
        
      </table>
    </td>
  </tr>
 
Et voilà ! Ce n'était pas aussi compliqué de d'habitude au moins. Je n'ai pas détaillé la section où les Admins/Modos peuvent laisser un message parce que je n'ai jamais trouvé comment activer cette section...

 
Bon, la section de la feuille RPG n'est pas un petit morceau. On y a 3 lignes :
- La ligne 6 comprend le titre de la feuille de personnage.
- La ligne 7 comprend les champs des personnages.
- - À gauche, on a l'avatar de la feuille de personnage (et les champs qu'on a décidé d'afficher à gauche).
- - À droite on a les champs de la feuille de personnage
- La ligne 8 nous envoie sur la page pour modifier la feuille de personnage pour les Admins.

Vous saviez qu'on avait une option quand on crée les champs de la feuille de personnage pour décider si on les affiche à droite ou à gauche? Pas moi. Je dirais que c'est totalement inutile, à moins que vous souhaitiez créer 2 groupes de champs dans la feuille RPG, ce qui intéresserait peut-être certains d'entrevous ?

Bref, assez de blabla, voilà :
Code:
<!-- BEGIN switch_rpg -->
  <tr><!-- Sixième ligne -->
    <td colspan="2" class="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td><!-- Titre de la feuille de personage -->
  </tr>
  
  <tr><!-- Septième ligne -->
  
    <td class="row1" align="center" valign="top" height="6"><!-- À gauche -->
      {RPG_IMAGE}<!-- Avatar RPG -->
      <br /><br />
      
      <table width="100%" border="0" cellspacing="1" cellpadding="0"><!-- Tableau des champs affichés à gauche -->
        <!-- BEGIN rpg_fields_left -->
        <tr><!-- Chaque champ RPG -->
          <td align="right" valign="middle" nowrap="nowrap">
            <span class="gen">{switch_rpg.rpg_fields_left.F_NAME} : </span>
          </td><!-- Label du champ RPG -->
          <td width="100%" valign="middle" nowrap="nowrap">
            <b><span class="gen">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span></b>
          </td><!-- Contenu du champ rpg -->
        </tr>
        <!-- END rpg_fields_left -->
      </table>
    </td>
    
    <td class="row1" align="center" valign="top" height="6"><!-- À droite -->
      <table width="100%" border="0" cellspacing="1" cellpadding="0"><!-- Tableau des champs affichés à droite -->
        <!-- BEGIN rpg_fields -->
        <tr><!-- Chaque champ RPG -->
          <td align="right" valign="middle" nowrap="nowrap">
            <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span>
          </td><!-- Label du champ RPG -->
          <td width="100%" valign="baseline">
            <b><span class="gen">{switch_rpg.rpg_fields.F_VALUE_NEW}</span></b>
          </td><!-- Contenu du champ RPG -->
        </tr>
        <!-- END rpg_fields -->
      </table>
    </td>
  </tr>

  <tr><!-- Huitième ligne -->
    <td colspan="2" align="center" class="row1">
      {U_ADMIN_RPG}<!-- Bouton "Modifier" -->
    </td>
  </tr>
  <!-- END switch_rpg -->
  
</table><br />

Le reste, c'est le javascript de la page auquel on ne touche surtout pas.
Revenir en haut Aller en bas
https://forum-test-onyx4.forum-canada.com
Admin
Team Fighter I
Team Fighter I
Admin

Messages : 26
Date d'inscription : 01/10/2014
Age : 30
Métier : plombier

Feuille de personnage
Champ X RPG: Bla bla bla

Interforum - Épreuve 5 Empty
MessageSujet: Re: Interforum - Épreuve 5   Interforum - Épreuve 5 EmptyJeu 23 Sep - 21:04

C'est bien beau de savoir quoi est quoi, mais ensuite?

Eh bien, on va commencer par extraire du Template ce qui nous intéresse :
Code:
{USERNAME} /* Nom du membre */
{AVATAR_IMG} /* Avatar du membre */
{POSTER_RANK} /* Rang (nom et image) du membre */

<!-- BEGIN switch_show_status -->
{USER_ONLINE} /* Affiche si le membre en En ligne ou Hors ligne */
<!-- END switch_show_status -->

<!-- BEGIN switch_allow_friendsfoes -->
{FRIENDSFOES} /* Lien pour supprimer de la liste d'amis/d'ignorés */
<!-- END switch_allow_friendsfoes -->

<!-- BEGIN switch_auth_user -->
ADMINISTRATE_USER}{BAN_USER} /* Pour les Admins afin d'accéder au profil ou de bannir l'utilisateur */
<!-- END switch_auth_user -->

{LAST_VISIT_TIME} /* Dernière date de visite */

<!-- BEGIN switch_dhow_mp -->
{PRIVATE_MSG} /* Nombre de messages privés */
<!-- END switch_dhow_mp -->

<!-- BEGIN profile_field -->
id="field_id{profile_field.ID}" /* Chaque ligne de champ de profil doit avoir cet id */
{profile_field.LABEL} /* Nom du champ de profil */
{profile_field.CONTENT} /* Contenu du champ de profil */
<!-- END profile_field -->

<!-- BEGIN profil_type_user_posts -->
<a href="/st/{PUSERNAME}">Sujets ouverts</a> /* Lien des sujets ouverts par l'utilisateur */
<a href="/sta/{PUSERNAME}">{L_TOPICS}</a> /* Lien des sujets où l'utilisateur a participé */
<a href="/spa/{PUSERNAME}">{L_POSTS}</a> /* Lien des messages de l'utilisateur */
<!-- END profil_type_user_posts -->

  <!-- BEGIN contact_field -->
id="field_id{contact_field.ID}" /* id de chaque champ de contact */
{contact_field.LABEL} /* Label d'un champ de contact */
{contact_field.CONTENT} /* Contenu du champ de contact */
<!-- END contact_field -->

<!-- BEGIN switch_rpg -->
{L_VIEWING_RPG} /* Nom de la feuille de personnage */
{RPG_IMAGE} /* Avatar de la feuille de personnage */
<!-- BEGIN rpg_fields_left -->
{switch_rpg.rpg_fields_left.F_NAME} /* Label du champ RPG de gauche */
{switch_rpg.rpg_fields_left.F_VALUE_NEW} /* Contenu du champ rpg de gauche */
<!-- END rpg_fields_left -->
<!-- BEGIN rpg_fields -->
{switch_rpg.rpg_fields.F_NAME} /* Label du champ RPG */
{switch_rpg.rpg_fields.F_VALUE_NEW} /* Contenu du champ RPG */
<!-- END rpg_fields -->
{U_ADMIN_RPG} /* Bouton "Modifier" */
<!-- END switch_rpg -->

Ensuite, on restructure tout comme on le souhaite. J'ai choisi de gardé le fil d’Ariane en haut, puis de mettre presque tout le reste dans des blocs :
Code:
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
    <td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
  </tr>
</table>

<div id="leprofil"><!-- Début du bloc qui comprend tout le profil -->
  <h1 class="leprofil_titre">{USERNAME}</h1><!-- Le titre -->


  <div class="leprofil_avatar">{AVATAR_IMG}</div><!-- Image de l'avatar -->

  <div class="leprofil_rang">{POSTER_RANK}</div><!-- Rang (incluant le nom et l'image) -->

  
  <!-- BEGIN switch_show_status -->
  <div class="leprofil_online">{USER_ONLINE}</div><!-- Affiche si la personne est connectée ou non -->
  <!-- END switch_show_status -->


  <!-- BEGIN switch_allow_friendsfoes -->
  <div class="leprofil_amis">{FRIENDSFOES}</div><!-- Permet de supprimer de la liste d'amis ou de la liste d'ignorés -->
  <!-- END switch_allow_friendsfoes -->

  
  <!-- BEGIN switch_auth_user -->
  <div class="leprofil_admin">Administrer le membre: {ADMINISTRATE_USER}{BAN_USER}</div><!-- Permet d'accéder au profil dans la panneau d'administration ou de bannir l'utilisateur -->
  <!-- END switch_auth_user -->


 <div class="leprofil_stats"><!-- Bloc des statistiques -->
   <div class="leprofil_lastvisit">
     {L_LAST_VISITED}: <!-- "Dernière visite:" -->
     {LAST_VISIT_TIME}<!-- Date de la dernière visite -->
   </div>
    
    <!-- BEGIN switch_dhow_mp -->
    <div class="leprofil_mp">
      {L_PRIVATE_MSG}: <!-- "Messages privés" -->
      {PRIVATE_MSG}<!-- Nombre de messages privés -->
    </div>
    <!-- END switch_dhow_mp -->

    <!-- BEGIN profil_type_user_posts -->
    - <a href="/st/{PUSERNAME}">Sujets ouverts</a><br /><!-- Sujets ouverts par l'utilisateur -->
    - <a href="/sta/{PUSERNAME}">{L_TOPICS}</a><br /><!-- Sujets où l'utilisateur a participé -->
    - <a href="/spa/{PUSERNAME}">{L_POSTS}</a><!-- Messages de l'utilisateur -->
    <!-- END profil_type_user_posts -->
  </div>


  <div class="leprofil_leschamps"><!-- Bloc qui inclus tous les champs de profil -->
    <!-- BEGIN profile_field -->
    <div class="leprofil_champ" id="field_id{profile_field.ID}"><!-- Ligne de chaque champ de profil -->
      <span class="leprofil_champ_label">{profile_field.LABEL}  </span><!-- Le nom du champ de profil -->
      <span class="leprofil_champ_contenu">{profile_field.CONTENT}</span><!-- Contenu du champ -->
    </div>
    <!-- END profile_field -->
  </div>


 <div class="leprofil_lescontacts"><!-- Bloc qui contient tous les champs de contact -->
    <!-- BEGIN contact_field -->
    <div class="leprofil_contact" id="field_id{contact_field.ID}"><!-- Ligne de chaque champ de contact -->
      <span class="leprofil_contact_label">{contact_field.LABEL} &nbsp;</span><!-- Label d'un champ de contact -->
      <span class="leprofil_contact_contenu">{contact_field.CONTENT}</span><!-- Contenu du champ de contact -->
    </div>
    <!-- END contact_field -->
  </div>


<!-- BEGIN switch_rpg -->
  <div class="leprofil_rpg"><!-- Bloc du RPG -->
  
    <div class="leprofil_rpg_titre">{L_VIEWING_RPG}</div><!-- Titre de la feuille de personnage -->
  
    <div class="leprofil_rpg_avatar">{RPG_IMAGE}</div><!-- Avatar RPG -->
      
    <div class="leprofil_rpg_gauche_champs"><!-- Bloc des champs affichés à gauche -->
      <!-- BEGIN rpg_fields_left -->
      <div class="leprofil_rpg_gauche_champ"><!-- Chaque champ RPG -->
        <span class="leprofil_rpg_gauche_champ_label">{switch_rpg.rpg_fields_left.F_NAME} : </span><!-- Label du champ RPG -->
        <span class="leprofil_rpg_gauche_champ_contenu">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span><!-- Contenu du champ rpg -->
      </div>
      <!-- END rpg_fields_left -->
    </div>
    
    <div class="leprofil_rpg_champs"><!-- Bloc des champs affichés à droite -->
    <!-- BEGIN rpg_fields -->
      <div class="leprofil_rpg_champ"><!-- Chaque champ RPG -->
        <span class="leprofil_rpg_champ_label">{switch_rpg.rpg_fields.F_NAME} : </span><!-- Label du champ RPG -->
        <span class="leprofil_rpg_champ_contenu">{switch_rpg.rpg_fields.F_VALUE_NEW}</span><!-- Contenu du champ rpg -->
      </div>
      <!-- END rpg_fields -->
    </div>
    
    <div class="leprofil_rpg_modif">{U_ADMIN_RPG}</div><!-- Bouton "Modifier" -->
  <!-- END switch_rpg -->
  </div>

</div>
<br />
Revenir en haut Aller en bas
https://forum-test-onyx4.forum-canada.com
Contenu sponsorisé




Interforum - Épreuve 5 Empty
MessageSujet: Re: Interforum - Épreuve 5   Interforum - Épreuve 5 Empty

Revenir en haut Aller en bas
 
Interforum - Épreuve 5
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
forum-test-onyx4 :: Nom :: Présentations-
Sauter vers: