Changing size of rating stars

Im currently desperately trying to change the current size of the stars. I mean, I managed to do this in the css by changing the height and width to 32 and font size to 32px. Then adding some margin and removing inline so they are aligned horizontally.

The issue is that when I try to vote the user It doesnt fill in until the fifth star, only 3 and a half or so and stops there, I cant go until 5. Eventhough I changed all the widths accordingly.

What am I doing wrong?

I found the issue: I figured the ID ProfileBigSider with class votes_active_big have a width of 20 which maximum extends to 90 to fill in the stars color. How can I extend it to lets say 200px?

I do think you need to look here in templates/base/css/icons.css

line 27, 28

That looks like something to do with the vote stars which are from font awesome.

What does this number "f006" indicate? Something with the database?

Edit: nevermind, found out and tried icons.css but wont change the actual width which is 20px and increases to max 90px for the star rating. hard to explain. If you use firebug you will understand what I mean.

Really really weird..

Look here, http://fortawesome.github.com/Font-Awesome/ this is all of our current icons in use. Maybe the info below will help. Good Luck

scroll down the page and look for 

Increase the icon size by using the icon-large class. This increases the size by 33% relative to the font-size of the container.

Im trying to change it to 100% increase. Like 32 px instead of 16. I did manage to get it working but it is still too small for many users.

up

I still get a max width of 90px (which seems to be the container size of the smaller starts) eventhough I changed the font to 32px in icons.css

I cant figure out how to give set a max width for the container for selecting the starts. If I manually enter 200px in CSS then the entire stars become yellow.

Ok found the culprit!

        $sRet .= '<div id="'.$sDivId.'Slider" class="votes_active_'.$sName.'" style="width:' . round($iVoteRate * ($iMax ? $iWidth / $iMax : 0)) . 'px;">';

You can find it in BxBaseVotingView.php which is in templates/scripts. How can I change those two values of the slider? I want to set the max width to 200px.

votes_button_big common css they are sized by font sizes default is 18px icon 18px height 18px width change all three to the size you require you will also have to edit default.css bx-def-bc-margin but you might find this changes other margins .

happy thoughts

What I changed in size was: .votes_button_small

I made it 32px instead of 12px. Also change the margin a little etc. The problem however is that the active starts never reach more than 90px wide (3 and a half stars). It seems to give an automatic width for every star I hover, the last one 90px. Checked this with firefox.

I dont know what difference it makes if I use votes_button_small or big to be honest.

common.css around line 594 change width: 90px

It doesnt show 90px since it is inline. The empty stars are all big but the active stars (also big) never reach up to 5 stars, suddenly they stop at star 4. And cant add more. It is kind of stuck at a 90px limit.

 Look in /inc/classes/BxBaseVotingView.php

At the beginning the star sizes are defined.

class BxBaseVotingView extends BxDolVoting
{
    var $_iSizeStarBigX = 32;
    var $_iSizeStarBigY = 16;
    var $_iSizeStarSmallX = 16;
    var $_iSizeStarSmallY = 15;

I changed these to make it work with my vote icons as I changed them to a cocktail icon instead of stars.

I think when you change these you will get the size you need.

Also, you might have to adjust some CSS settings as well so keep firebug handy when you play with these numbers.

It took a bit of playing to get it to match.

The TOUGH part is when you change it from 1-5 to 1-10!  LOL

OH GOD I solved it,

Ok guys, go to:

1) Open  Common.css located in templates / base / css

2) Change font-size, height and width from .votes_button_small and  .votes_button_ big to 32px. Also add margin:3px;

2) Change the height of  votes_active_big, .votes_gray_big and  votes_active_small, .votes_gray_small to 32px. Also add margin:3px;

3) Search for .votes_button_big, .votes_button_small and remove  display:inline-block;

4) go to templates / base / scripts and open BxBaseVotingView.php

5) in this script file you will see the following:

class BxBaseVotingView extends BxDolVoting
{
    var $_iSizeStarBigX = X;
    var $_iSizeStarBigY = X;
    var $_iSizeStarSmallX = X;
    var $_iSizeStarSmallY = X;

Replace those "X" (12 and 18) with 32

Next upload all the modified files and refresh your cache in admin panel, including do a quick force refresh in your browser and you should see the changes ;)

With the overflow hidden command in css you can decide how many stars you want to show. Lets say 1 only, and replace that with an image of your choice, a "Like Button" for example. Tested and it worked as well. I will keep my starts though.

Ya I noticed, thanks alot steve for your help though. Why didnt you come earlier! you would have saved 4 hours of my precious life time

Are you uesing 7.1 or 7.09 cause the file you need in 7.1 is different templates/base/scripts/BxBaseVotingView.php

Im using 7.1 but I fixed it already. Did you check my message above and from steve? :)

Should be a ticket on this and all other inline styling created by scripts (mostly width but some other styling as well); move all these to style sheets.  I wonder just how many of these things are buried in Dolphin code as I encounter them way too often and it creates a nightmare when you build custom templates.