Tutorials: Tutorial: New design for block comments, step by step
Posted by: alain01On 2013/2/19 21:40:00 7840 readsI would like share with you my experience with a new style of news: a step by step tutorial. In this edition, I will show you how to modify the comments block. The default design of this block is pretty old, so let's bring small but smart design changes to make the display more useful. Please let's see an exemple here (Not xoops web site). First, you should understand how overloaded theme work (surcharge du thème) The best tutorial for this is this one on XOOPS France (in French). We will start step by step in order to explain to you how it is possible, and in the end, you should practice these changes with another block. I will invite you to upload the files step by step, so it would be more clear for you. So, now, let's gooooooo !!! We need : - Template files comments from the system module - CSS file from your theme (style.css) 1 - Template files comments to the overloaded theme Copy the files /www/modules/system/templates/system_comment*.html to /www/themes/mytheme/modules/system - system_comment.html - system_comments_flat.html - system_comments_net.html - system_comments_thread.html 2 - Customization 2a Head Now, we work on the files on /www/themes/mytheme/modules/system We start to delete the top head Edit the 3 files system_comments_*.html and comment this out (or delete this) :
<div class="comUserRank">
<div class="comUserRankText"><{$comment.poster.rank_title}>div>
<img class="comUserRankImg" src="<{$xoops_upload_url}>/<{$comment.poster.rank_image}>" alt="" />
div>
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
<div class="comUserStat"><span class="comUserStatCaption"><{$lang_joined}>:span> <{$comment.poster.regdate}>div>
<div class="comUserStat"><span class="comUserStatCaption"><{$lang_from}>:span> <{$comment.poster.from}>div>
<div class="comUserStat"><span class="comUserStatCaption"><{$lang_posts}>:span> <{$comment.poster.postnum}>div>
<div class="comUserStatus"><{$comment.poster.status}>div>
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
<tr>
<td class="head"><a id="comment<{$comment.id}>">a> <{$comment.poster.uname}>td>
<td class="head"><div class="comDate"><span class="comDateCaption"><{$lang_posted}>:span> <{$comment.date_posted}> <span class="comDateCaption"><{$lang_updated}>:span> <{$comment.date_modified}>div>td>
tr>
<tr>
<td><a id="comment<{$comment.id}>">a>td>
<td><{$comment.poster.uname}> said the <{$comment.date_posted}> (<{$lang_updated}>: <{$comment.date_modified}>)td>
tr>
<tr>
<td><a id="comment<{$comment.id}>">a>td>
<td><{$comment.poster.uname}> said the <{$comment.date_posted}>
<{if $comment.date_posted != $comment.date_modified}>
(modified the <{$comment.date_modified}>)
<{/if}>
td>
tr>
<div style="float:right;">
<{if $xoops_iscommentadmin == true}>
<a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" />a>
<a href="<{$deletecomment_link}>&com_id=<{$comment.id}>" title="<{$lang_delete}>"><img src="<{$xoops_url}>/images/icons/delete.gif" alt="<{$lang_delete}>" />a>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{elseif $xoops_isuser == true && $xoops_userid == $comment.poster.id}>
<a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" />a>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{elseif $xoops_isuser == true || $anon_canpost == true}>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{/if}>
div>
<div class="comTitle"><{$comment.image}><{$comment.title}>div>
<td style="width:120px;"><a id="comment<{$comment.id}>">a>td>
<td style="text-align:center;">
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
td>
.arrow-left {
width: 0px;
height: 0px;
border-style: solid;
border-width: 25px 20px 25px 0;
border-color: transparent #ECE9D8 transparent transparent;
}
<td>td>
<td style="width:120px;"><a id="comment<{$comment.id}>">a>td>
<td>td>
<td class="odd"><div class="comText"><{$comment.text}>div>td>
<div class="arrow-left">div>
<td style="width:20px;"><div class="arrow-left">div>td>
<td><br /><br /><{$comment.poster.uname}>
<tr>
<td style="width:120px;"><a id="comment<{$comment.id}>">a>td>
<td>td>
<td><br /><br /><{$comment.poster.uname}> a dit le <{$comment.date_posted}>
<{if $comment.date_posted != $comment.date_modified}>
(modifié le <{$comment.date_modified}>)
<{/if}>
<div style="float:right;">
<{if $xoops_iscommentadmin == true}>
<a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" />a>
<a href="<{$deletecomment_link}>&com_id=<{$comment.id}>" title="<{$lang_delete}>"><img src="<{$xoops_url}>/images/icons/delete.gif" alt="<{$lang_delete}>" />a>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{elseif $xoops_isuser == true && $xoops_userid == $comment.poster.id}>
<a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" />a>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{elseif $xoops_isuser == true || $anon_canpost == true}>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{/if}>
div>
td>
tr>
<tr>
<{if $comment.poster.id != 0}>
<td style="text-align:center;">
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
td>
<{else}>
<td class="odd"> td>
<{/if}>
<td style="width:20px;"><div class="arrow-left">div>td>
<td class="odd">
<div class="comText"><{$comment.text}>div>
td>
tr>
<tr><td>td><td>td><td>td>tr>