Controling RatedFill in RateYo using CSS

Question

I am using a great little jQuery plugin called RateYo in my application.

It uses SVGs as its method for creating stars which is obviously a great improvement on the traditional method of using images, however it appears to prevent using CSS to control the color of the rated stars.

So you can easily do something like:

$("#rateYo").rateYo({
    normalFill: "#A0A0A0",
    ratedFill: "#F39C12"
});

However for obvious reasons I would like to control these parameters through CSS rather than JavaScript.

I have tried something simple like

.rating svg {
    fill: $blue3;
}

Which does change the color of the stars but it also prevents the control from functioning correctly because it fixes the color of all the stars to the fill color provided in the CSS.

So, could anyone please provide any suggestions on how I might be able to control the ratedFill parameter through CSS rather than JavaScript?

Answer 1

By inspecting the markup that RateYo creates, you can find the relevant classes and target them.

Here's a live example:

$(function() {
  $(".rating").rateYo({
    rating: 2.5
  });
});

.rating .jq-ry-normal-group svg {
  fill: silver;
}

.rating .jq-ry-rated-group svg {
  fill: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">

<div class="rating"></div>