Welcome, you're not connected. ( Log in - Register )

Les commandes sont pour le moment fermées jusqu'à nouvel ordre, mais je peux assurer le support.

Merci de votre compréhension.


Requests are currently closed, but I can do some support.

Thanks for your understanding.



Important links - Liens importants

Règles - Rules | Présentez-vous - Introduce yourself | Problème d'inscription ? - Registration problem ?

Ishimaru-Design > Tutoriaux, ressources et support (fr) > Connectix Boards > Tutoriels & Astuces > [TPL] Afficher les messages dans le style MyBB/VB

RSS >  [TPL] Afficher les messages dans le style MyBB/VB, profils en haut des messages au lieu d'être à gauche
Ishimaru Chiaki #1 08/08/2009 - 21h48

Class : ID Admin
Posts : 1412
Registered on : 12/11/2007
Age : 28
Sex : Female

Offline Mail Www

Le moteur de templates de Connectix Boards permet d'énormes possibilités de personnalisation de la structure du forum, que ce soit dans l'agencement des blocs ou dans l'utilisation ou non des tableaux.

Dans ce tutoriel, je vais vous montrer à obtenir un affichage des messages comme sur MyBB et vBulletin. Vous apprendrez donc à passer de ceci à cela

Ces modifiations ont été testées sur un forum Connectix Boards 0.8.4 utilisant une copie du template Official et un skin de base Zephyr.  Il est recommandé de travailler sur une copie du template.

Comme il s'agit de modifier le bloc de code qui gère l'affichage des messages, on va devoir modifier le fichier templates/votre_template/part_showtopic.php, avec Notepad++ (Windows) ou gedit/kate (Linux)

Voici le bloc de code qu'on devra modifier :
Spoiler

<div class="table" id="table_topic">
<table>
    <caption>
        <?php echo $rss_tag;  echo $title_pre; ?><a href="<?php echo manage_url('index.php?showtopic='.$t_topicid, 'forum-t'.$t_topicid.'-p1,'.rewrite_words($t_topicname).'.html'); ?>"><?php echo $t_topicname;  if (!empty($t_topiccomment)): ?>, <?php echo $t_topiccomment;  endif; ?></a>
    </caption>

    <tfoot>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </tfoot>

    <?php foreach ($t_messages as $message): ?>
    <tr class="field1">
        <td class="messageuser">
            <?php echo $message['mess_userlink']; ?>
        </td>
        <td class="messageheader">
            <?php echo $message['mess_inlink']; ?>
            <span class="messhead<?php echo ($message['mess_read']?'read':'unread'); ?>" title="<?php echo lang('t_msg_'.($message['mess_read']?'read':'unread')); ?>"></span>
            <span class="messheadlocalid">#<?php echo $message['mess_localid']; ?></span>
            <span class="messheaddate">
                <a href="#<?php echo $message['mess_id']; ?>" onclick="prompt('<?php echo lang('t_directlink'); ?>','<?php echo $message['mess_link']; ?>');"><?php echo $message['mess_time']; ?></a> 
                <?php if ($message['u_showip'] && $message['user_ip'] != '0.0.0.0'): ?>| IP: <a href="admin.php?act=ip&amp;sub=3&amp;analyze=<?php echo $message['user_ip']; ?>"><?php echo $message['user_ip']; ?></a><?php endif; ?>
            </span>
            <ul class="messheadoptions">
                <?php echo $message['mess_scroll'];  echo $message['mess_buttonoptions']; ?>
            </ul>
        </td>
    </tr>
    <tr class="field1">
        <td class="messageuser2">
            <?php if ($message['user_id']): ?>
            <p class="avatar">
                <?php echo $message['mess_userinfo_avatar']; ?>
            </p>
            <?php if ($message['u_canpunish']): ?>
            <p class="t_reputation">
                <?php echo $message['mess_userinfo_reputation']; ?>
            </p>
            <?php endif; ?>
            <p class="userinfos">
                <?php if (!empty($message['mess_userinfo_group_img'])): ?>
                <?php echo $message['mess_userinfo_group_img']; ?><br />
                <?php endif; ?>
                <?php echo lang('class'); ?> : <?php echo $message['mess_userinfo_group']; ?> <br />
                <?php echo lang('posts'); ?> : <?php echo $message['mess_userinfo_posts']; ?> <br />
                <?php echo lang('registered'); ?> : <?php echo $message['mess_userinfo_registered']; ?>
            </p>
            <p class="communication">
                <?php echo $message['mess_userinfo_connected']; ?>
                <?php if ($g_islogged): ?>
                <?php echo $message['mess_mpicon']; ?>
                <?php endif; ?>
                <?php echo $message['mess_mailicon']; ?>
                <?php echo $message['mess_wwwicon']; ?>
            </p>
            <?php if ($message['u_canpunish']): ?>
            <p class="punish">
                <a href="<?php echo manage_url('index.php?act=user&amp;editprofile='.$message['user_id'], 'forum-profile'.$message['user_id'].'.html'); ?>" class="mod_editpr"><span><?php echo lang('mod_editprofile'); ?></span></a>
            </p>
            <?php endif; ?>
            <?php else: ?>
            <p class="communication">
                <?php echo lang('t_postbyguest'); ?>
            </p>
            <?php endif; ?>
        </td>
        <td class="message">
            <div class="messagecontent">
                <?php echo $message['mess_messcontent']; ?>
            </div>
            <?php if ($message['mess_edited']): ?>
            <div class="messageedit">
                <?php echo lang(array('item' => "t_edited", 'user' => $message['mess_edit_userlink'], 'date1' => $message['mess_edit_date1'], 'date2' => $message['mess_edit_date2'])); ?>
            </div>
            <?php endif; ?>
            <?php if (!empty($message['mess_signature'])): ?>
            <div class="messagesignature">
                <?php echo $message['mess_signature']; ?>
            </div>
            <?php endif; ?>
        </td>
    </tr>
    <?php endforeach; ?>
</table>
</div>



Pour faire plus court...
<div class="table" id="table_topic">
<table>
   <caption>
       <!-- titre du sujet -->
   </caption>

   <tfoot>
       <tr>
           <th></th>
           <th></th>
       </tr>
   </tfoot>

   <tr class="field1">
       <td class="messageuser">
            <!-- nom du posteur -->
       </td>
       <td class="messageheader">
            <!-- infos relatifs au message -->
       </td>
   </tr>
   <tr class="field1">
       <td class="messageuser2">
        <!-- infos du posteur -->
       </td>
       <td class="message">
           <!-- message et signature -->
       </td>
   </tr>

</table>
</div>

On veut donc faire quelquechose qui ressemble à ceci :
<div class="table" id="table_topic">
<table>
   <caption>
       <!-- titre du sujet -->
   </caption>

   <tfoot>
       <tr>
           <th></th>
       </tr>
   </tfoot>

   <tr class="field1">
       <td class="messageheader">
            <!-- infos relatifs au message -->
       </td>
   </tr>
   <tr class="field1">
       <td class="messageuser2">
        <!-- infos du posteur incluant pseudo -->
       </td>
   </tr>
   <tr>
       <td class="message">
           <!-- message et signature -->
       </td>
   </tr>
   <tr>
       <td class="messageoptions">
           <!-- Boutons du profil et du message -->
       </td>
   </tr>

</table>
</div>

Donc, on passe de deux colonnes à une seule colonne, et on ajoute des rangées.

Voici le code modifié pour remplacer le code complet que j'ai mis plus haut :
Spoiler

<div class="table" id="table_topic">
<table>
    <caption>
        <?php echo $rss_tag;  echo $title_pre; ?><a href="<?php echo manage_url('index.php?showtopic='.$t_topicid, 'forum-t'.$t_topicid.'-p1,'.rewrite_words($t_topicname).'.html'); ?>"><?php echo $t_topicname;  if (!empty($t_topiccomment)): ?>, <?php echo $t_topiccomment;  endif; ?></a>
    </caption>

    <tfoot>
        <tr>
            <th></th>
        </tr>
    </tfoot>

    <?php foreach ($t_messages as $message): ?>
    <tr class="field1">
        <td class="messageheader">
            <?php echo $message['mess_inlink']; ?>
            <span class="messhead<?php echo ($message['mess_read']?'read':'unread'); ?>" title="<?php echo lang('t_msg_'.($message['mess_read']?'read':'unread')); ?>"></span>
            <span class="messheadlocalid">#<?php echo $message['mess_localid']; ?></span>
            <span class="messheaddate">
                <a href="#<?php echo $message['mess_id']; ?>" onclick="prompt('<?php echo lang('t_directlink'); ?>','<?php echo $message['mess_link']; ?>');"><?php echo $message['mess_time']; ?></a> 
                <?php if ($message['u_showip'] && $message['user_ip'] != '0.0.0.0'): ?>| IP: <a href="admin.php?act=ip&amp;sub=3&amp;analyze=<?php echo $message['user_ip']; ?>"><?php echo $message['user_ip']; ?></a><?php endif; ?>
            </span>
            <ul class="messheadoptions">
                <?php echo $message['mess_scroll'];?>
            </ul>
        </td>
    </tr>
    <tr class="field1">
        <td class="messageuser2">
            <?php if ($message['user_id']): ?>
            <p class="avatar">
                <?php echo $message['mess_userinfo_avatar']; ?>
            </p>
            <p class="userinfos2">
                <?php echo lang('registered'); ?> : <?php echo $message['mess_userinfo_registered']; ?>
            </p>
            <p class="userinfos">
            <?php if ($message['u_canpunish']): ?>
            <span class="t_reputation">
                <?php echo $message['mess_userinfo_reputation']; ?>
            </span>
            <?php endif; ?>
                <?php echo '<span class="username">'.$message['mess_userlink'].'</span>'; ?><br />
                <?php if (!empty($message['mess_userinfo_group_img'])): ?>
                <?php echo $message['mess_userinfo_group_img']; ?><br />
                <?php endif; ?>
                <?php echo lang('class'); ?> : <?php echo $message['mess_userinfo_group']; ?> <br />
                <?php echo lang('posts'); ?> : <?php echo $message['mess_userinfo_posts']; ?>
            </p>
        </td>
    </tr>
    <tr>
        <td class="message">
            <div class="messagecontent">
                <?php echo $message['mess_messcontent']; ?>
            </div>
            <?php if ($message['mess_edited']): ?>
            <div class="messageedit">
                <?php echo lang(array('item' => "t_edited", 'user' => $message['mess_edit_userlink'], 'date1' => $message['mess_edit_date1'], 'date2' => $message['mess_edit_date2'])); ?>
            </div>
            <?php endif; ?>
            <?php if (!empty($message['mess_signature'])): ?>
            <div class="messagesignature">
                <?php echo $message['mess_signature']; ?>
            </div>
            <?php endif; ?>
        </td>
    </tr>
    <tr>
        <td class="messageoptions">
             <p class="communication">
                <?php echo $message['mess_userinfo_connected']; ?>
                <?php if ($g_islogged): ?>
                <?php echo $message['mess_mpicon']; ?>
                <?php endif; ?>
                <?php echo $message['mess_mailicon']; ?>
                <?php echo $message['mess_wwwicon']; ?>
            </p>
            <?php if ($message['u_canpunish']): ?>
            <p class="punish">
                <a href="<?php echo manage_url('index.php?act=user&amp;editprofile='.$message['user_id'], 'forum-profile'.$message['user_id'].'.html'); ?>" class="mod_editpr"><span><?php echo lang('mod_editprofile'); ?></span></a>
            </p>
            <?php endif; ?>
            <?php else: ?>
            <p class="communication">
                <?php echo lang('t_postbyguest'); ?>
            </p>
            <?php endif; ?>
             <ul class="messoptions">
                 <?php echo $message['mess_buttonoptions']; ?>
             </ul>
        </td>
    </tr>
    <?php endforeach; ?>
</table>
</div>




Maintenant, il reste le CSS, afin d'avoir un rendu optimal.  Ces changements que je montre sont faits à partir d'un skin Zephyr.

Ouvrez le fichier skins/votreskin/style.css

Cherchez :
.messageuser {
   background: rgb(117,149,200);
   border-right:1px solid rgb(107,139,190);
   width:200px;
   vertical-align:top;
   text-align:center;
}
.messageuser a, .messageuser .guest_name {
   font-size:1.1em;
   font-weight:bold;
   font-family:Georgia,Verdana,"Century Gothic",Arial,serif;
   color:white;
}

Supprimez-le ou mettez-le entre commentaires /* comme ceci */

Cherchez :
.messageuser2 {
   background-color:rgb(220,220,220);
   width:200px;
   text-align:center;
   vertical-align:top;
   font-size:95%;
}

Supprimez ces lignes :
   width:200px;
   text-align:center;


Cherchez :
.avatar {
   width:200px;
   overflow:hidden;
   margin:0px auto 0px auto;
   padding:0px;
   text-align:center;
}

Remplacez par :
.avatar {
   width:110px;
   overflow:hidden;
   margin:0px auto 0px auto;
   padding:0px;
   text-align:center;
   float:left;
}

Cherchez :
.userinfos { margin:0; padding:0; }

Après, rajoutez :
.userinfos .username, .userinfos .username a { font-size: 130%; font-weight:bold;}
.userinfos2 {float:right; width: 200px;}

Cherchez :
.usr_online        { background:url(usr_online2.jpg) 0 0 no-repeat;     width:18px;  height:18px; display:block; margin:0px; }
.usr_offline    { background:url(usr_offline2.jpg) 0 0 no-repeat;     width:18px;  height:18px; display:block; margin:0px; }

Remplacez par :
.usr_online        { background:url(usr_online2.jpg) 0 0 no-repeat;     width:18px;  height:18px; display:block; margin:0px; float:left;}
.usr_offline    { background:url(usr_offline2.jpg) 0 0 no-repeat;     width:18px;  height:18px; display:block; margin:0px; float:left;}

Cherchez :
.t_reputation { width:125px; margin:4px auto; }

Remplacez par :
.t_reputation { width:125px; margin:4px auto; text-align:left; }

Cherchez :
.messheadoptions {
   list-style-type:none;
   text-align:right;
   margin:0;
   padding:0;
}
.messheadoptions li {
   float:right;
   padding:0;
   margin:0;
}

Remplacez par :
.messheadoptions, .messoptions{
   list-style-type:none;
   text-align:right;
   margin:0;
   padding:0;
}
.messheadoptions li, .messoptions li{
   float:right;
   padding:0;
   margin:0;
}
.messageoptions {
   background-color:rgb(245,245,245);
}

Cherchez :
.communication { margin:10px auto 5px auto; padding:0; }

Remplacez par :
.communication { margin:0px auto 0px auto; padding:0; float:left; }

Et voilà, c'est fini !

Il ne vous reste plus qu'à personnaliser le CSS à votre goût au niveau des couleurs et des polices :)
My portfolio (only available in French for now) | My geek girl blog (French only) | My Twitter feed

 >  Fast reply

Message

Ishimaru-Design > Tutoriaux, ressources et support (fr) > Connectix Boards > Tutoriels & Astuces > [TPL] Afficher les messages dans le style MyBB/VB

 >  Stats

1 user(s) connected during the last 10 minutes (0 member(s) and 1 guest(s)).

Connectix Boards (fr) | phpBB.com | phpBB-fr.com | phpBB.biz | phpBB3styles | phpBBHacks | Awesomestyles | phpBB-France | Le site du zéro | Servhome | Gimp-Attitude | Phobies-Zéro | Expomatique