You are here

RTLing GD Star Rating Plugin (WP) (UPDATED)

GD Star Rating is a WordPress plugin that allows your blog readers to rate your posts and pages. It is extremely flexible when it comes to appearance and language support*. Graphics and text are controllable via the plugin dahsboard. Even in RTL, the rating block is properly aligned (not 100%).
Example of a rating blog of a WP post

The problem is in the stars mainly...When you hover your mouse over the first star from the right, it should be the lowest rating button (1/10 for example). In RTL it's the opposite..the first star is actually the highest rate. Check the screenshot below:
Rating block's problem in RTL. First Star is actually the last one
 

Overriding the CSS (using FireBug) resulted with this very small CSS addition that should solve the problem. Append the below styles to your stylesheet (Dashboard -> Appearance -> Editor, edit the Stylesheet styles.css) and save. Voila!

Rating block RTLed

.gdthumb a,.ratepost .starsbar a,.rcmmpost .starsbar a,.ratemulti .starsbar a,.rcmmmulti .starsbar a,.ratecmm .starsbar a,.reviewcmm .starsbar a{right:0!important; left:auto!important;}
.gdthumbtext, .gdthumb,.thumblock .ratingloader ,.raterleft,.ratingtextmulti,.ratingstarsinline{ float: right!important;}
.raterright,.ratingbutton{ float: left!important; }
.mtrow td.mtstars,.gdouter,.loader{text-align:right!important;} 

The CSS is available to be downloaded below. Hope you enjoy this quick tweak.

*Regarding the language support. I couldn't find a template for the Arabic translation for the plugin online. I'll work on translating the default values and post it soon. If anyone has (or know someone who has) translated it let me know please :)

UPDATE(08-02-2010 @15:10): I missed an extra RTL issue which can be fixed by adding the below CSS rule.

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

It fixes the background images'(stars) alignment which was causes rating to look like this:
Another RTL Issue in the rating block caused by the background-image property

The source code is updated as well.

UPDATE(08-02-2010 @15:35):Also note this is a quick fix to the default settings (yellow stars with size of 24px). Will post a separate post to fix this for all types and sizes.

UPDATE(16-03-2010 @12:02):Updated fix is available at the subpost next

Average: 3.6 (23 votes)