How to make the vote button a normal labelled button?

Question

I got a bit stuck in changing the vote button (the thumbs up) into a "normal" labelled button, for example:

[  I like it  ]

To achieve this, I think I need to override function vote_buttons($post):

$this->post_hover_button($post, 'vote_up_tags', '+', 'qa-vote-one-button qa-voted-up');

to:

$this->post_hover_button($post, 'vote_up_tags', 'i like it', 'qa-vote-one-button qa-voted-up');

Has anyone got a better solution?

Comments

What is wrong with that particular solution?

---

For my recent project I wanted to give a label instead an icon, the label is to be change is text, e.g. I am displaying the number of likes within the button now, check my implementation at: http://www.schreibgenuss.de/81/willkommens-gedicht (scroll down bottom right of question, yellow button).

PS: I am posting my solution as an answer now...

---

An important note: When I wanted to reposition the VOTE buttons in the (html) line of the other buttons (see sama55's screenshots) it did not work. Big problem is that with repositioning - i.e. taking $this->voting() to another position, we have the voting form within the buttons form, which is not allowed. Then you get this q2a message "Please reload the page then try again"...

It took me 1 hour to find out.

Answer 1

I want to do the same thing, too.  Because I want to attach image, write in answer, but this is comment.

Example of my site button group:

NOW:

MY HOPE:

Relatively big customization seems to be necessary to realize this.

• Change all specific terms (vote, votes, vote up, vote down, etc...) in the language file
• Change of the layer / theme program (Including matter that Kai says)
• Change of your theme's CSS
• When you add icon, you should remake sprited image.

These are the things which I noticed, but, many changes may be necessary. . .

Comments

Hi sama, see my answer / solution above :)

Answer 2

This is how I implemented the required label using an advanced theme (note, labels are in German, yellow button):

function voting_inner_html($post)
{
    $this->vote_buttons($post);
    // $this->vote_count($post);
    $this->vote_clear();
}

function vote_buttons($post)
{
    $this->output('<div class="qa-vote-buttons '.(($post['vote_view']=='updown') ? 'qa-vote-buttons-updown' : 'qa-vote-buttons-net').'">');

    
    $likes = $post['raw']['upvotes'];
    $peoplePlural = ($likes!=1) ? 'Personen' : 'Person';
    
    $buttonlabel = 'Gefällt '.$likes.' '.$peoplePlural.' • Dir auch?';
    $buttonlabel2 = 'Gefällt '.$likes.' '.$peoplePlural;
    
    if($likes==0) {
        $buttonlabel = 'Gefällt dir der Beitrag?';
        $buttonlabel2 = 'Gefällt dir der Beitrag?';
    }
    
    switch (@$post['vote_state'])
    {
        case 'voted_up':
            $this->post_hover_button($post, 'vote_up_tags', $buttonlabel2, 'qa-vote-one-button qa-voted-up');
            break;
            
        case 'voted_up_disabled':
            $this->post_disabled_button($post, 'vote_up_tags', $buttonlabel2, 'qa-vote-one-button qa-vote-up');
            break;
            
        case 'voted_down':
            $this->post_hover_button($post, 'vote_down_tags', '&ndash;', 'qa-vote-one-button qa-voted-down');
            break;
            
        case 'voted_down_disabled':
            $this->post_disabled_button($post, 'vote_down_tags', '&ndash;', 'qa-vote-one-button qa-vote-down');
            break;
            
        case 'up_only':
            $this->post_hover_button($post, 'vote_up_tags', $buttonlabel, 'qa-vote-first-button qa-vote-up');
            $this->post_disabled_button($post, 'vote_down_tags', '', 'qa-vote-second-button qa-vote-down');
            break;
        
        case 'enabled':
            $this->post_hover_button($post, 'vote_up_tags', $buttonlabel, 'qa-vote-first-button qa-vote-up');
            $this->post_hover_button($post, 'vote_down_tags', '&ndash;', 'qa-vote-second-button qa-vote-down');
            break;

        default:
            $this->post_disabled_button($post, 'vote_up_tags', '', 'qa-vote-first-button qa-vote-up');
            $this->post_disabled_button($post, 'vote_down_tags', '', 'qa-vote-second-button qa-vote-down');
            break;
    }
            
    $this->output('</div>');
}

 

CSS:

.qa-vote-up-button, .qa-voted-up-button {
    background:none;
    border:0;
    height:auto;
    cursor:pointer;
    padding:0;
    margin-right:3px !important;
    font-size:12px;
    color:#666;
    text-align:left;
    overflow:visible; /* overflow:visible for IE */
}
.qa-vote-up-button:hover, .qa-voted-up-button:hover {color:#000;}
.qa-voted-up-button {
    cursor:default !important;
}
.qa-vote-up-button, .qa-voted-up-button {
    cursor:pointer;
    overflow:visible;
    display:inline-block;
    text-decoration:none !important;
    /*font-family:"MS Trebuchet",Arial,Helvetica;*/
    font-size:11px;
    letter-spacing:150%;
    border:1px solid #AAA;
    outline:0;
    padding:5px 10px;
    background: #ffc533;
    background: -moz-linear-gradient(top, rgba(255,248,228,1) 0%, rgba(255,197,51,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,248,228,1)), color-stop(100%,rgba(255,197,51,1)));
    background: -webkit-linear-gradient(top, rgba(255,248,228,1) 0%,rgba(255,197,51,1) 100%);
    background: -o-linear-gradient(top, rgba(255,248,228,1) 0%,rgba(255,197,51,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,248,228,1) 0%,rgba(255,197,51,1) 100%);
    background: linear-gradient(to bottom, rgba(255,248,228,1) 0%,rgba(255,197,51,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fff8e4", endColorstr="#ffc533",GradientType=0 );
    color:#666;
    -webkit-background-clip:padding;
    -moz-background-clip:padding;
    -o-background-clip:padding-box;
    -webkit-border-radius:0.2em;
    -moz-border-radius:0.2em;
    border-radius:0.2em;
}