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, userdriven 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 .js-CCMore .js-commentControl .js-commentTool a .js-CreateComment .js-leaveComment .js-OldComments .js-PageNavTop .js-PageNavTop a .js-PageNavBottom

DESCRIPTION add Avatar (+) Color Default Control Colors Controls Leave Comment box

Use js-singleComment pagination color pagination color pagination color

.js-singleComment .js-singleCommentDate .js-singleCommentDeletable .js-commentFieldLabel .js-commentFieldSubject .js-singleCommentKarma .js-singleCommentName .js-singleCommentReplyable .js-singleCommentText

single comments single Comment date

Karma single Comment name

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 Change Bg color of Posts by Admin Change order of comments Change “Leave a Comment” text Paginate comments Unique value related to object full URL to object Turn threading on/off

adminBgColor backwards label paginate path permalink thread

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
.js-rating-labelText

DESCRIPTION
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 Add Custom Star Image Add Custom Star Image Distinct value for object Full URL to page Add Custom Title, used with Navigator Widget Disassociate with used with Comments Widget Change color of the stars Change display view

imageurl imagesize path permalink title

standalone

starColor 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, starhalf.png, user.png, user-half.png, and gray.png. The first two are for community rating icons ( ), the following two ), and the last one is for a placeholder are for the user's own rating ( .
<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
.js-Top

DESCRIPTION
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 .js-commentTool a .js-CreateComment .js-leaveComment .js-OldComments .js-PageNavTop .js-PageNavTop a .js-PageNavBottom . js-singleCommentCity .js-singleComment .js-singleCommentDate .js-singleCommentDeletable .js-commentFieldLabel .js-commentFieldSubject .js-singleCommentKarma .js-singleCommentName .js-singleCommentReplyable .js-singleCommentText

Default Control Colors Controls Leave Comment box

Use js-singleComment pagination color pagination color pagination color Change city color single comments single Comment date Change delete color Change leave comment fields color Change leave comment box fields color Karma single Comment name Change reply color 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 Change Bg color of Posts by Admin Change order of comments Change “Leave a Comment” text Paginate comments Unique value related to object full URL to object Turn threading on/off

adminBgColor backwards label paginate path permalink thread

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 Unique value related to object

path
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

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.