Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rating > RadRating Half Star Style

• Michael Davis

  Posted on Apr 1, 2010 (permalink)

  Hi,
  I'm creating a custom skin for RadRating which will make the stars smaller (originally they are 18px, I'm making them 14px). Everything works when the value is an even number. When it is set to half a star, the span is given a 9px width inline style (I need it to be 7px) but no class for identifying which list item is a half star vs a star is given, so I can't override the inline style. Is there any way to identify which list items are half stars or a way I can change the 9px span width to 7px?
  Thanks,
  Mike

  Reply

• Tsvetie Tsvetie

  Posted on Apr 7, 2010 (permalink)

  Hello Michael Davis,
  In order to change the width/height of the rating items, you need to make the following changes to the common CSS file of the rating control (RadRating.css), in addition to changing the width and height of the elements:
  

  .RadRating ul li .rrtPart

  {

      background-position:-18px -36px;

      margin-top:-14px;

  }

  
  

  .RadRating ul li .rrtPartComplement

  {

      background-position:-18px -18px;

      margin-top:-14px;

  }

  
  You need not change anything but the above mentioned styles. The rating control will calculate the width/height of the SPAN element that you mention dynamically.
  
  I have attached an updated version of the common CSS file of the rating control in order to demonstrate how you can change the width and height of the rating items to 14px.
  
  Greetings,
  Tsvetie
  the Telerik team

  
  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

  Attached files

  • radratingcustomskin.zip

  Reply


• Michael Davis

  Posted on Apr 13, 2010 (permalink)

  Thanks Tsvetie.
  This works when hovering, however, these will be static with a specified value. When I specify a value of *.5 to start with, it still has a width of 9px. Any way around this?
  Thanks again,
  Mike
  

  Reply

• Tsvetie Tsvetie

  Posted on Apr 14, 2010 (permalink)

  Hello Michael Davis,
  I am not quite sure I understand the problem you report. Could you please open a new support ticket and send me a simple running project with your custom skin that demonstrates the problem, as well as information on the steps I need to follow in order to reproduce it?
  
  Regards,
  Tsvetie
  the Telerik team

  
  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

  Reply

• Michael weinberger

  Posted on Jul 15, 2010 (permalink)

  I want to add something to this, that can be related to the problem reported.
  
  I created a "Small Rating" skin, so I have RadRating in half size (9px) for some portions and listings in the site.
  But I noticed that when the stars are rendered in continuous mode the rendering includes a Width property for the inner SPAN component. So if that star is only 50% filled "width: 9px" is added (so assumming always a 18pxs start, and causing it to render as 100% filled in my small skin version).
  
  As a suggestion, you can do the same with "width: 50%", and allowing more control to the Skin developers. That will be great to see that in the next version of this great control!.
  
  Thanks

  Reply

• Tsvetie Tsvetie

  Posted on Jul 16, 2010 (permalink)

  Hi Michael,
  I checked the support ticket that Michael Davis opened and the problem he reported turned out to be a bug in the rating control. However, we fixed the problem, and in case you are using the latest version of the Telerik.Web.UI assembly (2010.2.713), the rating control should render as expected.
  
  In case you can still reproduce the problem with the latest version of the suite, please open a formal support ticket and send me a running test project that demonstrates it.
  
  Best wishes,
  Tsvetie
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Jason

  Posted on Feb 8, 2012 (permalink)

  I'm trying to make the stars larger to work with a touch display and a finger.  I'm lost in all the CSS goo - I've tried to change the above styles, the height and width, and nothing changes.
  
  HELP!
  
  

  Reply

• Slav Slav

  Posted on Feb 13, 2012 (permalink)

  Hello Jason,
  
  The desired appearance can be achieved with a fully customized CSS and image sprite. You should increase the rating element and then to override the base CSS styles according to new Rating sizes and background positions.
  
  In the following forum thread there are an examples of how to reduce and how to increase the Rating items.
  
  While editing the sprite, you could also change the Rating icons with whatever icon you like.
  
  For your convenience I have attached a sample project with a Rating custom skin where the rating stars are bigger.
  
  Note that we do not support custom solutions and even if we try to give some help, we it is a developer`s responsibility to ensure that the controls will work properly after such a customization.
  
  Creating RadRating Custom skin could be also a useful resource.
  
  All the best,
  Slav
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Attached files

  • BiggerRatingSize.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rating > RadRating Half Star Style