Saturday, August 15, 2009

Customize JS-Ratings Widget ?

Using a combo, split or score view

Use the view attribute to specify the display mode: "combo" (default), "split" or "score".

Combined view (default):

<div class="js-kit-rating" view="combo"></div>

<script src=""></script>

Split view:

<div class="js-kit-rating" view="split"></div>

<script src=""></script>

Score view:

<div class="js-kit-rating" view="score"></div>

<script src=""></script>

Changing the color of the stars in the 5-star view

You can use starColor and userColor attributes to change the widget color in "combo" and "split" modes. The starColor affects the color of the community rating, whereas the userColor sets the color of the particular user's rating.

<div class="js-kit-rating" starColor="Ruby"></div>

<div class="js-kit-rating" starColor="Red"></div>

<div class="js-kit-rating" starColor="Golden"></div>

<div class="js-kit-rating" starColor="Green"></div>

<div class="js-kit-rating" starColor="Emerald"></div>

<div class="js-kit-rating" starColor="Blue"></div>

<div class="js-kit-rating" starColor="Indigo"></div>

<div class="js-kit-rating" starColor="Violet"></div>

Same ratings/scores on different pages

If you want to rate or score an object which can appear on multiple pages (an item in your shopping cart or a blog article), put its unique permanent path on your site into the uniq attribute:

<div class="js-kit-rating" uniq="/blogEntry42"></div>

<script src=""></script>

Multiple instances of ratings and/or scores on one page

You can rate multiple items on the same page. Just put the Ratings <DIV>'s with unique uniq attributes where the ratings or scores should appear:

<div class="js-kit-rating" uniq="/shopping/item/1"></div>

<div class="js-kit-rating" uniq="/shopping/item/2"></div>

<div class="js-kit-rating" uniq="/shopping/item/3" view="score"></div>

<div class="js-kit-rating" uniq="/shopping/item/4" view="score"></div>

... rest of html code ...

<script src=""></script>

Using your own star graphics for ratings

In the "combo" and "split" modes you can replace starlet images with your own art by using imageurl and imagesize attributes. The URL specified 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 .

For example we have a set of mirrored stars at To use them on our website we would add the following code to a page:

<div class="js-kit-rating"



<script src=""></script>

You can see the result on the left. Please feel free to use our mirrored stars or create your unique rating graphics.

Changing the size of thumbnails ("score" view)

You can choose from three thumb sizes: "small" (10px X 12px), "normal" (12px X 15px) and "large" (15px X 18px).

<div class="js-kit-rating" view="score" thumbsize="small"></div>

<div class="js-kit-rating" view="score" thumbsize="normal"></div>

<div class="js-kit-rating" view="score" thumbsize="large"></div>

<script src=""></script>

The default value is "normal". You can also replace the standard graphics with your own design, as described in the next tip.

Using your own thumb-up/down graphics

In the "score" view mode you can replace the standard thumbnail graphics with your own design by using imageurl and imagesize attributes.

<div class="js-kit-rating" view="score"



<script src=""></script>

Note: The imageurl attribute needs to point to a single image file containing all four icons in the correct order. The best way to create it is by using our Thumbnail Generator. Use it to upload two or four replacement images, and the Thumbnail Generator will not only generate a compliant image file in PNG format, but also construct a <DIV> tag with the corresponding imageurl and imagesize attributes.

Displaying top rated/scored pages

Put the "Top rated topics" on your page by using the following code:

<div class="js-kit-top" title="Top rated topics"></div>

<script src=""></script>

For further details see the Navigator service.

Use a permanent URL for each object (blog post, article, etc.)

Use permalinks for articles and posts which can be addressed on your site by multiple alternative URLs. By specifying the permalink attribute in the <DIV> element associated with the object you ensure that Navigator service collects the data correcty and links to the existing URLs.

<div class="js-kit-ratings" title="Cool Stuff" permalink=""></div>

<script src=""></script>

Note: this attribute should not be confused with the uniq attribute but used in conjunction with it.

Display custom titles in Navigator

Navigator's Top and Hot lists show entries by displaying their actual paths on your site or their permanent URLs (if specified with the permalink attribute). If you would like a more readable title for your objects, you can use the title attribute.

<div class="js-kit-rating" title="My Title" permalink=""></div>

<script src=""></script>

Stumble Delicious Technorati Twitter Facebook
If you enjoyed this post, make sure you subscribe as an Reader!


Post a Comment

← Newer Post Older Post → Home

Recent Posts

Recent Comments

Follow Me - Advertise your site at! Submit your site and get tons of traffic! - Advertise your site at! Submit your site and get tons of traffic!