XOOPS Web Application System - XOOPS Tutorials > Tutorial: New design for block comments, step by step

Tutorial: New design for block comments, step by step

Category : Tutorials

Published by alain01 on 19-Feb-2013 21:25

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

Original Image

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

Original Image

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) :


<!--

<tr>

    <th class="width20"><{$lang_poster}></th>

    <th><{$lang_thread}></th>

  </tr>

-->

Find theses lines
- 2 times in system_comments_net.html and system_comments_thread.html
- 1 time in system_comments_flat.html

Original Image

2b - Delete poster's info - keep only avatar

Now, 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 style

Let'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}>&nbsp;&nbsp;<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>

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 top

Now, 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>

Copy this code just after the <{/ if }> from the comment date

Now, delete the bottom buttons.
Just delete the lines between the last < tr >< /tr > , and delete the tags < tr >< /tr > too.

Original Image

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 arrow

We 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;

}

You could change the arrow color, this color is same as the color class "odd"

Add 1 column.
Add 1 column in order to put our new arrow at left from comment.
- Add tag


<td></td>

after


<td style="width:120px;"><a id="comment<{$comment.id}>"></a></td>

- Add tag


<td></td>

before


<td class="odd"><div class="comText"><{$comment.text}></div></td>

On the second tag, insert this code :


<div class="arrow-left"></div>

and a fixed 20 pixel width style :
So, we got :


<td style="width:20px;"><div class="arrow-left"></div></td>

2f - Style

Add 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 :


<!-- start comment post -->

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

<!-- end comment post -->

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 !