Hello! I'm new to this module, so if this issue has already been addressed, please help me find the relevant topic. I wasn't able to find one.

I'm using the Thumbs Up widget on a project, and the thumb appears orange both before and after it's clicked, even though there's a gray thumb in the same image file/sprite. Is there already a way to get the thumb to start out gray and turn orange when the user has voted?

If there's not already a way, I'll be happy to take it on, but I don't want to reinvent the wheel. Thank you!

Comments

BenStallings’s picture

BenStallings CreditAttribution: BenStallings commented
Category: Feature request » Bug report
BenStallings’s picture

BenStallings CreditAttribution: BenStallings commented

OK, this is probably not the correct way to go about this, but it's the way I found.

First, I changed the thumbs-up.css file to read

.rate-thumbs-up-btn-up {
  display: inline-block;
  background: url(../thumbs-up-down/thumbs.png) no-repeat 0 -25px;
  width: 24px;
  height: 24px;
  text-indent: -9999px;
}

.rate-thumbs-up-btn-clicked {
  background: url(../thumbs-up-down/thumbs.png) no-repeat 0 0;
}

That is, by default the widget has its background offset by 25 pixels, to display the gray thumb, but when the .rate-thumbs-up-btn-clicked class is added, the background is returned to the zero position to display the orange thumb.

Next I added the following to rate.js just above the click function:

if (widget.children('.rate-info').text().indexOf('you') > -1) {
  widget.children('a').addClass('rate-thumbs-up-btn-clicked');
}

There are a couple of glaring problems with this solution: it won't work in languages other than English, and it may interfere with other widgets. I'm eager to hear how I should have done it instead. Thanks!

BenStallings’s picture

BenStallings CreditAttribution: BenStallings commented
Status: Active » Needs review
lwwalker’s picture

lwwalker CreditAttribution: lwwalker commented

Nice. Thanks for updating with your fix, I was having the exact same problem. Your fix works fine so far for me.

mr.andrey’s picture

mr.andrey CreditAttribution: mr.andrey commented

Subscribing. It would be nice to have this working out of the box with translations and all. Thanks!

Time has come’s picture

Time has come CreditAttribution: Time has come commented

The Thumbs Up Thumbs Down also has the same issue - button state doesn't change on voting.

I think I've found a CSS fix.

I replaced these over rode these styles via my theme's custom.css. 

.rate-user .rate-thumbs-up-down-btn-up.rate-voted {
  background: url(thumbs.png) no-repeat 0 0;
}

to

..rate-thumbs-up-down-btn-up.rate-voted {
  background: url(thumbs.png) no-repeat 0 -24px;
}

and

.rate-user .rate-thumbs-up-down-btn-down.rate-voted {
  background: url(thumbs.png) no-repeat 0 -48px;
}

to

.rate-thumbs-up-down-btn-down.rate-voted {
  background: url(thumbs.png) no-repeat 0 -72px;
}

Not sure if this is the right way to achieve it but works for me.