Last updated February 14, 2011. Created on May 11, 2009.
Edited by rehos. Log in to edit this page.

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 .= <<
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}

EOT;
  return $jskitcomments;
}

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.