RadRating Half Star Style

[Michael Davis]

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

[Tsvetie]

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.

[Michael Davis]

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

[Tsvetie]

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.

[Michael weinberger]

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

[Tsvetie]

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

[Jason]

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!

[Slav]

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