New template and comment indent fix

OK, the new template is ready and it fixes the problems that we had with comment indent(threaded comments) (that alone was 20h of work). The demo is available here: http://demo.compojoom.com .

I've tested the template with IE7, firefox3, opera9 . It is possible that there are bugs with other browsers. Please report them here.

Here is one screen shot with a lot of threaded comments:

For the unpatient here is the html and the css of the template:

index.html:

<html>
<head>
<link rel="stylesheet" href="/css/css.css" type="text/css" />
</head>
<body>
<div id="comment">
<!-- <<< html code above is just to allow preview of template -->

JOOMLACOMMENT TEMPLATE : default-emotop

/*-----------------------------------------------------------*/
/*-- only {xxx}{/xxx} blocks are taken in account ---------*/
/*-----------------------------------------------------------*/
{readon}
<div class='write_comment'>
<a href="/{READON_LINK}#JOSC_TOP" class="readon">{READON_WRITE_COMMENT} ({READON_COUNT} {READON_COMMENTS})</a>
</div>
{BLOCK-preview}
<div class='comment_preview_container'>
{preview-lines}
</div>
{/BLOCK-preview}
{/readon}
{previewline}
<div class='comment_preview'>
<a href="/{PREVIEW_LINK}#josc{id}">{PREVIEW_DATE} <b>{PREVIEW_TITLE}</b></a>
</div>
{/previewline}

{search}
<form name='joomlacommentsearch' id='joomlacommentsearch' method='post'>
<a name='SearchForm'></a>
{_HIDDEN_VALUES}
<fieldset>
<legend>{_JOOMLACOMMENT_SEARCH}</legend>
<div>
<label for="serch">{_JOOMLACOMMENT_PROMPT_KEYWORD}</label>
<input name='tsearch' type='text' class='inputbox' size='40' />
<input name='bsearch' type='button' class='button' value='{_JOOMLACOMMENT_SEARCH}' onclick='JOSC_search()' />
</div>
<div>
<input type='radio' name='rsearchphrase' onClick='JOSC_rsearchphrase_selection="any"' checked='checked' />{_JOOMLACOMMENT_SEARCH_ANYWORDS}
<input type='radio' name='rsearchphrase' onClick='JOSC_rsearchphrase_selection="all"' />{_JOOMLACOMMENT_SEARCH_ALLWORDS}
<input type='radio' name='rsearchphrase' onClick='JOSC_rsearchphrase_selection="exact"' />{_JOOMLACOMMENT_SEARCH_PHRASE}

</div>
</fieldset>
<div style='margin-bottom: 5px;'></div>
</form>
{/search}

{searchresults}
<div id='SearchResults'>
<a name='SearchResults'></a>
<ul>
<li>
{resulttitle}
</li>
{searchresult}
<li class='post'>
<div class='posthead'>
<span class='postinfo'>
{date}
</span>
<span class='comment_by'>
{title} {_JOOMLACOMMENT_BY} {name}
</span>
</div>
<div class='postcontent'>
<a href='{address}'>{preview}</a>
</div>
{/searchresult}
</li>
</ul>
<div style='margin-bottom: 5px;'></div>
</div>
{/searchresults}

/*-----------------------------------------------------------------------*/
/*-- everything (!) inside body /body are taken in account ---------*/
/*-----------------------------------------------------------------------*/
{body}
{ads}
<!-- ads will be displayed here -->
{/ads}
<div class="josc_clear"></div>
<a name='JOSC_TOP'></a>
{menu}
<ul id='CommentMenu'>
<li class='josc_buttons'>
{BLOCK-add_new}
<a id='_JOOMLACOMMENT_ADDNEW' href='javascript:{BUTTON_ADDNEW_js}'>{_JOOMLACOMMENT_ADDNEW}</a>
{/BLOCK-add_new}
{BLOCK-delete_all}
<a id='_JOOMLACOMMENT_DELETEALL' href='javascript:{BUTTON_DELETEALL_js}'>{_JOOMLACOMMENT_DELETEALL}</a>
{/BLOCK-delete_all}
{BLOCK-search}
<a id='_JOOMLACOMMENT_SEARCH' href='javascript:{BUTTON_SEARCH_js}'>{_JOOMLACOMMENT_SEARCH}</a>
{/BLOCK-search}
{BLOCK-rss}
<a id='_JOOMLACOMMENT_RSS' href='{BUTTON_RSS_URL}'>{_JOOMLACOMMENT_RSS}</a>
{/BLOCK-rss}
</li>
<li>
{_JOOMLACOMMENT_COMMENTS_TITLE}
</li>

</ul>
<div class="josc_clear"></div>
{/menu}

<span id='JOSC_busypage'></span>
{pagenav}
<!-- here will be inserted the page nav -->
{/pagenav}

{post}
<ul id='post{id}' style='margin-left:{wrapnum};'>
<li class='post'>
<a name='josc{id}'></a>
<div class='posthead'>
<span class='postinfo'>
{BLOCK-website}{website}{/BLOCK-website}
{notify}
{BLOCK-usertype}|<span class='postusertype'>{usertype}</span>{/BLOCK-usertype}
|<span class='postdate'>{date}</span>
</span>
<span class='username'>
{username}
</span>
{BLOCK-title} - <span class='posttitle'>{title}</span>{/BLOCK-title}

</div>
<div class='postcontent'>
{BLOCK-avatar_picture}{avatar_picture}{/BLOCK-avatar_picture}{content}
</div>
{BLOCK-footer}
<div class='postfooter'>
{voting}
<span>
{editbuttons}
</span>

</div>

{/BLOCK-footer}
</li>
</ul>
{/post}

{form}
<form name='joomlacommentform' id='joomlacommentform' method='post' action='{self}'>
<a name='CommentForm'></a>
<fieldset>
<legend id='CommentFormTitle'>{_WRITECOMMENT}</legend>
<fieldset>
<legend>Your Contact Details:</legend>
<div>
<label for='tname'>{_ENTERNAME}</label>
<input name='tname' id="tname" type='text' value='{username}' tabindex="1" {registered_readonly}/>
</div>
{BLOCK-_ENTEREMAIL}
<div>
<label for='temail'>{_ENTEREMAIL}</label>
<input name='temail' id="temail" type='text' value='{email}' tabindex="2" {registered_readonly}/>
{notifyselect}
</div>
{/BLOCK-_ENTEREMAIL}
{BLOCK-_ENTERWEBSITE}
<div>
<label for='twebsite'>{_ENTERWEBSITE}</label>
<input name='twebsite' id="twebsite" type='text' tabindex="3" value='{website}'/>
</div>
{/BLOCK-_ENTERWEBSITE}
</fieldset>
<fieldset>
<legend>Comment:</legend>
<div>
<label for='ttile'>{_ENTERTITLE}</label>
<input name='ttitle' id="ttile" type='text' tabindex="4" />
</div>
{BLOCK-_UBBCode}
<div>
<label>{_UBBCODE}</label>
{UBBCodeButtons}
{UBBCodeSelect}
</div>
{/BLOCK-_UBBCode}
{BLOCK-emoticons}
<div id='emoticons'>
{emoticons}
</div>
{/BLOCK-emoticons}
<div>
<label for='tcomment'>Message:</label>
<textarea name='tcomment' id='tcomment' cols='{formareacols}' tabindex="5" rows='10'></textarea>
</div>
</fieldset>
{BLOCK-_CAPTCHATXT}
<fieldset>
<legend>Security</legend>
<div id='security'>
{security_image}
<input type='text' name='security_try' id='security_try' size='15' maxlength='10' tabindex="6" class='captchainput' />
</div>
{_CAPTCHATXT}
</fieldset>
{/BLOCK-_CAPTCHATXT}
{_HIDDEN_VALUES}
<input type='button' class='button' tabindex="7" name='bsend' value='{_SENDFORM}' onclick='JOSC_editPost(-1,-1)' />
<div id='JOSC_busy'></div>
</fieldset>
</form>
{/form}

{poweredby}
<!-- powered by will be inserted here.
to hide, please do not delete. Just set in css #poweredby { display:none; }
-->
{/poweredby}
<!-- <div class="backbutton" align="center">
<a href="javascript:JOSC_goToAnchor('JOSC_TOP');">^^^</a>
</div> -->
{/body}

<!-- >>> html code below is just to allow preview of template -->
</div>
</body>
</html>





Here is the css/css.css file:

/*styling the comment form */
#joomlacommentsearch fieldset,
#joomlacommentform fieldset {
margin: 1em 0;
padding: 1em;
border: solid 1px #CCCCCC;
background: #f8f8f8;
}

#joomlacommentform legend {
font-weight: bold;
}
#joomlacommentform fieldset fieldset legend {
font-weight: bold;
color: #999999;
}

#joomlacommentform label {
float: left;
width: 8em;
font-weight:bold;
}

#joomlacommentform input {
width: 300px;
}
#joomlacommentform input#temail {
width: 198px;
}
#joomlacommentform input#ttile {
width: 328px;
}
#joomlacommentform input#security_try {
float: left;
width: 100px;
}
#joomlacommentform textarea {
width: 400px;
height: 200px;
}
div#captcha {
float: right;
}
div#security {
width: 220px;
}

#joomlacommentform input:focus,
#joomlacommentform textarea:focus {
background: #FFFFCC;
border: 1px #FFC45F dotted;
}

#joomlacommentform div {
margin: 2px;
}

#emoticons {
padding-left: 8em;
}
.emoticon {
padding: 2px 1px;
}

/* Voting section */
#comment ul.voting {
list-style: none;
padding: 0;
}
#comment ul.voting li {
float: right;
}
#comment ul.voting a {
display: block;
}
#comment a.voting_yes:link, #comment a.voting_yes:visited {
color: #3C922F;
font-weight: normal;
background: url(../images/voting_yes.png) #EEF9EB no-repeat;
border: 1px outset #3C922F;
padding: 2px 4px 2px 20px;
white-space: nowrap;
float: left;
line-height: 10px;
text-decoration: none;
}
#comment a.voting_yes:hover {
color: #3C922F;
font-weight: normal;
background: url(../images/voting_yes.png) #FFFFFF no-repeat;
border: 1px outset #3C922F;
padding: 2px 4px 2px 20px;
white-space: nowrap;
float: left;
line-height: 10px;
text-decoration: none;
}
#comment a.voting_no:link, #comment a.voting_no:visited {
color: #AE3738;
font-weight: normal;
background: url(../images/voting_no.png) #F9EBEB no-repeat;
border: 1px outset #AE3738;
padding: 2px 4px 2px 20px;
white-space: nowrap;
float: left;
line-height: 10px;
text-decoration: none;
}
#comment a.voting_no:hover {
color: #AE3738;
font-weight: normal;
background: url(../images/voting_no.png) #FFFFFF no-repeat;
border: 1px outset #AE3738;
padding: 2px 4px 2px 20px;
white-space: nowrap;
float: left;
line-height: 10px;
text-decoration: none;
}

/* Menu */
#comment ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#comment ul#CommentMenu {
margin-top: 5px;
color: #FFFFFF;
padding: 2px 5px 0px 5px;
background: transparent url(../images/sectiontableheader.png) repeat scroll 0 0;
line-height: 15px;

}

#comment ul#CommentMenu li.josc_buttons {
float: right;
}

#comment ul#CommentMenu li.josc_buttons a{
color: #FFFFFF;
border-left: 1px solid #FFFFFF;
padding-left: 5px;
}
#comment ul#CommentMenu li.josc_buttons a:hover{
background: #0077AA none repeat scroll 0 0;
}

.josc_clear {
clear:both;
}

/* comment boxes */
#comment #SearchResults ul li.post,
#Comments ul li.post {
border: 1px solid #677791;
}

#comment #SearchResults .postinfo,
#Comments .postinfo {
float: right;
}
#Comments ul li.post div.postfooter {
background-image: url(../images/dot.gif);
background-repeat: repeat-x;
padding: 2px 5px;
}
#comment #SearchResults ul li.post div.posthead,
#Comments ul li.post div.posthead {
padding-bottom: 2px;
color: #FFFFFF;
background: transparent url(../images/head.png) repeat scroll 0 0;
vertical-align: middle;
}
#comment #SearchResults ul li.post div.postcontent,
#Comments ul li.post div.postcontent {
color: #505367;
background: transparent url(../images/body2.gif) repeat-x scroll 0 0;
padding: 5px;
}
#comment #SearchResults ul li.post span.comment_by {
padding-left: 5px;
}
#Comments ul li.post div span.username {
background: url(../images/user.png);
background-repeat: no-repeat;
background-position: 2px 2px;
padding-left: 21px;
}

#Comments ul li.post div.posthead span.postinfo .postnotify0 {
background-image: url(/../images/mailred.jpg);
background-position: 2px 2px;
background-repeat:no-repeat;
padding-left:16px;
}
#Comments .postdate {
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
height:20px;
padding-bottom:5px;
padding-top:0;
vertical-align:top;
}

/* Navigation */
#comment #joscPageNav {
text-align:center;
padding: 2px;
}
#comment #joscPageNav #joscPageNavNoLink,
#comment #joscPageNav #joscPageNavLink {
text-align:center;
}

#JOSC_busypage {
float: left;
}

/* quote*/
#comment .quote {
text-align: center;
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px;
}
#comment .genmed {
color: #505367;
text-align: left;
padding-left: 8px;
padding-bottom: 1px;
}
#comment .quotebody {
color: #505367;
border: 1px #CCCCCC solid;
background: white;
text-align: justify;
padding: 8px;
}
#comment .code .genmed{
padding-left: 29px;
}

I made also some changes to the way the comment.class.php creates the voting. So perhaps the best thing will be to checkout the svn: http://svn.compojoom.com/jocomment/