1. Home
  2. Forum
  3. jQuery
  4. How to get crystal-star.png image for ejRating?

How to get crystal-star.png image for ejRating?

currently i ve rating-star.png and color of stars are blue but i want it to be yellow. I saw in your documentation that crystal-star.png have yellow filling in stars.So,how to get that image? or is there any other way to get star filled with different colors

1 Reply
KR Keerthana Rajendran Syncfusion Team May 4, 2018 01:13 PM UTC

Hi Raj Kumar, 
 
Thank you for contacting Syncfusion Support. 
 
We have prepared a sample based on your requirement by using cssClass property of Rating control. We have used three different images for each state.(Reset, active, inactive icons). Please refer to the below code snippet 
 
    <input id="fullRating" type="text" class="rating" /> 
    <script type="text/javascript"> 
        $(function () { 
          $("#fullRating").ejRating({ value: 4 ,maxValue:5,height:30, width:80,shapeHeight:60, shapeWidth:30,cssClass:"custom"}); 
            
        }); 
    </script> 
    
     <style> 
      .custom.e-rating.e-horizontal .e-shape, 
    .custom.e-rating.e-vertical .e-shape, 
    .custom.e-rating.e-horizontal .e-shape-list, 
    .custom.e-rating.e-vertical .e-shape-list, 
    .custom.e-rating.e-horizontal .e-reset,  
            .custom.e-rating.e-vertical .e-reset 
    {  
            background: none; 
    } 
             
             .custom.e-rating.e-horizontal .e-reset,  
            .custom.e-rating.e-vertical .e-reset 
    {   
            background: url('../content/images/rating1.png') no-repeat; 
            background-size:100%; 
            margin: 1px; 
    } 
     .custom.e-rating.e-horizontal .e-shape.selected, 
    .custom.e-rating.e-horizontal .e-shape.active, 
    .custom.e-rating.e-vertical .e-shape.selected, 
    .custom.e-rating.e-vertical .e-shape.active   
    {  
           background: url('../content/images/rating2.png') no-repeat;  
            background-size:100%; 
    } 
             
    .custom.e-rating.e-horizontal .e-shape.inactive, 
    .custom.e-rating.e-vertical .e-shape.inactive, 
     .custom.e-rating.e-horizontal .e-shape-list, 
    .custom.e-rating.e-vertical .e-shape-list   
    {  
           background: url('../content/images/rating3.png') no-repeat; 
          background-size:100%; 
    } 
             
    .custom.e-rating .e-shape.active 
    { 
           background-position: 0 0; 
    } 
    .custom.e-rating.e-horizontal .e-shape-list, 
    .custom.e-rating.e-vertical .e-shape-list 
    { 
       background-position: 0 0; 
       float: left; 
    } 
</style> 
 
Now the image will be displayed as shown below 
 
 
Sample can be downloaded from the below link 
 
 
Regards, 
Keerthana. 


Loader.
Up arrow icon