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&sub=3&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&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&sub=3&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&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
