Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rating > How to Reduce RadRating Star Size

• Murali

  Posted on Oct 22, 2010 (permalink)

  Hi,
  
  I am using RadRating Control in a RadGrid. i have paucity of space for the default sized stars RadRating generates. Is there anyway to reduce the size of the stars? i tried creating a custom skin but in vain. can anybody help me? Help much appreciated.
  
  Thank you,
  
  Murali Krishna.

  Reply

• Bozhidar Bozhidar

  Posted on Oct 25, 2010 (permalink)

  Hello Murali,
  
  If you want to use smaller rating items, you should create a custom skin where the sprite images will be smaller than the original one. It will also be necessary to reduce the item sizes in the custom CSS file in order to set the new width and height dimensions of the Rating items.
  
  For your convenience I have created and attached a custom Rating skin with smaller items based on the Default Telerik Skin, which you could use directly in your application, or you could use it as an example/template to customize new color scheme sprite images.
  
  Attached is also ratingsmaller.gif showing the result in the browser comparing the normal sized Rating and the new smaller custom rating.
  
  Greetings,
  Bojo
  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

  • ratingsmalleritems.zip
  • ratingsmaller.gif

  Reply


• Murali

  Posted on Oct 25, 2010 (permalink)

  Hi Bojo ,
  
  Thank you very much. it worked out perfect. I appreciate all the help. Thank you once again.
  
  Regards,
  Murali.

  Reply

• Derek Swanson

  Posted on Mar 19, 2011 (permalink)

  Hi,
  
  I am trying to implement the same solution posted here and for the most part it works except for one item.  When I set the value to say 3 out of 5 stars, as an example, the first 3 stars are not highlighted.  Everything works normally using the normal CSS, so this leads me to believe there is an extra step needed in order to show the highlighted stars for the smaller CSS.  
  
  Any suggestions to get the first 3 stars highlighted?  Thanks!

  Reply

• Bozhidar Bozhidar

  Posted on Mar 19, 2011 (permalink)

  Hello Derek,
  
  We have been asked just to re-size the sprite stars, and we did it. Please, note that we do not support custom solutions like that, and even if we are trying to help, we could not be responsible if the controls does not work as expected after all custom changes.
  
  In that case, except sprite changes, some CSS background-position should be overwritten. To have stars selected you should add the following CSS code also:
  
  

  div.RadRating_Smaller a span

  {

      background-position: 0 0;

  }

   

  div.RadRating_Smaller .rrtSelected a span

  {

      background-position: -18px 0;

  }

   

  div.RadRating_Smaller .rrtOver a span

  {

      background-position: -18px -36px;

  }

  
   Redesigned sprite has been also attached.
  
  If some of the events do not behave as expected, you should check if the necessary background positions are correct and to overwrite it form the base stylesheet.
  
  Kind regards,
  Bojo
  the Telerik team

  Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

  Attached files

  • Sprite.png

  Reply

• Derek Swanson

  Posted on Mar 19, 2011 (permalink)

  Hi,
  
  Thank you for your help.  I think we are close.  I see a difference in the stars in that they are not hightlighted, but when I set a value to the rating control, the actual rating isn't seen.  In other words, my hope is that when I set the rating to be 3, 3 stars would be highlighted and the other 2 would not be highlighted. 
  
  What I did is I used the same CSS that was provided in the original post and then added the CSS with the new sprite that you just provided.  Is there anything else I might be missing to get the actual value highlighted? 
  
  Thanks again!

  Reply

• Derek Swanson

  Posted on Mar 19, 2011 (permalink)

  Hi,
  
  Never mind!  I figured it out.  What you sent was correct.  There was just one error in that CSS that was provided.  For the ".rrtSelected a span", there wasn't a space between the -18px and the 0, but it looks right to what you sent, so not sure why it copied wrong.  I added the space, and it works perfectly!!
  
  Thank you so much for the help and the fast turn around time.  You are awesome!
  
  Cheers,
  Derek

  Reply

• Bozhidar Bozhidar

  Posted on Mar 19, 2011 (permalink)

  Hello Derek,
  
  Glad to hear you have figured it out. Probably it is a bug of copy/paste function, I take a look at my code in visual studio and .rrtSelected a span positions are not merged.
  
  It may be necessary also to override the following classes: .rrtPartComplement and .rrtPart. If you do that, make sure you are using the right selectors and cascade in order to make the selector heavier: div.RadRating_Smaller. If you need further assistance with your project, you could open a support ticket and send us the application for further assistance.
  
  Regards,
  Bojo
  the Telerik team

  Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

  Reply

• syed

  Posted on Jul 19, 2011 (permalink)

  How to Increase the size of stars, I need it to convert it lot bigger, to show on survey question page.

  Reply

• Bozhidar Bozhidar

  Posted on Jul 19, 2011 (permalink)

  Hi,
  
  To increase the star size, the process would be similar to decrease them. You should create a custom sprite image with your desired star size - it does not matter bigger or smaller. Then you should replace the original sprite with the custom one, and to change in the CSS file the rating sizes and rating position in order to fit the new stars size.
  
  Greetings,
  Bojo
  the Telerik team

  Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  Reply

• syed

  Posted on Sep 28, 2011 (permalink)

  Hi,
  
  I know, this would be the same procedure, and I tried to make sprite size bigger, but it didn't work. It would be great as you did with reduce size, if you can send me the rating star in double in size from the original one, with style sheet, same skin. I have done so many things but still unable to do it.
  
  Thanks

  Reply

• Bozhidar Bozhidar

  Posted on Sep 29, 2011 (permalink)

  Hello Syed,
  
  Attached is a sample project containing RadRating with double sized stars. Note that we do not support custom solutions and it`s developer`s responsibility to ensure if after the sprite resize the control will work properly.
  
  Kind regards,
  Bozhidar
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Attached files

  • BiggerRatingSize.zip

  Reply

• syed

  Posted on Sep 29, 2011 (permalink)

  Thanks alot. Its works great, and according to my desired result. Thanks once again.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rating > How to Reduce RadRating Star Size