Thumbs-Up Replacing Plus-Minus for Comments

Need I say- BACKUP before making file modifications and changes.

There are always more than one way of doing things, so if anyone has another way, or a better way of doing this thing- Please Chime In

This is how I replaced the "Plus" and "Minus" Font-Not-So-Awesome Icons (Which really don't suck, I just don't care much for them...I like a little color and life in my site) with Thumbs-Up and Thumbs-Down icons.

I attached some screen-shots as well for ya, and the icons I used for the Thumbs-Up and Thumbs-Down.

NOTE: If you wish to use the Font Awesome "Thumbs-Up" and "Thumbs-Down" icons, then you need only complete STEP-1

STEP-1:

You need to modify the file: /templates/base/scripts/BxBaseCmtsView.php (again- backup first)

In BxBaseCmtsView.php Around line 301 find this line:

<div class="cmt-buttons"><a title="'._t('_Thumb Up').'" href="javascript:void(0)" id="cmt-pos-'.$a['cmt_id'].'" class="cmt-pos"><i class="sys-icon plus-sign"></i></a><a title="'._t('_Thumb Down').'" href="javascript:void(0)" id="cmt-neg-'.$a['cmt_id'].'" class="cmt-neg"><i class="sys-icon minus-sign"></i></a></div>

And replace the plus-sign and minus-sign with thumbs-up and thumbs-down so you code should look like this:

<div class="cmt-buttons"><a title="'._t('_Thumb Up').'" href="javascript:void(0)" id="cmt-pos-'.$a['cmt_id'].'" class="cmt-pos"><i class="sys-icon thumbs-up"></i></a><a title="'._t('_Thumb Down').'" href="javascript:void(0)" id="cmt-neg-'.$a['cmt_id'].'" class="cmt-neg"><i class="sys-icon thumbs-down"></i></a></div>

Save and FTP BxBaseCmtsView.php back up to your site.....and of course- you'll likely need to clear your caches.

Now, you will have little green and red Font Awesome Thumbs-Up and Thumbs-Down icons.....They will turn grey after a member clicks one or the other, giving a positive or negative point to a comment.

Much thanks goes to geek_girl for the remaining steps outlined here- Replace Font-Stinky Icons

STEP-2 :

You need*** to modify the file: /templates/base/css/icon.css (you may also need to do this with your custom template's icon.css if you have a custom template.....***note- making changes to the base CSS files means that these changes will need to be made again after upgrading to newer versions of Dolphin) (again- backup first)

In icon.css Around line 158 find-

.sys-icon.thumbs-up:before            { content: "\f087"; }
.sys-icon.thumbs-down:before          { content: "\f088"; }

And replace with this-

.sys-icon.thumbs-up:before            { content: url(../images/thumbs-up_32.png); }
.sys-icon.thumbs-down:before          { content: url(../images/thumbs-down_32.png); }

Then Save and FTP icon.css back up to your site.

You'll also need to upload your Thumbs Up and Thumbs Down images to the appropriate directory....In this case, we will need to upload thumbs-up_32.png and thumbs-down_32.png to the templates/base/images directory.

And of course- you'll likely need to clear your caches.

That should be it!

Again, if I missed something, or if there is a better way to do this, or whatever, please say so :)

Nice, thanks for sharing this.

Many thanks, this is very much appreciated!

These instructions work great, but I wanted to expand on this by having these icons go to monochrome just as the font-awesome icons do after a vote has been cast. I've attached the icons I'm attempting to use.

It seems like the monochrome icons should be referenced from cmts.css at around line 240, but I'm not sure how that reference should be made. 

If this can be done, I would certainly appreciated knowing how to use them.

Thanks for any help with this. I agree that these are much more attractive than the flat font-awesome. 

The lines you referenced in cmts.css only change the font colour of the icons. This makes no difference if you are using images.
To change the image to a BW version, you would be best adding the functionality in inc/js/classes/BxDolCmts.js in the function:

BxDolCmts.prototype._rateComment = function(e, iCmtId, iRate) {

...at line 625.
The relevant line is 643:

$(e).parent().parent().addClass('cmt-rate-disabled');

You can see that the disabled class is added here once the comment rating is received, this is where you need to add the JS to change the image src from the colour thumbs up to the BW thumbs up, once for each image. I don't have time to write the code now, but I will check back when I have time and try to write it if no-one beats me to it.

I see you are not running 7.2 which changes things. On my 7.1.6 dev I changed a few things to make it work:

1: icons.css -

.sys-icon.thumbs-up:before            { content: url(../images/thumbs-up_32.png); }
.sys-icon.thumbs-down:before          { content: url(../images/thumbs-down_32.png); }
.sys-icon.thumbs-up-bw:before         { content: url(../images/thumbs-upBW_32.png); }
.sys-icon.thumbs-down-bw:before       { content: url(../images/thumbs-downBW_32.png);}

2: inc/js/classes/BxDolCmts.js (line 583)

BxDolCmts.prototype._rateComment = function(e, iCmtId, iRate) {
    		var $this = this;
		    var oData = this._getDefaultActions();
		    oData['action'] = 'CmtRate';
		    oData['Cmt'] = iCmtId;
		    oData['Rate'] = iRate;
                    var oIconUp = $('#cmt-pos-'+iCmtId).children('i').eq(0);
                    var oIconDown = $('#cmt-neg-'+iCmtId).children('i').eq(0);
                    var sIconUpClass = oIconUp.attr('class')+'-bw';
                    var sIconDownClass = oIconDown.attr('class')+'-bw';

		    this._loading (e, true);

...and a little further on:

function (s) {
		        	$this._loading (e, false);
        			if(jQuery.trim(s).length)
		        		alert(s);        			
        			else if(iRate == 1) {
        				$(e).html(parseInt($(e).html()) + iRate);
        				$(e).parent().parent().addClass('cmt-rate-disabled');
                                        oIconUp.attr('class', sIconUpClass);
                                        oIconDown.attr('class', sIconDownClass);
        			}
        			else if(iRate == -1) {
                        $this.reloadComment(iCmtId);
        			}

3: templates/base/scripts/BxBaseCmtsView.php (line 292)

       function _getRateBox(&$a)
    {
        $sClass = '';
        $sIconClass = '';
        if ($a['cmt_rated'] || $a['cmt_rate'] < $this->_aSystem['viewing_threshold']) {
            $sClass = ' cmt-rate-disabled';
            $sIconClass = '-bw';
        }

        return '
            <div class="cmt-rate'.$sClass.'">
                <div class="cmt-points">'._t( (1 == $a['cmt_rate'] || -1 == $a['cmt_rate'])  ? '_N point' : '_N points', $a['cmt_rate']).'</div>
                <div class="cmt-buttons"><a title="'._t('_Thumb Up').'" href="javascript:void(0)" id="cmt-pos-'.$a['cmt_id'].'" class="cmt-pos"><i class="sys-icon thumbs-up'.$sIconClass.'"></i></a><a title="'._t('_Thumb Down').'" href="javascript:void(0)" id="cmt-neg-'.$a['cmt_id'].'" class="cmt-neg"><i class="sys-icon thumbs-down'.$sIconClass.'"></i></a></div>
                <div class="clear_both">&nbsp;</div>
            </div>';
    }

4. Upload the monochrome images to the same place as the colour ones.

That works for me.
Remember to back up your files before changing them in case it does not work for you.

zigstum, I look forward to applying your suggestions as soon as I get a break at work this evening. I'll be sure to let you know.

Thanks so much for your help!

And it works in 7.2.1 as well.

Thank you very much zigstum!

That's great, I'm glad it works for you :)
I received your PM and typed out a reply, but when I clicked the button it gobbled up my words and told me I am not allowed to speak to you because I am not good enough :D
(It would have been nice if I had been told before I typed out the reply!)
If you mail me a contact address at boonex_at_zigstum.com I will paste the reply I copied before I pressed the send button :)

 I apologize for that, sometimes the messaging can be quirky.

That information was sent - Thank you!

Dear all,

I just came across this forum post.

I am currently working on setting up my site (with 7.3.3) and am trying to customize it as much as possible, therefore I very much like the idea to replace the plus-minus, with maybe smiley icons or else.

My question:

does the code also work with Dolphin 7.3.3 ?

Many thanks for your feedback !