ホーム
>>
RSSセンター
>>
Tutorial: New design for block comments, step by step
RSSセンター
| メイン | 簡易ヘッドライン |
XOOPS.org
(2024/11/23 5:11:46)
Tutorial: New design for block comments, step by step
(2013/2/21 5:40:00)
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 theme)
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) :
<!--
< 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
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 >
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 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 >
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 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;
}
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 - 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 }>
(
modifie 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 !
execution time : 0.405 sec
