Fork me on GitHub

Search

Donat-O-Meter

Make donations with PayPal!
Stats
Goal: $100.00
Due Date: Oct 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00

Learn XOOPS Core

Local Support

Advertisement

XOOPS Code hosted on SourceForge

Cumulus Tag Cloud

- 2 2.5 2.6 3.0 4 6 2013 Abuse adslight Android AntiHarvesting AntiMalUser AntiSpam API Apple Battlefield billige Bootstrap Captcha cell cent chronolabs CHUNG Clicks content CĂN demo docek download Dresses evden eve facebook Fat floor Food for free Gateway Google Guide herre Home Honeypot Human HỘ IP iPhone jQuery Language Law Legal List log Loss mobile module modules Monster new newbb news NHÀ online PARK phone PHP Prevention profile project Protector publisher RESIDENCE responsive review Rights rmcommon security Sentry site Smartphone Smoking Solution Spam Studio tag tags tdmcreate template The Theme themes web weight Wishcraft xoops Xortify

New Users

Registering user

# 137849

hometheater

Welcome to XOOPS!

Archives

News Archives

Tutorial: New design for block comments, step by step

Posted by alain01 on 2013/2/19 15:40:00 (2982 reads) | Posted on Tutorials
Resized Image 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 !!!


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

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


Resized Image2b - 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="" />



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

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>



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



Resized Image2e - 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.


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



Resized Image2g - 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 {
width0px;
height0px;
border-stylesolid;
border-width25px 20px 25px 0;
border-colortransparent #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>



Resized Image2f - 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 !


Printer Friendly Page Send this Story to a Friend Create a PDF from the article
Bookmark Me
Bookmark to Google Plus
The comments are owned by the author. We aren't responsible for their content.

Fantastic tutorial, Alain! We need more of those!!!
Published: 2013/2/19 15:43 • Updated: 2013/2/19 15:43
For Hackers,
this isnt my fixed @IP, in pictures, it's a dynamic provider @IP.
Published: 2013/2/19 16:29 • Updated: 2013/2/19 16:29
Very neat tutorial, pretty nice work, congrats.
Published: 2013/2/21 8:11 • Updated: 2013/2/21 8:11
If there is no desire to climb in templates, it is possible to use images, we add in styles the following:

.odd + .odd {
    
backgroundurl("../img/bg-com.png"no-repeat scroll left topurl("../img/bg-com2.png"no-repeat scroll left bottom #D6FFD9;
    
border-radius4px 4px 4px 4px;
    
padding5px 5px 5px 22px;
}


Download images...

Example:
Resized Image

Published: 2013/2/24 15:49 • Updated: 2013/2/24 15:49