TrickBlogger: 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):

Split view:

Score view:

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:

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:

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 http://js-kit.com/images/stars/mirror. To use them on our website we would add the following code to a page:

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).

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.

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:

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.

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.