Custom Stars

I'm also interested in using custom images (balloons in my case) for fivestar rating.

UPDATE: posted this to fast, found the solution over here: http://drupal.org/node/234391

This solution means submitting the widgets and having it become part of the module.
It would be more useful to have the widget defined somewhere in my own theme or directory and recognized by the Fivestar module.

use this -> http://drupal.org/node/234391

You don't have to submit the stars back ;-)

I'm missing something here. If I understood the instructions correctly, the only way I know to do this is to put a new widget directory into the Fivestar module directory. That means that when I update the Fivestar module to the latest and greatest, I lose the widget. Am I missing something?

I just looked at the instructions they're pretty dated.

Here's an attempt at a simple update for now.

All you have to do is declare the hook_fivestar_widgets() function. You can see an example of this in the fivestar.api.php file.

It looks like this:

/**
 * Implementation of hook_fivestar_widgets().
 *
 * This hook allows other modules to create additional custom widgets for
 * the fivestar module.
 *
 * @return array
 *   An array of key => value pairs suitable for inclusion as the #options in a
 *   select or radios form element. Each key must be the location of a css
 *   file for a fivestar widget. Each value should be the name of the widget.
 *
 * @see fivestar_fivestar_widgets()
 */
function hook_fivestar_widgets() {
  // Letting fivestar know about my Cool and Awesome Stars.
  $widgets = array(
    'path/to/my/awesome/fivestar/css.css' => 'Awesome Stars',
    'path/to/my/cool/fivestar/css.css' => 'Cool Stars',
  );

  return $widgets;
}

Would love is someone could update the docs for 7.x :-D

So in a real example the code would look this this.

function mymodulename_fivestar_widgets() {
  // Letting Fivestar know about my Custom Stars.
  $widgets = array(
   drupal_get_path('module', ' mymodulename') . '/fivestar-css.css' => 'My custom  Stars',
  );
  return $widgets;
}

Does this help?

Just a note:

drupal_get_path('module', ' mymodulename') . '/fivestar-css.css' => 'My custom  Stars',

It is recommended not to use spaces in the widget name.

Thanks for the response but I must be missing something.

From the fivestar module, it seems like a widget is made up 4 files and we need at least two files to get it to work,
the image file and the css file. How do we specify the image file and where do we put that?

Thanks.

The image file is specified in the CSS file, nafmarcus.

You can copy one of the current widgets on the fivestar folder, and you'll se how it's working.

If a developer creates a fivestar custom widget by defining it inside the fivestar widget directory of the module, and later, another developer updates the fivestar module by replacing the old directory with the newer version of the module, then the custom theme is destroyed.

To prevent this, I recommend a namespace 'fivestar' directory inside the theme directory to be scanned for custom widgets.

Put another way, how about making the module able to scan the top level of the theme directory for a nested directory named 'fivestar'. If one exists, sub-directories of the theme's 'fivestar' directory contain custom widget themes of images and css, and each are added to the star theme selection page in the admin interface.

This truly separates the theme from the functionality, the way Drupal does everything else.

It will not be much of a performance hit since the widget is chosen in the admin interface.

Comments?

I tried the solution from #7 but it didn't work for me. Or at least it didn't work as intended. I've made a module, defined a hook, created css and images, and then in node type settings selected my 'Custom' stars. But for some reason Fivestar widget has 'Default' style (css and all). I've made sure the path to my css is correct. Where else should I look?

I was having the exact same problem. I needed to update the names of all the css classes in the css file to fivestar-myWidgetName. That is, as soon as you use your own widget, the css classes on your page change and if you don't change the css class names in your css file, the stars defaults to the default stars. And you go out of your mind!

Here's the declaration. I name my widget gitb_small_stars

function gitb_reviews_fivestar_widgets() {
  $widgets = array(
   drupal_get_path('module', 'gitb_reviews') . '/gitb_fivestar_small/itcs_star_small.css' => 'gitb_small_stars',
  );
  return $widgets;
}

And so in my css file I needed to update the class names to fivestar-gitb_small_stars

/* Static View-only Star Version */
.fivestar-gitb_small_stars div.fivestar-widget-static .star {
  width: 10px;
  height: 10px;
  background: url(./itcs_star_small.png) no-repeat 0 0px;
}

.fivestar-gitb_small_stars div.fivestar-widget-static .star span.on {
  background: url(./itcs_star_small.png) no-repeat 0 -10px;
}

@nafmarcus I don't get whats the problem? This is on purpose.

Maybe is more of a documentation issue.

It's completely an issue of documentation. I was only replying to the person above who had followed the instructions and was still stuck and hopefully this solved his/her problem.

Setting up your own stars is simple. It's just that the instructions in #6, #7 and #10 don't mention the need to update the css class name or how the name is constructed.

This information was very useful. Thanks to all who contributed above.

I had to hunt around to put a few more pieces together to get it working, since some things go without saying in this thread, which (not being so inclined) left me a bit stumped.

I thought for the benefit of anyone else who wants to do this that I might put down what I did in detail (& also hopefully get some feedback as to whether I went about it in the correct way).

Here it is step by step.
___

1) Created a folder for my helper module called, for example, 'my_stars'.

2) Made the stars & cancel image files, following the process outlined here:
- https://drupal.org/node/234391
That was simple enough. I wanted mine to be a bit bigger, so I went for 40x120px for the stars and 40x80px the cancel image (which affects the CSS in (5) below). That gave me a 'my_stars.png' and 'cancel.png' file which I put in the 'my_stars' module file above.

3) Created a my_stars.info file with the following contents:

name = My Stars
description = Adds custom stars to Fivestar
core = 7.x
dependencies = fivestar

4) Then created a my_stars.module file with the following:

<?php
function my_stars_fivestar_widgets() {
// Letting Fivestar know about my custom stars.
  $widgets = array(
   drupal_get_path('module', 'my_stars') . '/my_stars.css' => 'my_stars',
  );
  return $widgets;
}
?>

5) Next was the CSS, based on the minimal widget that comes with Fivestar, named 'my_stars.css':

/* Static View-only Star Version */
.fivestar-my_stars div.fivestar-widget-static .star {
  width: 40px;
  height: 40px;
  background-image: url(my_stars.png) no-repeat 0 0;
}

.fivestar-my_stars div.fivestar-widget-static .star span.on {
  background-image: url(my_stars.png) no-repeat 0 -80px;
}

.fivestar-my_stars div.fivestar-widget-static .star span.off {
  background-image: url(my_stars.png) no-repeat 0 0;
}

/* Javascript Star Version */
.fivestar-my_stars div.fivestar-widget .cancel,
.fivestar-my_stars div.fivestar-widget .star {
  width: 40px;
  height: 40px;
}
.fivestar-my_stars div.fivestar-widget .cancel,
.fivestar-my_stars div.fivestar-widget .cancel a {
  background: url(cancel.png) no-repeat 0 0;
}

.fivestar-my_stars div.fivestar-widget .star,
.fivestar-my_stars div.fivestar-widget .star a {
  background: url(my_stars.png) no-repeat 0 0;
}

.fivestar-my_stars div.fivestar-widget div.on a {
  background-position: 0 -40px;
}
.fivestar-my_stars div.fivestar-widget div.hover a,
.fivestar-my_stars div.rating div a:hover {
  background-position: 0 -80px;
}

Take care to replace all instances of 'my_stars' with whatever you called yours (as nafmarcus pointed out), and make sure your background-position value reflects the size of your image (i.e. 1/3 and 2/3 of the total image height).

6) Upload the 'my_stars' module folder, containing the two image files, the CSS file the .info file and the .module file to sites/all/modules and then you will find module in the "Other" section. Switch it on as usual and under the 'Manage Display' tab of whatever content type you are using Fivestar on click the cog on the right of the fivestar field. You should then be able to choose your custom stars under the 'Star display options'.

That's it. If I understand correctly, this means that I can update Fivestar without losing my custom stars.

Well, that seemed to work. Now I have found that (possibly because I am using Field Permissions) that my customs stars are sometimes lost in favour of the default.

anyone have any idea on how to turn the stars in to Checkbox's ?
I created my own style using one of the widgets fivestar has and replaced the stars with Checkbox images, one Ticked, Unticked and Hover. Only problem is that when you select star 4 for example you get 4 ticks on 1, 2, 3 and 4! Any way to just get the tick on the box selected?

Thanks matt.rad for #17 which I have now used successfully, but I had to change your CSS so that the first three entries refer to 'background' rather than 'background-image' like this:

/* Static View-only Star Version */
.fivestar-my_stars div.fivestar-widget-static .star {
  width: 40px;
  height: 40px;
  background: url(my_stars.png) no-repeat 0 0;
}
.fivestar-my_stars div.fivestar-widget-static .star span.on {
  background: url(my_stars.png) no-repeat 0 -80px;
}
.fivestar-my_stars div.fivestar-widget-static .star span.off {
  background: url(my_stars.png) no-repeat 0 0;
}

etc.

Great tutorial #17! spent a few hours wondering why the official documentation was not working.

I have come to weird issue here...

could someone tell me why the required path from hook_fivestar_widgets() is getting cludgged into an style ID ?

For example, drupal_get_path returns correct path to css file

function chilistar_fivestar_widgets() {
  
  // let fivestar know about my widget
  $widgets = array(
    
    drupal_get_path('module', 'chilistar') . '/chilistar.css' => 'Chili Stars',
    
    );
  drupal_set_message('<pre>'.var_dump($widgets).'</pre>');
  return $widgets;

the var_dump demonstrates this.

Now, the custom stars don't show and I get an ID in inspector like:

id="edit-instance-widget-settings-widget-fivestar-widget-sitesallmoduleschilistarchilistarcss"

so for some reason, fivestar seems to be attempting to use my path to the css as an ID name ??????

module structure
------------------------
chilistar
+chilistar.info
+chilistar.module
+chilistar.css -copied from flames widget, with proper text replaced i.e.

 .fivestar-chilistar div.fivestar-widget-static .star span.on {
   background: url(chilistar.png) no-repeat 0 -52px;
 }

+chilistar.png
+delete.png
-------------------------------

Could someone enlighten me to what the heck I am doing wrong ?

This did not work consistently for me (kept shifting back to default stars) until I realized that I'd named my css "fivestar.css" in a folder called "fivestar". Changing the names fixed it. Duh.

Deck_penguin, have you found a solution?
I managed to get the custom module to work on the first installation, based on the tutorial in number17, but since, the stars do not display anymore, only the default ones in any view and in the manage display section...