Multiple star ratings with different css files on one page

I have a problem with star ratings with different css files on one page. The problem is, that last css file is always applied.

Rating one




$this->widget('CStarRating',array(

			'name'=>$starRating .'-'. $data->id,

			'minRating'=>1,

			'maxRating'=>10,

			'starCount'=>5,

			'cssFile' => UrlHelper::getBaseUrl() . '/css/rating_small.css',

			'value'=>SalonRating::optimizeForStarRating($data->$starRating),

			'readOnly'=>true,

			),

	));



Rating two




$this->widget('CStarRating',array(

		'name'=>'rating-' . $data->id,

		'minRating'=>1,

		'maxRating'=>10,

		'starCount'=>5,

		'cssFile' => UrlHelper::getBaseUrl() . '/css/rating_big.css',

		'value'=>$rating,

		'readOnly'=>true,

            ));



In this case, rating_big.css is used for both star ratings on page, which is not desired behavior. I have tried various combinations of name and id attributes but no results :frowning: Does anyone know, how to fix this? Thank you.

Of course I found a solution immediately after posting this question… I added a class to the one of the ratings like following




$this->widget('CStarRating',array(

		'name'=>'rating-' . $data->id,

		'minRating'=>1,

		'maxRating'=>10,

		'starCount'=>5,

		'cssFile' => UrlHelper::getBaseUrl() . '/css/rating_big.css',

		'value'=>$rating,

		'readOnly'=>true,

		'htmlOptions' => array(

				'class' => 'stars-big',

		)

            ));



Then I edited rating_big.css - I added .stars-big in front of all styles. Making it more specific, this style is applied on all elements in class stars-big.