35
Customizing JS-Kit Widgets White Paper Abstract This paper provides an overview of customizing JS-Kit widgets.

JS-KIt customizing

Embed Size (px)

DESCRIPTION

White Paper Customizing JS-Kit Widgets.

Citation preview

Page 1: JS-KIt customizing

Customizing JS-Kit Widgets

White Paper

Abstract

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

Page 2: JS-KIt customizing

Page Left Intentionally Blank

Page 3: JS-KIt customizing

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

Contents

Page 4: JS-KIt customizing
Page 5: JS-KIt customizing

Customizing JS-Kit Widgets 1

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.

Introduction

Page 6: JS-KIt customizing

Customizing JS-Kit 2

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:

JS-Kit Comments

Page 7: JS-KIt customizing

Customizing JS-Kit Widgets 3

For Administrative reasons, be the first to leave a comment making sure you leave your email address.

Next Proceed to Customization.

Page 8: JS-KIt customizing

Customizing JS-Kit 4

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

Page 9: JS-KIt customizing

Customizing JS-Kit Widgets 5

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>

Page 10: JS-KIt customizing

Customizing JS-Kit 6

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.

Page 11: JS-KIt customizing

Customizing JS-Kit Widgets 7

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>

Page 12: JS-KIt customizing

Customizing JS-Kit 8

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>

Page 13: JS-KIt customizing

Customizing JS-Kit Widgets 9

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>

Page 14: JS-KIt customizing

Customizing JS-Kit 10

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>

Page 15: JS-KIt customizing

Customizing JS-Kit Widgets 11

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>

Page 16: JS-KIt customizing

Customizing JS-Kit 12

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>

Page 17: JS-KIt customizing

Customizing JS-Kit Widgets 13

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>

Page 18: JS-KIt customizing

Customizing JS-Kit 14

Administration

Page 19: JS-KIt customizing

Customizing JS-Kit Widgets 15

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:

JS-Kit Ratings

Page 20: JS-KIt customizing

Customizing JS-Kit 16

For Administrative reasons, be the first to Rate.

Page 21: JS-KIt customizing

Customizing JS-Kit Widgets 17

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>

Page 22: JS-KIt customizing

Customizing JS-Kit 18

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

Page 23: JS-KIt customizing

Customizing JS-Kit Widgets 19

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>

Page 24: JS-KIt customizing

Customizing JS-Kit 20

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>

Page 25: JS-KIt customizing

Customizing JS-Kit Widgets 21

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.

JS-Kit Navigator

Page 26: JS-KIt customizing

Customizing JS-Kit 22

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.

Page 27: JS-KIt customizing

Customizing JS-Kit Widgets 23

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>

Page 28: JS-KIt customizing

Customizing JS-Kit 24

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:

JS-Kit Reviews

Page 29: JS-KIt customizing

Customizing JS-Kit Widgets 25

For Administration Rate your Object and Leave the first Post.

Page 30: JS-KIt customizing

Customizing JS-Kit 26

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.

Page 31: JS-KIt customizing

Customizing JS-Kit Widgets 27

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.

Page 32: JS-KIt customizing

Customizing JS-Kit 28

Administration

See JS-Kit Comment Administration.

Page 33: JS-KIt customizing

Customizing JS-Kit Widgets 29

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.

JS-Kit Polls

Page 34: JS-KIt customizing

Customizing JS-Kit 30

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>

Page 35: JS-KIt customizing

Customizing JS-Kit Widgets 31

References