Customizing Comments

1. Using a <DIV> tag to place comments You can deploy the comments in a place separate from the <SCRIPT> tag by using the <DIV> with class="js-kit-comments". Place the <SCRIPT> tag at the very end of the HTML page to speed up page load.
<div class="js-kit-comments"></div>
... rest of html code ...
<script src="http://js-kit.com/comments.js"></script>
2. Changing the "Leave a comment" text You can override the default "Leave a comment" message by using the label attribute:
<div class="js-kit-comments" label="Comment this photo"></div>
<script src="http://js-kit.com/comments.js"></script>
3. Same comments on different pages If the document is accessible using multiple alternative path names and you want to display the same comments everywhere, use path specification:
<div class="js-kit-comments" path="/my/fixed/path"></div>
<script src="http://js-kit.com/comments.js"></script>

You may also omit the leading slash.
4. Multiple comment widgets on one page You can have multiple comment blocks on the same page. Use unique path value for each comment block:
<div class="js-kit-comments" path="blogEntry1"></div>
...
<div class="js-kit-comments" path="blogEntry2"></div>
...
<div class="js-kit-comments" path="blogEntry3"></div>
...
<script src="http://js-kit.com/comments.js"></script>
5. Pagination of comments You can break long lists of comments into multiple pages using the paginate="N" attribute, where N is the number of comments per page.
<div class="js-kit-comments" paginate="10"></div>
<script src="http://js-kit.com/comments.js"></script>
6. Reverting the order of comments

You can use the backwards="yes" attribute to make the comments on a page appear in reverse chronological order. This attribute also places the comments controls at the top of the comments box.

<div class="js-kit-comments" backwards="yes"></div>
<script src="http://js-kit.com/comments.js"></script>
7. Using CSS to style You can change the comments' look by using CSS after the <SCRIPT> tag:
<script src="http://js-kit.com/comments.js"></script>
<style type="text/css">
   Your style here
</style>
8. Customization templates You can completely change the comment entry design by using templates:
<div class="js-kit-comments" style="display: none">

<!-- Template for a single comment entry. This template is optional -->
<div class="js-singleComment">
<div class="js-singleCommentBg">
<div class="js-singleCommentAvatar"></div>

<div class="js-singleCommentINFO">
<div class="js-singleCommentName" style="clear:both">{Name}</div>
<div class="js-singleCommentDate">{Date}</div>
<div class="js-singleCommentDate">{Time}</div>
</div>
<div class="js-singleCommentRating" style="display:none;"></div>
<div class="js-singleCommentText">{Text}</div>
<div class="js-singleCommentKarmaComMod">
<div class="js-singleCommentKarma">{Label:Like this comment?}
 [<a class="js-singleCommentKarmaY">{Label:yes}</a>]
 [<a class="js-singleCommentKarmaN">{Label:no}</a>]
 <span class="js-singleCommentKarmaScore">({Label:Score}:
  <span class="js-singleCommentKarmaValue">0</span>{Label:byVotes}
  <span class="js-singleCommentKarmaVoters">0</span>)
 </span>
</div>
<div class="js-singleCommentComMod">{Label:Mark as}
 [<a class="js-singleCommentComModMark">{Label:offensive}</a>]
</div>
<div class="js-singleCommentCtls">
 <span class="js-singleCommentReplyable">[<a class="js-singleCommentReply">{Label:reply}</a>]</span>
 <span class="js-singleCommentDeletable">[<a class="js-singleCommentDelete">{Label:delete}</a>]</span>
 <span class="js-singleCommentModeratable">[<a class="js-singleCommentModerate">{Label:moderate}</a>]</span>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>

<!-- Template for a "Create a comment" dialog. This template is optional -->
<div class="js-CreateComment">
<div class="js-CreateCommentBg">

<div class="js-commentFieldSubject">{Label:leaveComment}</div>
<div class="js-commentFieldLabel">{Label:nameLabel}</div>
<div><input name="js-CmtName" SIZE=32 /></div>
<div class="js-commentInputEmail">

<div class="js-commentFieldLabel">{Label:emailLabel}
<div class="js-commentFieldNote">{Label:emailNote}</div>
</div>
<div><input name="js-CmtEmail" type="email" SIZE=32 /></div>
</div>
<div class="js-commentFieldLabel js-commentRatingDisplay">{Label:ratingLabel}</div>
<div class="js-commentFieldRating js-commentRatingDisplay"></div>

<div class="js-commentFieldLabel">{Label:commentLabel}</div>
<div><textarea name="js-CmtText" ROWS=4 COLS=32></textarea></div>
<div class="js-commentOpenID">{Label:openidLogin}
 <span class="js-commentOpenIDURL"></span>[<a class="js-commentOpenIDLogout">{Label:logout}</a>]
</div>
<div class="js-commentInputOpenID">
<div class="js-commentFieldLabel">{Label:openidLogin}
<div class="js-commentFieldNote">{Label:openidNote}</div>
</div>
<div><input name="js-CmtOpenID" type="openid" SIZE=32 /></div>
<div class="js-OpenIDError"></div>
</div>
<div class="js-commentAvatarArea"></div>

<div class="js-CCButtons"><input type="submit" name="js-Cmtsubmit" class="js-CmtButton" VALUE="{Label:submit}"><input type="reset" name="js-Cmtcancel" class="js-CmtButton" VALUE="{Label:cancel}"><span class="js-CCMore">[<a class="js-commentMore">{Label:more}</a>]</span>
</div>
<div class="js-poweredBy js-antispamBy">(<a href="http://js-kit.com/comments?wow">Powered by JS-Kit</a>)</div>
<div class="js-poweredBy js-antispamBy">(Spam filtering by <a href="http://akismet.com/">Akismet</a>)</div>
</div><br clear="all" /></div>

</div>
<script src="http://js-kit.com/comments.js"></script>
9. Adding custom input fields Using templates, you can add any number of custom fields to the comment!
10. Setting up the RSS

All comments are accessible via RSS using the following URL:

http://js-kit.com/rss/your.site.com/path

where path is either a valid permalink or a valid path attribute value.

Alternatively, you can setup a DNS entry:

js-kit.your.site.com. IN CNAME js-kit.com.

or

rss.your.site.com. IN CNAME js-kit.com.

and access it as:

http://rss.your.site.com/path
11. Overriding widget behavior Some types of customization require intervention into widget internal logic. For example, sometimes it is necessary to override comment threading behavior by providing different nesting offsets. Insert the following code somewhere before the <SCRIPT> tag which invokes the widget:
<script>
JSKit$Override = [
  ["level2margin", function(level) {
     if(level < 20) return "20px";
     if(level > 40) return "4px";
      return "0px";
    }
  ]
];
</script>
12. Use a permanent URL for each object

Use a permanent URL for each object (blog post,article,etc).
(Note: this attribute should not be confused with the path attribute
but used in conjunction with path)

<div class="js-kit-comments" permalink="http://mysite.com/permanent/link/to/page.html"></div>
<script src="http://js-kit.com/comments.js"></script>