Joomla Tutor

Bahasa Indonesia

This posting is out of content about Joomla, this blog is using template blogger Hallo 01 from Amanda (BloggerBuster). It's very minimalist and good design template.

More features of this template include:

* Navigation links beneath the header
* Icon to the right of the header (which can be replaced with your own photo or avatar if preferred)
* Fully widgetized sidebar
* Three column footer section
* Styling (and code) to display your own Flickr photostream
* Fonts and colors can be customized through your Blogger dashboard

But any problem with comment template, Overlapping Comments.

How to fix it

1. Copy this code CSS and paste before ]]></b:skin>

/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #000;font-size: 0.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: #fff;
border-bottom: 1px solid #000;padding: 20px;list-style-type:none;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;display: inline;
width: 160px;min-width: 160px;max-width: 160px;
border-right: 1px solid #000;padding-right: 20px;margin-right: 20px;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}
.c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;}
.c_approved {color: #aaa;font-size: 0.9em;}


2. Find Code


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-blog-author'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/><br/>
</dt>
<dd class='comment-body prop min50px'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<p>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</p>
</dd>
</div>
<div class='clear' style='clear: both;'/>
<b:else/>
<div class='comment-general'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/><br/>
</dt>
<dd class='comment-body prop min50px'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<p>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</p>
</dd>
</div>
<div class='clear' style='clear: both;'/>
</b:if>
</b:loop>
</dl>


3. And Replace All With


 <ul class='commentlist'>

<b:loop values='data:post.comments' var='comment'><li>

<div class='pane_l'>

<div class='c_author'>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</div>

<div class='c_avatar'/>

<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/>

</div>

<div class='pane_r'>

<data:comment.body/>

</div>

<div class=' clear'/></li>

</b:loop>

 </ul>


4. Save Your Template