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/
