RTLing GD Star Rating Plugin (WP) - Part 2: Fixing Different Icon sizes

When we RTLed the GD Star Rating Wordpress Plugin, we only added support for the default size of the icons(which is the 24px). In this quick and short post, we'll add support to the rest of the sizes so far: 12px, 16px, 20px, 30px and 48px. And since it's a small post, I'll show you how it's RTLed.

In the previous post, we found the preview of your rating(after you vote) wasn't rendered correctly in RTL:

And the problem was with a background-position value which was set to 0 SOME_VALUE. The fix was simply by turning the 0 into a right(or 100%) and leave the SOME_VALUE as it is. That's why the rtling of this one was simply:

	.ratingblock .starsbar.gdsr-size-24 .gdinner { background-position:right -48px!important;}

Notice the .gdsr-size-24? Yes it's the icon size of your rating block. And as for the y value of the background-position, it's -48 (which is -2*24).

So in order to RTL all of our available sizes we need to copy that line and only change the 24 and double it to get our corresponding value.

Where can you be sure? Go to the css directory in your gd-star-rating directory at /wp-content/plugins/gd-star-rating/css, open the gdsr.css.php file and scroll down to line #161 to find where this formula is generated:

echo $class." .starsbar.gdsr-size-".$size." .gdinner { background: url('".$url."') repeat-x 0px -".(2 * $size)."px; }\r\n";

You'll notice the variable $size is used and the value is multiplied by 2 to get the value.

See? Peice of cake :) So the updated CSS for the sizes will be as follows:

.ratingblock .starsbar.gdsr-size-12 .gdinner { background-position:right -24px!important;}
.ratingblock .starsbar.gdsr-size-16 .gdinner { background-position:right -32px!important;}
.ratingblock .starsbar.gdsr-size-20 .gdinner { background-position:right -40px!important;}
.ratingblock .starsbar.gdsr-size-24 .gdinner { background-position:right -48px!important;}
.ratingblock .starsbar.gdsr-size-30 .gdinner { background-position:right -60px!important;}
.ratingblock .starsbar.gdsr-size-46 .gdinner { background-position:right -92px!important;}

The source code is available to download and the one in the previous post is updated as well.

Enjoy!