This module only supports the Echo API prior to E2 launch
You can provide a custom stylesheet or if you need more specific customizations you can provide these through Drupal's theme system. For this purpose the module provides several theme hooks.

  • theme_jskitcomments_content_area - renders the necessary output for the display of comments in the content area
  • theme_jskitcomments_block - renders the necessary output for the display of comments in a separate block
  • theme_jskitcomments_footer (release 6.x-1.0 only) - renders the necessary output to load the javascript file from js-kit.com just before the end of the body

Providing a custom template

If you want to use your own template for the JS-Kit Echo widget you must provide your theme functions for theme_jskitcomments_content_area or theme_jskitcomments_block. You can read more about how to setup your own template here (page removed by Echo).

Using a customized CSS (release 6.x-2.0 and higher)

As of release 6.x-2.0 you can provide your custom CSS for the JS-Kit Echo widget by adding a CSS file named jskitcomments.css in your theme folder. A sample stylesheet for the JS-Kit Echo service is:

/* Js-Kit Echo theme */
/* colors */
.js-CommentsSkin-echo .jsk-PrimaryBackgroundColor {background-color: #F1F1F1}
.js-CommentsSkin-echo .jsk-SecondaryBackgroundColor {background-color: #F1F1F1}
.js-CommentsSkin-echo .jsk-PrimaryHighlightColor {color: #fffea9}
.js-CommentsSkin-echo .jsk-SecondaryHighlightColor {color: #ffff00}
.js-CommentsSkin-echo .jsk-PrimaryFontColor {color: #919191}
.js-CommentsSkin-echo .jsk-SecondaryFontColor {color: #919191}
.js-CommentsSkin-echo .jsk-ThreadWrapper a, .js-CommentsSkin-echo .jsk-LinkColor, .js-CommentsSkin-echo .jskit-MenuTitle {color: #008ADD !important}
.js-CommentsSkin-echo .jsk-H1Color {color: #008AE1}
.jsk-Pager .jsk-Active {color:#008ADD;}
/* fonts */
.js-CommentsSkin-echo .jsk-PrimaryFont {font-family: Arial, sans-serif, Helvetica}
.js-CommentsSkin-echo .jsk-H1Font {font-family: Arial, sans-serif, Helvetica;font-size:14px;font-weight:bold}
.js-CommentsSkin-echo .jsk-LinkFont, .js-CommentsSkin-echo .jsk-ThreadWrapper a, .js-CommentsSkin-echo .jsk-ThreadWrapper a:hover {text-decoration: none}

More information about styling the JS-Kit Echo widget can be found here.

Using customized CSS (release 6.x-1.0 only)

2009/08/10: Smoothgray skin isn't supported by the JS-Kit Echo widget (See JS-Kit Blog)

If you want to use customized CSS in release 6.x-1.0, then you have to provide your own copy of theme_jskitcomments_footer. An example of custom CSS styling for the "smoothgray" skin is listed below. More information about styling the JS-Kit Echo widget can be found here (page removed by Echo).

function everdune_jskitcomments_footer() {
  $jskitcomments = theme_jskitcomments_footer();
  $jskitcomments .= <<<EOT

  <style type="text/css" media="all">
div.js-singleCommentHeader{color:#919191}
div.js-CommentsSkin-smoothgray .js-OldComments {background-color:#F1F1F1;padding-left:0;padding-right:0}
.js-CommentsSkin-smoothgray .js-OldComments .js-singleCommentName {color:#008ADD;font-weight:normal}
.js-CommentsSkin-smoothgray .js-OldComments{border:none}
.js-CommentsSkin-smoothgray .js-OldCommentsWrap{background-color:#F1F1F1}
.js-CommentsSkin-smoothgray .js-singleCommentBody{background-color:#F1F1F1;padding-left:0;padding-right:0}
.js-singleCommentKarma{color:#008ADD}
table.js-singleCommentBodyT{color:#919191}
div.js-TornPageDivider {background-color:#F1F1F1}
div.js-TornPageDividerTop {background-color:#F1F1F1;}
div.js-TornPageDividerBottom {background-color:#F1F1F1;}
.js-CreateCommentFieldsWrap {
background-color:#F1F1F1;
border:none;
padding:4px;
}
.js-CommentsArea .js-CreateCommentArea{background-color:#F1F1F1}
.js-commentFieldSubject{color:#008ADD}
.js-CreateCommentFields {
background-color:#F1F1F1;
color:#919191;
padding:4px;
}
.js-uploadImageButton {color:#008ADD}
.js-poweredBy a {color:#C0C0C0}
.js-poweredBy{color:#C0C0C0}
.js-CommentsArea .js-OldCommentsWrap {padding-left:0;padding-right:0}
</style>
EOT;
  return $jskitcomments;
}