Customizing JS-Kit Widgets

White Paper

Abstract

This paper provides an overview of customizing JS-Kit widgets.

Page Left Intentionally Blank
Contents CUSTOMIZING JS-KIT WIDGETS ...................................................................1

CONTENTS ............................................................................................................3

INTRODUCTION ..................................................................................................1
WHAT IS JS-KIT?...................................................................................................1
JS-KIT COMMENTS ............................................................................................2
INSTALLATION.......................................................................................................2
CUSTOMIZE ...........................................................................................................4
CLASS DESCRIPTION..............................................................................................5
ATTRIBUTES ........................................................................................................12
ADMINISTRATION ................................................................................................14
JS-KIT RATINGS ................................................................................................15
INSTALLATION.....................................................................................................15
CUSTOMIZE .........................................................................................................17
CLASS DESCRIPTION............................................................................................17
ATTRIBUTES ........................................................................................................18
JS-KIT NAVIGATOR .........................................................................................21
INSTALLATION.....................................................................................................21
CUSTOMIZE .........................................................................................................23
CLASS DESCRIPTION............................................................................................23
JS-KIT REVIEWS ...............................................................................................24

INSTALLATION.....................................................................................................24
CUSTOMIZE .........................................................................................................26
ATTRIBUTES ........................................................................................................27
ADMINISTRATION ................................................................................................28
JS-KIT POLLS .....................................................................................................29
INSTALLATION.....................................................................................................29
ATTRIBUTES ........................................................................................................30
REFERENCES .....................................................................................................31
Introduction What is JS-Kit?
Fast, powerful and incredibly simple, JS-Kit's services let web publishers build
dynamic, compelling online experiences in just minutes..
Today's technology gives any site access to the features they need to compete
against the online "mega-sites" that dominate the web today. Better yet, they
allow sites to create collaborative networks that increase their competitiveness
even further. Picture a Web where your site is a front door to a dynamic, user-
driven network of related content, services, products, etc... a "Virtual-Amazon"
where you — not Amazon — are the winner. Like what you see? We do, and
with your support we can make this vision a reality.

Over 15,000 publishers large and small trust JS-Kit to enrich their sites.
JS-Kit web services are highly customizable to ensure a seamless fit within
your site.

Customizing JS-Kit Widgets 1

JS-Kit Comments Installation
Installing JS-Kit Comments is as easy as cut and paste. Simply cut and paste
the following code into your HTML page and publish.
<div class="js-kit-comments" permalink=""></div>
<script src="http://js-kit.com/comments.js"></script>
You should be able to immediately see the "Leave a comment" message on
that page when you publish it on your web server and access it with a browser.
The comments will not be visible if you access a page located on your
computer or if a numeric site addresses is used. On installation you will see:

Customizing JS-Kit 2
For Administrative reasons, be the first to leave a comment making sure you
leave your email address.

Next Proceed to Customization.

Customizing JS-Kit Widgets 3

 Customize
Using CSS a site administrator can change the look and feel of JS-Kit
Comments widget to fit the theme of their site. Use the classes below to
override widget behavior to fit your site. Use CSS to style after the JS-Kit script
tag as follows:
<script src="http://js-kit.com/comments.js" ></script>
<style>.js-CCMore { color: #FF9900; }</style>

CLASS DESCRIPTION

.js-CCMore add Avatar (+) Color

.js-commentControl Default Control Colors

.js-commentTool a Controls

.js-CreateComment Leave Comment box

.js-leaveComment

.js-OldComments Use js-singleComment

.js-PageNavTop pagination color

.js-PageNavTop a pagination color

.js-PageNavBottom pagination color

.js-singleComment single comments

.js-singleCommentDate single Comment date

.js-singleCommentDeletable

.js-commentFieldLabel

.js-commentFieldSubject

.js-singleCommentKarma Karma

.js-singleCommentName single Comment name

.js-singleCommentReplyable

.js-singleCommentText single Comment text

Customizing JS-Kit 4
Class Description

js-CCMore
This class will allow the site administrator to change the color of the plus
symbol (+) used to add Avatar in the Leave the Comment box. Style with:
<style>.js-CCMore { color: #FF0000; }</style>

js-commentControl
This class will allow the site administrator to change the color of the comment
control symbol #. Style with:
<style>.js-commentControl { color: #FF0000; }</style>

js-commentControl a
This class will allow the site administrator to change the color of “leave a
comment”, Controls and poweredBy. Style with:
<style>.js-commentControl a{ color: #FF0000; }</style>
Style Font:
<style>.js-commentControl a{color: #FF0000; font-size: 14pt;}</style>

js-commentTool a
This class will allow the site administrator to change the color of Controls. Style
with:
<style>.js-commentTool a { color: #FF0000; }</style>

js-commentTool
This class will allow the site administrator to change Controls.
Hide Controls with:
<style>.js-commentTool { display:none; }</style>

Customizing JS-Kit Widgets 5

 Class Description

js-CreateComment
This class will allow the site administrator to change the color of fields in the
Leave the Comment box. Style with:
<style>.js-CreateComment { color: #FF0000; }</style>

js-leaveComment
This class will allow the site administrator to change the color of the symbol #.
Style with:
<style>.js-leaveComment { color: #FF0000; }</style>

js-OldComments
Use js-singlecomment.

Customizing JS-Kit 6
Class Description

js-PageNavTop, js-PageTop a, js-PageNavBottom

This class will allow the site administrator to change the color of the paginate
symbols used when the paginate attribute is used. Style with:

<style>.js-PageNavTop { color: #FF0000; }</style>

<style>.js-PageNavTop a { color: #FF0000; }</style>
<style>.js-PageNavBottom { color: #FF0000; }</style>

Customizing JS-Kit Widgets 7

 Class Description

js-singleComment
This class will allow the site administrator to style comments that are posted.
Style with:

<style>.js-singleComment { color: #FF0000; }</style>

Customizing JS-Kit 8
Class Description

Style Font, add background color:

<style>.js-singleComment { font-size: 14pt; color: #CC99FF; background-color:
#000000 }</style>

Style Font Family

<style>.js-singleComment { font-family: Courier; font-size: 17pt; color:
#CC99FF; background-color: #000000 }</style>

js-singleCommentDate
This class will allow the site administrator to style comment date. Style with:
<style>.js-singleCommentDate { color: #FF0000; }</style>
Hide Date with:
<style>.js-singleCommentDate { display:none; }</style>

Customizing JS-Kit Widgets 9

 Class Description

js-singleCommentName
This class will allow the site administrator to style comment name. Style with:
<style>.js-singleCommentName { color: #FF0000; }</style>
Hide name with:

<style>.js-singleCommentName { display:none; }</style>

js-singleCommentKarma
This class will allow the site administrator to style “Like this comment?”,
aka Karma. Style with:
<style>.js-singleCommentKarma { color: #FF0000; }</style>

Style “yes” and “no” with:

<style>.js-singleCommentKarma a {color: #FF0000}</style>

js-commentFieldSubject
This class will allow the site administrator to style “Leave a comment” within the
comment box. Style with:
<style>.js-commentFieldSubject{color: #FF0000}</style>

js-commentFieldLabel
This class will allow the site administrator to style comment fields within the
comment box. Style with:
<style>.js-commentFieldLabel {color: #FF0000}</style>

js-singleCommentReplyable
This class will allow the site administrator to style relply. Style with:
<style>.js-singleCommentReplyable {color: #FF0000}</style>

Hide Reply with:

<style>.js-singleCommentReplyable {display:none;}</style>

Customizing JS-Kit 10
Class Description

js-singleCommentDeletable
This class will allow the site administrator to style delete. Style with:
<style>.js-singleCommentDeletable {color: #FF0000}</style>
Hide Reply with:
<style>.js-singleCommentDeletable {display:none;}</style>

Customizing JS-Kit Widgets 11

 Attributes

JS-Kit attributes enhance functionality of the JS-Kit comments widget.

ATTRIBUTE DESCRIPTION

adminBgColor Change Bg color of Posts by Admin

backwards Change order of comments

label Change “Leave a Comment” text

paginate Paginate comments

path Unique value related to object

permalink full URL to object

thread Turn threading on/off

adminBgColor
Use this attribute to change the background color of post made by site admin.
Allows users to easily recognize site admin.
<div class="js-kit-comments" adminBgColor=”#DDDDDD” permalink=””></div>

Customizing JS-Kit 12
Attributes

backwards
Use this attribute to change order of comments. Value of “yes” places the last
comment first.
<div class="js-kit-comments" backwards=”yes” permalink=””></div>

label
Use this attribute to change the text of “Leave a comment”.

<div class="js-kit-comments" label=”Leave your Feedback” permalink=””></div>

paginate
Use this attribute to limit number of comments displayed. paginate=”5” will limit
5 comments per page.
<div class="js-kit-comments" paginate=”5” permalink=””></div>

path/permalink
Use these attributes in conjunction whenever possible. Path is just a unique
value associated to an object. If you are applying the comments widget to a
blog article, the path attribute can be set to the article name. Path should
always be unique and preceded with a slash

<div class="js-kit-comments" path=”/fallofRome” permalink=””></div>

Permalink is the full URL to the object. If the comments widget is installed on a
page, mypage.html, permalink is the full URL to that page.

<div class="js-kit-comments" path=”/fallofRome”

permalink=”http://mysite.com/mypage.html”></div>

Note: path and permalink are necessary attributes used with moderation and
reporting of statistics. It is highly recommended to always set these attributes.

thread
Use this attribute to turn threading on/off.

<div class="js-kit-comments" thread=”no” permalink=””></div>

Customizing JS-Kit Widgets 13

 Administration

Customizing JS-Kit 14
JS-Kit Ratings Installation
Installing JS-Kit Ratings is as easy as cut and paste. Simply cut and paste the
following code into your HTML page and publish.
<div class="js-kit-rating" title="" permalink=""></div>
<script src="http://js-kit.com/ratings.js"></script>
You should be able to immediately see the Rating Stars on your page when
you publish it on your web server and access it with a browser. The Ratings
stars will not be visible if you access a page located on your computer or if a
numeric site addresses is used. On installation you will see:

Customizing JS-Kit Widgets 15

 For Administrative reasons, be the first to Rate.

Customizing JS-Kit 16
Customize
Using CSS a site administrator can change the look and feel of JS-Kit Ratings
widget to fit the theme of their site. Use the classes below to override widget
behavior to fit your site. Use CSS to style after the JS-Kit script tag as follows:
<script src="http://js-kit.com/ratings.js" ></script>
<style>.js-rating-labelText { color: #FF0000; }</style>

CLASS DESCRIPTION
.js-rating-labelText Change Color of Rating text

Class Description

js-rating-lablelText
This class will allow the site administrator to change the color of Rating text.
Style with:
<style>.js-rating-labelText { color: #FF0000; }</style>

Style font:
<style> .js-rating-labelText { color: #FF0000; style="font-weight:bold; } </style>

Customizing JS-Kit Widgets 17

 Attributes

JS-Kit attributes enhance functionality of the JS-Kit Ratings widget.

ATTRIBUTE DESCRIPTION

imageurl Add Custom Star Image

imagesize Add Custom Star Image

path Distinct value for object

permalink Full URL to page

title Add Custom Title, used with Navigator

Widget

standalone Disassociate with used with

Comments Widget

starColor Change color of the stars

view Change display view

Customizing JS-Kit 18
Attributes

view
You can use the view attribute to change the display mode between split and
combo, which is the default:

Split View:
<div class="js-kit-rating" title="" view=”split” permalink=""></div>
Combo View:
<div class="js-kit-rating" title="" view=”combo” permalink=""></div>

standalone
You can use the standalone attribute to decouple from the Comments Widget
when used on the same page.
<div class="js-kit-rating" title="" standalone=”yes” permalink=""></div>

starColor
You can use the starColor attribute to change the color of the stars. Choices:
Ruby,Red,Golden,Emerald,Blue,Indigo,Violet.
<div class="js-kit-rating" title="" starColor=”Ruby” permalink=""></div>

title
You can use the title attribute to add a custom title so that URL’s that appear in
the Navigator Widget appear correctly. Used in conjunction with Navigator.
<div class="js-kit-rating" title="DVD Wars" permalink=""></div>

Customizing JS-Kit Widgets 19

 path/permalink
Use these attributes in conjunction whenever possible. Path is just a unique
value associated to an object. If you are applying the Ratings widget to a blog
article, the path attribute can be set to the article name. Path should always be
unique and preceded with a slash
<div class="js-kit-rating" path=”/fallofRome” permalink=””></div>

Permalink is the full URL to the object. If the Ratings widget is installed on a
page, mypage.html, permalink is the full URL to that page.

<div class="js-kit-rating" path=”/fallofRome”

permalink=”http://mysite.com/mypage.html”></div>

Note: path and permalink are necessary attributes used with reporting of
statistics. It is highly recommended to always set these attributes.

Imageurl/imagesize
Use these attributes to repliace starlet images with your own. The URL given
in the imageurl attribute should contain five pictures: star.png, star-
half.png, user.png, user-half.png, and gray.png.

The first two are for community rating icons ( ), the following two
are for the user's own rating ( ), and the last one is for a placeholder
.

<div class="js-kit-rating"
imageurl="http://mysite.com/images/stars"
imagesize="16x15"></div>
<script src="http://js-kit.com/ratings.js"></script>

Customizing JS-Kit 20
JS-Kit Navigator Installation
Before installing Navigator we recommend you first install JS-Kit Ratings.
Installing Navigator is as easy as cut and paste. Simply cut and paste the
following code into your HTML page and publish.
<div class="js-kit-top" style="width: 300px"
title="Easy Site Navigator"></div>
<script src="http://js-kit.com/top.js"></script>
You need a minimum of 6 votes for an item to appear in Navigator. When you
publish it on your web server and access it with a browser you should see and
click on the Admin Console button.

Customizing JS-Kit Widgets 21

 Select Tab Type of choice ( Top, Hot, Editors Picks) and click Save.

To pre-populate Navigator, use a different browser, Rate your object, clear

your cookies and Repeat 6X.

Customizing JS-Kit 22
Customize
Using CSS a site administrator can change the look and feel of JS-Kit
Navigator widget to fit the theme of their site. Use the classes below to override
widget behavior to fit your site. Use CSS to style after the JS-Kit script tag as
follows:
<script src="http://js-kit.com/top.js" ></script>
<style>.js-Top { color: #FF0000; }</style>

CLASS DESCRIPTION
.js-Top Change border

Class Description

js-Top
This class will allow the site administrator to change the border color. Style
with:
<style> .js-Top {background-color:#FF9900; margin-top:12px; border: 5px solid
#FF0000;} </style>

Customizing JS-Kit Widgets 23

JS-Kit Reviews Installation
Installing JS-Kit Reviews is as easy as cut and paste. Simply cut and paste the
following code into your HTML page and publish.
<div class="js-kit-rating"></div>
<div class="js-kit-comments"></div>
<script src="http://js-kit.com/reviews.js"></script>

You should be able to immediately see the "Write a Review" message on that
page when you publish it on your web server and access it with a browser. The
reviews will not be visible if you access a page located on your computer or if a
numeric site addresses is used. On installation you will see:

Customizing JS-Kit 24
For Administration Rate your Object and Leave the first Post.

Customizing JS-Kit Widgets 25

 Customize
Using CSS a site administrator can change the look and feel of JS-Kit Reviews
widget to fit the theme of their site. Use the classes below to override widget
behavior to fit your site. Use CSS to style after the JS-Kit script tag as follows:
<script src="http://js-kit.com/reviews.js" ></script>
<style>.js-singleComment { color: #FF9900; }</style>

CLASS DESCRIPTION

.js-commentControl Default Control Colors

.js-commentTool a Controls

.js-CreateComment Leave Comment box

.js-leaveComment

.js-OldComments Use js-singleComment

.js-PageNavTop pagination color

.js-PageNavTop a pagination color

.js-PageNavBottom pagination color

. js-singleCommentCity Change city color

.js-singleComment single comments

.js-singleCommentDate single Comment date

.js-singleCommentDeletable Change delete color

.js-commentFieldLabel Change leave comment fields color

.js-commentFieldSubject Change leave comment box fields

color

.js-singleCommentKarma Karma

.js-singleCommentName single Comment name

.js-singleCommentReplyable Change reply color

.js-singleCommentText single Comment text

For Class Description see class description for JS-Kit Comments.

Customizing JS-Kit 26
Attributes

JS-Kit attributes enhance functionality of the JS-Kit Reviews widget.

ATTRIBUTE DESCRIPTION

adminBgColor Change Bg color of Posts by Admin

backwards Change order of comments

label Change “Leave a Comment” text

paginate Paginate comments

path Unique value related to object

permalink full URL to object

thread Turn threading on/off

For attributes description see JS-Kit Comments.

Customizing JS-Kit Widgets 27

 Administration

See JS-Kit Comment Administration.

Customizing JS-Kit 28
JS-Kit Polls Installation
Installing JS-Kit Polls is as easy as cut and paste. Simply cut and paste the
following code into your HTML page and publish.
<div class="js-kit-poll" style="width: 350px"></div>
<script src="http://js-kit.com/polls.js"></script>
You should be able to immediately see the Poll in configuration mode on that
page when you publish it on your web server and access it with a browser.
Polls will not be visible if you access a page located on your computer or if a
numeric site addresses is used. On installation you will see:

While being configured, the poll on your web page is visible only to
you, the web site administrator. Your users won't ever notice that you are
still configuring the poll.

Once you are done configuring the poll, click "Create poll". Your users
will immediately see the poll and will be able to vote on it. You will, too.
If you subsequently need to create a different poll, follow the
[reconfigure] link which will be available to you at any time. There is no
limit on the number of times you can reconfigure the poll. You won't
have to edit that HTML for poll-related reasons, ever.

Customizing JS-Kit Widgets 29

 Attributes

JS-Kit attributes enhance functionality of the JS-Kit Polls widget.

ATTRIBUTE DESCRIPTION

path Unique value related to object

path
Use these attributes in conjunction whenever possible. Path is just a unique
value associated to an object. If you are applying the Polls widget to a blog
article, the path attribute can be set to the article name. Path should always be
unique and preceded with a slash
<div class="js-kit-poll" style="width: 350px" path=”/poll1”></div>

Customizing JS-Kit 30
References

Customizing JS-Kit Widgets 31