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 HeadNow, 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) :
Find theses lines
- 2 times in system_comments_net.html and system_comments_thread.html
- 1 time in system_comments_flat.html
2b - Delete poster's info - keep only avatarNow, all changes will be in the system_comment.html file (for the next one too)
Delete information from user :
- Rank
- Registry date
- Localisation
- Contribution number
- Status
Just keep avatar
<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>
become now
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
2c - Move poster' name , date and styleLet's simplify the display comment date:
So, replace
<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>
by
<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>
2d - Same Date comments and modification comments ?We don't want to see the date twice, if it's the same date, so replace the previous code by
<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>
2e - Move buttons to the topNow, we want to move the buttons on the top.
First, take the test code of poster, at the bottom file, and delete all lines with < td > et < /td >.
So the partial code seems to be this now, with right style CSS :
<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>
Now, delete the bottom buttons.
Just delete the lines between the last < tr >< /tr > , and delete the tags < tr >< /tr > too.
2f - Style- Delete title and picture title :
Delete line
<div class="comTitle"><{$comment.image}><{$comment.title}>div>
- Add fixed width on the left column
<td style="width:120px;"><a id="comment<{$comment.id}>">a>td>
- Delete class "odd" to the 'td' where the poster avatar is, then put the picture in middle position
<td style="text-align:center;">
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
td>
2g - Add an arrowWe need to work on the style.css file, in the mytheme theme to create this arrow in CSS.
For my theme, it is in /www/themes/mytheme/css/style.css
Add this code in style.css :
.arrow-left {
width: 0px;
height: 0px;
border-style: solid;
border-width: 25px 20px 25px 0;
border-color: transparent #ECE9D8 transparent transparent;
}
Add 1 column.
Add 1 column in order to put our new arrow at left from comment.
- Add tag
<td>td>
<td style="width:120px;"><a id="comment<{$comment.id}>">a>td>
- Add tag
<td>td>
<td class="odd"><div class="comText"><{$comment.text}>div>td>
On the second tag, insert this code :
<div class="arrow-left">div>
So, we got :
<td style="width:20px;"><div class="arrow-left">div>td>
2f - StyleAdd 2 break lines for cleared diplay. Put it just before the name poster.
<td><br /><br /><{$comment.poster.uname}>
That 's all. you have finihed...
3 - full system_comment.html file
For webmasters who want the full file system_comment.html, it is here, available :
<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>
Sure, i know it's not perfect, and we could do more:
- Delete "table" to replace by "div",
- Dont define css style in the code, but use class.
- Round corners,
- ...
But the objective here wasn't to to get a perfect code. It was to understand overloaded themes, and show step by step how to modify the design of the comments block.
Conclusion :
I hope that with this news it's now more clear for you how to modify your design of your blocks and templates in your theme.
If this news is usefull for you, please tell me how it feels in the comments block !!! hahahahaha !
]]> 
