Header
Partagez | 

[forumactif][Template] Modifier la mise en page du profil du posteur

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

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

Message Sujet: [forumactif][Template] Modifier la mise en page du profil du posteur   Mer 22 Juin - 11:32

Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à modifier les templates afin que le profil du posteur dans les messages ressemble à ça :

image tuto

Pré-requis : pour réaliser ce tutoriel vous devez :
- avoir votre forum en phpbb2
- avoir accès aux templates
- comprendre le html & le css

La prépration



Vous me commencez à me connaitre : je ne me lance jamais dans du codage avant d'avoir fait une maquette Smile Et oui ! Visualiser ce qu'on veut, c'est toujours très utile et cela facilite énormément le travail. J'ouvre donc un logiciel de graph' et je crée une maquette de ce que je veux coder. Voilà pour moi :

Spoiler:
 

Nb : dimensions de la maquette = 200px de large sur 300px de haut

Je vais donc avoir 3 images pour la forme de mon bloc "profil"

Spoiler:
 

La modification du template



On va commencer à entrer dans le vif du sujet. Avant de travailler le "faire beau", on va modifier la structure. Pour cela allez dans : Panneau d'admin >> affichage >> template >> général >> view_topic_body. C'est ce template qui permet l'affichage des messages dans un sujet.

On va repérer cette partie :

Code:
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


            <!-- 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>

qui correspond au profil du membre. Si on décortique un peu :

-> {postrow.displayed.U_POST_ID} : c'est une ancre contenu le numéro du message (ce qui se trouve après le # dans l'url)
Spoiler:
 

-> {postrow.displayed.POSTER_NAME} : lien vers le profil du posteur + son pseudo

-> {postrow.displayed.POSTER_RANK} : le rang du posteur

-> {postrow.displayed.RANK_IMAGE} : l'image du rang du posteur

-> {postrow.displayed.POSTER_AVATAR} : l'avatar du posteur

-> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} : toutes les infos du profil (date inscription, nombre de message, ....). Le LABEL = les intitulés ; Le CONTENT : le contenu ; le SEPARATOR = le plus souvent des retour à la ligne

-> {postrow.displayed.POSTER_RPG} : les infos de la fiche RPG

On va donc devoir modifier tout ça, afin que ça puisse ressembler à notre image.

Tout d'abord, nous allons faire un tableau à 3 lignes et une colonne. Nous allons aussi donner à chacune de nos cases (td) un nom de class, afin de pouvoir facilement travailler le css ensuite, sans oublier de donner aussi un nom de class au tableau.

Code:
<table class="tableau_profil" cellpadding="0" cellspacing="0">
            <tr>
               <td class="haut_tab"> </td>
            </tr>
            <tr>
               <td class="milieu_tab">
                   
               </td>
            </tr>
            <tr>
               <td class="bas_tab"> </td>
            </tr>
         </table>

NB : &_nbsp; (sans le _) signifie "espace vide". On s'en sert pour indiquer que notre case existe et doit s'afficher comme on le demande dans le css mais qu'elle n'a pas de contenu.

Notre case "milieu_tab" va contenir les infos du profil. On va donc la remplir avec le code repéré plus haut.

Code:
<table class="tableau_profil" cellpadding="0" cellspacing="0">
            <tr>
               <td class="haut_tab"> </td>
            </tr>
            <tr>
               <td class="milieu_tab">
                  <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


            <!-- 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>

               </td>
            </tr>
            <tr>
               <td class="bas_tab"> </td>
            </tr>
         </table>

Si vous validez le template, vous avez ceci pour le moment :

Spoiler:
 

Autrement dit, pas de changement visible ^^

On continue. Cette fois, on va prépare nos textes. Pour cela, on va donner à chacun d'eux un nom de class

*** Le pseudo :

Code:
<span class="pseudo_posteur">{postrow.displayed.POSTER_NAME}</span>

*** Le rang :

Code:
<span class="rang_posteur">{postrow.displayed.POSTER_RANK}</span>

*** Les infos : là on va tout mettre dans un bloc pour appliquer la couleur de fond qu'on désire Smile

Code:
<div class="infos_posteur"><!-- 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}
                     </div>

Une fois encore, si vous validez, il n'y a pas de changement ^^

Au final, notre code de départ ressemble à ça à présent :

Spoiler:
 


La mise en page



Travaillons maintenant le "beau" ^^ Pour cela, on va aller fouiner du coté de la feuille de style. Direction donc PA >> affichage >> images & couleurs >> couleurs >> feuille de style CSS

On va essayer de procéder par étape ^^

*** La forme

On va d'abord commencer par imposer une largeur à notre tableau de profil, et on va aussi le centrer et lui dire qu'il n'a pas de bordure

Code:
table.tableau_profil{
   width:200px;
   margin:auto;
   border:0;
   }

Ensuite, on va ajouter les images qu'on a créé au début du tutoriel.

- La première image sera l'image de fond de la case "haut_tab". Elle ne pourra pas se répéter, et aura donc une largeur et hauteur imposer qui correspond à sa taille.

Code:
table.tableau_profil td.haut_tab{
   width:200px;
   height:24px;
   background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/profil_01.png');
   background-repeat:no-repeat;
   }

- La seconde image sera l'image de fond de la case "milieu_tab". Celle-ci pourra se répéter en hauteur mais pas en largeur (elle aura donc une largeur fixe)

Code:
table.tableau_profil td.milieu_tab{
   width:200px;
   background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/profil_02.png');
   background-repeat:repeat-y;
   }

- La troisième image sera l'image de fond de la case "bas_tab". Elle ne pourra pas se répéter, et aura donc une largeur et hauteur imposer qui correspond à sa taille.

Code:
table.tableau_profil td.bas_tab{
   width:200px;
   height:20px;
   background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/profil_05.png');
   background-repeat:no-repeat;
   }

Pour le moment, on arrive à un profil qui ressemble à ça.

Spoiler:
 

*** Le texte

Attaquons nous à présent au texte. Premier souci à régler : le texte qui sort... Dans ma maquette, j'avais laisser une peu de transparence à droite et à gauche de mon fond. Du coup cette transparente fait partie de la largeur de mon image. Je dois donc laisser un peu de remplissage (padding) à droite et à gauche dans ma case "milieu_tab" afin de dire au texte : "hop ! tu te décales un peu, parce que là c'est du vide". On va donc ajouter ceci dans le css "table.tableau_profil td.milieu_tab"

Code:
   padding-left:14px;
   padding-right:14px;

Ensuite, on va centrer tout le texte de cette case. Pour cela, toujours dans le même css, on ajoute :

Code:
   text-align:center;

ça commence à prendre forme.

Spoiler:
 

On va maintenant modifier le pseudo du posteur. On va lui donner une typo, ainsi qu'une taille

Code:
table.tableau_profil td.milieu_tab span.pseudo_posteur{
   font-family:Comic Sans Ms;
   font-size:12pt;
   }

idem pour la partie "rang", mais cette fois, on va mettre le texte en italic et en blanc

Code:
table.tableau_profil td.milieu_tab span.rang_posteur{
   font-family:Comic Sans Ms;
   font-size:8pt;
   color:white;
   font-style:italic;
   }

Bon ! C'est presque terminé

Spoiler:
 

Il ne nous reste plus que la partie des infos du posteur. Cette fois, le texte de ce bloc va être aligné à gauche. Le bloc va avoir une couleur de fond un peu transparente et une bordure. On va aussi lui donner une largeur (pour qu'il ne soit pas trop grand par rapport à la case), on va centrer ce bloc et on va faire en sorte que le texte ne soit pas coller au bord du cadre grâce à un peu de remplissage (padding)

Code:
table.tableau_profil td.milieu_tab div.infos_posteur{
   width:160px;
   margin:auto;
   padding:4px;
   text-align:left;
   font-family:Comic Sans Ms;
   font-size:10pt;
   color:white;
   background-color:#c4b6a8;
   border:1px solid white;
   opacity:0.5; /* Transparence : 0 = transparent // 1 = opaque */
   -moz-opacity : 0.5; /* Transparence pour Firefox */
    -ms-filter: "alpha(opacity=50)"; /* Transparence pour IE 8 */
    filter : alpha(opacity=50); /* Transparence pour les versions IE antérieure à la 8 */
   }

Et voilà ! C'est terminé !

Au final, notre CSS ressemble à ça :

Spoiler:
 




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
[forumactif][Template] Modifier la mise en page du profil du posteur
Page 1 sur 1
 Sujets similaires
-
» mise en page des posts
» S. Demande de mise en page - Site du forum
» [Nocturne] Mise en page
» Mise en Page d'acceuil
» [Basil] Demande de mise en page
Réponse rapide

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