Need an HTML image element for a thumbs up button

I had to reinstall my reputation system, because my like button went missing. I reinstalled it according to this tutorial....
https://help.forumotion.com/t142870-improve-the-reputation-system-so-it-counts-votes

But I have a plus sign instead of a thumbs up. I know I have to change the image, and I tried putting in a new one, but it did not work.

This is the line in my javascript that I am talking about....

<img src="https://i.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>

The instructions say "If you want to display different images, simply replace the current image URLs in the src attributes with your own images. If you just want text, then delete everything except the quotes and write whatever you want, such as "like." However, i did that and nothing changed. I want a simple green thumbs up.

Thanks!

Hmmm. So, you changed image you wanted manually in section for images, and then you see that nothing happened , right? If you refer to this button: "Thanks" button" and your change of image where nothing happens, let me think for a second. Go to AP > Display > Teplates > General > viewtopic_body.
Check line 153. Or, search for "btn-thank". You will see a "i" just under and there you can call some class which you created to change the image itself. So name your class. Save template after this. Go to AP / display / colors / css
There you can create your own class and don' forget to make something like:

Code:

.thanksBtn {
background-image: url('');
background-repeat:no-repeat;
}

This is not the thanks system, it is for likes/dislikes.

Kimmy wrote:This is not the thanks system, it is for likes/dislikes.

When you use img tag in html, you use image itself and you can add attribute such as alt. It is used to change image in case image can not be used/showed. In that case, question is why your image does not work so that html use alt. As far as I can guess, try to use another upload image website. Maybe that could help.

Do so and tell me the results. If that does not work. Let's try some new stuff. =)

EDIT: Have you tried to set alt like

Code:

alt=""

That may be used if the image is used only for decoration. Well, your image is decoration. But javascript gives it life. Try that also.

Could you please provide your site URL here? And the link to topic that guest can see without registering.

Could you post the image's URL you want to use?

SLGray wrote:Could you post the image's URL you want to use?

He stated that in hist first post:

Code:

https://i.servimg.com/u/f18/18/21/41/30/plus10.png

System32 wrote:

SLGray wrote:Could you post the image's URL you want to use?

He stated that in hist first post:

Code:

https://i.servimg.com/u/f18/18/21/41/30/plus10.png

No, that is from the tutorial, the example they gave.

I am not fussy for my image.....I would use any of these:
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLPzXeU_7GUKKezrhB_DH9ws-Q_CF5ER58oEqVS95V8_t8i9yt
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQueeMAIQjKiVuJErDFFHHii-zX0_-HJd14U38dxTxW9yHMdsJ
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ73hhF5JAGPWCyL0k1JpuhrX_jAhIX2W1a9vaBSjbFOPfhEWVK
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVEd0iBIQ152WNYeN3BrADqNbPVq5XDwQQmVjMyXV7JSkZHiK-

Oh, no no no no. Make image better links so that they have nice ending such as png, jpg, jpeg.

Are you asking us to create an iamge?  If yes, this is not the correct place to request graphics.

@Kimmy , Use this links for image: https://image.ibb.co/nxcs5K/images.png . Test it.

Thanks for that link!!

Here is my javascript.....I am apparently doing something wrong.

Code:

$(function() {
          // General Configuration of the plugin
          var config = {
            position_left : false, // true for left || false for right
            negative_vote : false, // true for negative votes || false for positive only
            vote_bar : false, // display a small bar under the vote buttons
     
            // button config
            icon_plus : '<img src="https://image.ibb.co/nxcs5K/images.png
            icon_minus : '<img src="https://i.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',
     
            // language config
            title_plus : 'Like %{USERNAME}\'s post',
            title_minus : 'Dislike %{USERNAME}\'s post',
     
            title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post',
            title_like_plural : '%{VOTES} people like %{USERNAME}\'s post',
     
            title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post',
            title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post',
     
            title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}'
          },
       
       
          // function bound to the onclick handler of the vote buttons
          submit_vote = function() {
            var next = this.nextSibling, // the counter next to the vote button that was clicked
                box = this.parentNode,
                bar = box.getElementsByTagName('DIV'),
                vote = box.getElementsByTagName('A'),
                mode = /eval=plus/.test(this.href) ? 1 : 0,
                i = 0, j = vote.length, pos, neg, percent;
     
            // submit the vote asynchronously
            $.get(this.href, function() {
              next.innerHTML = +next.innerHTML + 1; // add to the vote count
              next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
       
              pos = +vote[0].nextSibling.innerHTML;
              neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
              percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
       
              if (bar[0]) {
                bar[0].style.display = '';
                bar[0].firstChild.style.width = percent;
                box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
              }
            });
     
            // revoke voting capabilities on the post once the vote is cast
            for (; i < j; i++) {
              vote[i].href = '#';
              vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');
              vote[i].onclick = function() { return false };
            }
     
            return false;
          },
       
          vote = $('.vote'), i = 0, j = vote.length,
          version = $('.bodylinewidth')[0] ? 0 :
                    document.getElementById('phpbb') ? 1 :
                    $('.pun')[0] ? 2 :
                    document.getElementById('ipbwrapper') ? 3 :
                    document.getElementById('modernbb') ? 4 :
                    'badapple', // version check
     
          // version data so we don't have to redefine these arrays during the loop
          vdata = {
            tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
            name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton', '.postprofile-name'][version],
            actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons', '.profile-icons'][version]
          },
     
          post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
     
          // prevent execution if the version cannot be determined
          if (version == 'badapple') {
            if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
            return;
          }
     
          for (; i < j; i++) {
            post = $(vote[i]).closest('.post')[0];
            bar = $('.vote-bar', vote[i])[0]; // vote bar
            button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
            pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
            ul = $(vdata.actions, post)[0]; // post actions
            li = document.createElement(vdata.tag); // vote system container
            li.className = 'fa_reputation';
     
            if (li.tagName == 'SPAN') li.style.display = 'inline-block';
     
            // calculate votes
            if (bar) {
              total = +bar.title.replace(/.*?\((\d+).*/, '$1');
              percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
       
              n_pos = Math.round(total * (percent / 100));
              n_neg = total - n_pos;
            } else {
              n_pos = 0;
              n_neg = 0;
            }
     
            // set up negative and positive titles with the correct grammar, votes, and usernames
            title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
            title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
     
            // define the vote counts
            li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');
            span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
     
            // create positive vote button
            plus = document.createElement('A');
            plus.href = button[0] ? button[0].href : '#';
            plus.onclick = button[0] ? submit_vote : function() { return false };
            plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
            plus.innerHTML = config.icon_plus;
            plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
     
            span[0] && li.insertBefore(plus, span[0]);
     
            // create negative vote button
            if (config.negative_vote) {
              minus = document.createElement('A');
              minus.href = button[1] ? button[1].href : '#';
              minus.onclick = button[1] ? submit_vote : function() { return false };
              minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
              minus.innerHTML = config.icon_minus;
              minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
       
              span[1] && li.insertBefore(minus, span[1]);
            }
     
            // create vote bar
            if (config.vote_bar) {
              vote_bar = document.createElement('DIV');
              vote_bar.className = 'fa_votebar';
              vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
              vote_bar.style.display = bar ? '' : 'none';
              li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
              li.appendChild(vote_bar);
            }
     
            // finally insert the vote system and remove the default one
            config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
            vote[i].parentNode.removeChild(vote[i]);
          }
        });

I have added the code tag to your last post as you did not do it.

Please make sure you always use the code tag any time you are posting codes to help us see the codes right and it don't become live in the topic.

Give this code a try and did you make sure you added the CSS files ??

Code:

$(function() {
                  // General Configuration of the plugin
                  var config = {
                    position_left : true, // true for left || false for right
                    negative_vote : false, // true for negative votes || false for positive only
                    vote_bar : false, // display a small bar under the vote buttons
             
                    // button config
                    icon_plus : '<img src="https://image.ibb.co/nxcs5K/images.png" alt="+"/>',
                    icon_minus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',
             
                    // language config
                    title_plus : 'Like %{USERNAME}\'s post',
                    title_minus : 'Dislike %{USERNAME}\'s post',
             
                    title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post',
                    title_like_plural : '%{VOTES} people like %{USERNAME}\'s post',
             
                    title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post',
                    title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post',
             
                    title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}'
                  },
               
               
                  // function bound to the onclick handler of the vote buttons
                  submit_vote = function() {
                    var next = this.nextSibling, // the counter next to the vote button that was clicked
                        box = this.parentNode,
                        bar = box.getElementsByTagName('DIV'),
                        vote = box.getElementsByTagName('A'),
                        mode = /eval=plus/.test(this.href) ? 1 : 0,
                        i = 0, j = vote.length, pos, neg, percent;
             
                    // submit the vote asynchronously
                    $.get(this.href, function() {
                      next.innerHTML = +next.innerHTML + 1; // add to the vote count
                      next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
               
                      pos = +vote[0].nextSibling.innerHTML;
                      neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
                      percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
               
                      if (bar[0]) {
                        bar[0].style.display = '';
                        bar[0].firstChild.style.width = percent;
                        box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
                      }
                    });
             
                    // revoke voting capabilities on the post once the vote is cast
                    for (; i < j; i++) {
                      vote[i].href = '#';
                      vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');
                      vote[i].onclick = function() { return false };
                    }
             
                    return false;
                  },
               
                  vote = $('.vote'), i = 0, j = vote.length,
                  version = $('.bodylinewidth')[0] ? 0 :
                            document.getElementById('phpbb') ? 1 :
                            $('.pun')[0] ? 2 :
                            document.getElementById('ipbwrapper') ? 3 :
                            document.getElementById('modernbb') ? 4 :
                            'badapple', // version check
             
                  // version data so we don't have to redefine these arrays during the loop
                  vdata = {
                    tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
                    name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton', '.postprofile-name'][version],
                    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons', '.profile-icons'][version]
                  },
             
                  post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
             
                  // prevent execution if the version cannot be determined
                  if (version == 'badapple') {
                    if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
                    return;
                  }
             
                  for (; i < j; i++) {
                    post = $(vote[i]).closest('.post')[0];
                    bar = $('.vote-bar', vote[i])[0]; // vote bar
                    button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
                    pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
                    ul = $(vdata.actions, post)[0]; // post actions
                    li = document.createElement(vdata.tag); // vote system container
                    li.className = 'fa_reputation';
             
                    if (li.tagName == 'SPAN') li.style.display = 'inline-block';
             
                    // calculate votes
                    if (bar) {
                      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
                      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
               
                      n_pos = Math.round(total * (percent / 100));
                      n_neg = total - n_pos;
                    } else {
                      n_pos = 0;
                      n_neg = 0;
                    }
             
                    // set up negative and positive titles with the correct grammar, votes, and usernames
                    title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
                    title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
             
                    // define the vote counts
                    li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');
                    span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
             
                    // create positive vote button
                    plus = document.createElement('A');
                    plus.href = button[0] ? button[0].href : '#';
                    plus.onclick = button[0] ? submit_vote : function() { return false };
                    plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
                    plus.innerHTML = config.icon_plus;
                    plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
             
                    span[0] && li.insertBefore(plus, span[0]);
             
                    // create negative vote button
                    if (config.negative_vote) {
                      minus = document.createElement('A');
                      minus.href = button[1] ? button[1].href : '#';
                      minus.onclick = button[1] ? submit_vote : function() { return false };
                      minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
                      minus.innerHTML = config.icon_minus;
                      minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
               
                      span[1] && li.insertBefore(minus, span[1]);
                    }
             
                    // create vote bar
                    if (config.vote_bar) {
                      vote_bar = document.createElement('DIV');
                      vote_bar.className = 'fa_votebar';
                      vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
                      vote_bar.style.display = bar ? '' : 'none';
                      li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
                      li.appendChild(vote_bar);
                    }
             
                    // finally insert the vote system and remove the default one
                    config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
                    vote[i].parentNode.removeChild(vote[i]);
                  }
                });

I really appreciate your assistance. It is still not working.

Perhaps my CSS is wrong?

Code:


        .fa_vote, .fa_voted, .fa_count {
                  font-size:12px;
          font-family:Verdana, Arial, Helvetica, Sans-serif;
          display:inline-block !important;
          width:auto !important;
          float:none !important;
          transition:300ms;
        }
     
        .fa_voted, .fa_vote:hover { opacity:0.4 }
        .fa_voted { cursor:default }
     
        .fa_count {
          font-weight:bold;
          margin:0 3px;
          cursor:default;
        }
     
        .fa_positive { color:#4A0 }
        .fa_negative { color:#A44 }
     
        .fa_votebar, .fa_votebar_inner {
          background:#C44;
          height:3px;
        }
     
        .fa_votebar_inner {
          background:#4A0;
          transition:300ms;
        }

Have you tried a different browser?

SLGray wrote:Have you tried a different browser?

yes, no difference.

yes, no difference.

Sorry for asking again, but did you use the link I gave you for the image HTML tag? You see that link I gave you has png in the end as it should, comparing to your's link. Have you tested that?

System32 wrote:

yes, no difference.

Sorry for asking again, but did you use the link I gave you for the image HTML tag? You see that link I gave you has png in the end as it should, comparing to your's link. Have you tested that?

I did....I was so excited, thinking that would work!!

Kimmy wrote:

System32 wrote:

yes, no difference.

Sorry for asking again, but did you use the link I gave you for the image HTML tag? You see that link I gave you has png in the end as it should, comparing to your's link. Have you tested that?

I did....I was so excited, thinking that would work!!

But it did not work? Maybe you want to make all those links above and give you proper image links. How about that?

System32 wrote:

Kimmy wrote:

System32 wrote:

yes, no difference.

Sorry for asking again, but did you use the link I gave you for the image HTML tag? You see that link I gave you has png in the end as it should, comparing to your's link. Have you tested that?

I did....I was so excited, thinking that would work!!

But it did not work? Maybe you want to make all those links above and give you proper image links. How about that?

I'm sorry....not sure what you mean?

Kimmy wrote:

System32 wrote:

SLGray wrote:Could you post the image's URL you want to use?

He stated that in hist first post:

Code:

https://i.servimg.com/u/f18/18/21/41/30/plus10.png

No, that is from the tutorial, the example they gave.

I am not fussy for my image.....I would use any of these:
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLPzXeU_7GUKKezrhB_DH9ws-Q_CF5ER58oEqVS95V8_t8i9yt
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQueeMAIQjKiVuJErDFFHHii-zX0_-HJd14U38dxTxW9yHMdsJ
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ73hhF5JAGPWCyL0k1JpuhrX_jAhIX2W1a9vaBSjbFOPfhEWVK
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVEd0iBIQ152WNYeN3BrADqNbPVq5XDwQQmVjMyXV7JSkZHiK-

Those links you wanted to use as images. I made one for you that has png extension. Do you want me to do with all of them so that you can try? And did the first image showed up? The one where I gave you link?

System32 wrote:

Kimmy wrote:

System32 wrote:

SLGray wrote:Could you post the image's URL you want to use?

He stated that in hist first post:

Code:

https://i.servimg.com/u/f18/18/21/41/30/plus10.png

No, that is from the tutorial, the example they gave.

I am not fussy for my image.....I would use any of these:
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLPzXeU_7GUKKezrhB_DH9ws-Q_CF5ER58oEqVS95V8_t8i9yt
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQueeMAIQjKiVuJErDFFHHii-zX0_-HJd14U38dxTxW9yHMdsJ
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ73hhF5JAGPWCyL0k1JpuhrX_jAhIX2W1a9vaBSjbFOPfhEWVK
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVEd0iBIQ152WNYeN3BrADqNbPVq5XDwQQmVjMyXV7JSkZHiK-

Those links you wanted to use as images. I made one for you that has png extension. Do you want me to do with all of them so that you can try? And did the first image showed up? The one where I gave you link?

I would love it to be the one you gave me. It didn't work though. That picture would be perfect.

Hello can you give me a test account with admin right's and I will take a look at your problem

The test account should be sent to me by PM ONLY with password and Username and the link to your forum where you want it put

 Useful topic:
 How To Make A Test Account

regards
APE.

APE wrote:Hello can you give me a test account with admin right's and I will take a look at your problem

The test account should be sent to me by PM ONLY with password and Username and the link to your forum where you want it put

 Useful topic:
 How To Make A Test Account

regards
APE.

Sent! Thanks!

Hello
I got it to work

It was a problem with the code and the change of forum version
here is the code i have added

Code:

$(function() {
                  // General Configuration of the plugin
                  var config = {
                    position_left : true, // true for left || false for right
                    negative_vote : false, // true for negative votes || false for positive only
                    vote_bar : false, // display a small bar under the vote buttons
       
                    // button config
                    icon_plus : '<img src="https://i.servimg.com/u/f87/17/55/52/38/like_310.png" alt="+"/>',
                    icon_minus : '<img src="https://i.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',
       
                    // language config
                    title_plus : 'Like %{USERNAME}\'s post',
                    title_minus : 'Dislike %{USERNAME}\'s post',
       
                    title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post',
                    title_like_plural : '%{VOTES} people like %{USERNAME}\'s post',
       
                    title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post',
                    title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post',
       
                    title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}'
                  },
         
         
                  // function bound to the onclick handler of the vote buttons
                  submit_vote = function() {
                    var next = this.nextSibling, // the counter next to the vote button that was clicked
                        box = this.parentNode,
                        bar = box.getElementsByTagName('DIV'),
                        vote = box.getElementsByTagName('A'),
                        mode = /eval=plus/.test(this.href) ? 1 : 0,
                        i = 0, j = vote.length, pos, neg, percent;
       
                    // submit the vote asynchronously
                    $.get(this.href, function() {
                      next.innerHTML = +next.innerHTML + 1; // add to the vote count
                      next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
         
                      pos = +vote[0].nextSibling.innerHTML;
                      neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
                      percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
         
                      if (bar[0]) {
                        bar[0].style.display = '';
                        bar[0].firstChild.style.width = percent;
                        box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
                      }
                    });
       
                    // revoke voting capabilities on the post once the vote is cast
                    for (; i < j; i++) {
                      vote[i].href = '#';
                      vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');
                      vote[i].onclick = function() { return false };
                    }
       
                    return false;
                  },
         
                  vote = $('.vote'), i = 0, j = vote.length,
                  version = $('.bodylinewidth')[0] ? 0 :
                            document.getElementById('phpbb') ? 1 :
                            $('.pun')[0] ? 2 :
                            document.getElementById('ipbwrapper') ? 3 :
                            document.getElementById('modernbb') ? 4 :
                            'badapple', // version check
       
                  // version data so we don't have to redefine these arrays during the loop
                  vdata = {
                    tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
                    name : ['.name', '.postprofile .miniprofile_cont .avatar_cont > strong', '.username', '.popmenubutton', '.postprofile-name'][version],
                    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons', '.profile-icons'][version]
                  },
       
                  post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
       
                  // prevent execution if the version cannot be determined
                  if (version == 'badapple') {
                    if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
                    return;
                  }
       
                  for (; i < j; i++) {
                    post = $(vote[i]).closest('.post')[0];
                    bar = $('.vote-bar', vote[i])[0]; // vote bar
                    button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
                    pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
                    ul = $(vdata.actions, post)[0]; // post actions
                    li = document.createElement(vdata.tag); // vote system container
                    li.className = 'fa_reputation';
       
                    if (li.tagName == 'SPAN') li.style.display = 'inline-block';
       
                    // calculate votes
                    if (bar) {
                      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
                      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
         
                      n_pos = Math.round(total * (percent / 100));
                      n_neg = total - n_pos;
                    } else {
                      n_pos = 0;
                      n_neg = 0;
                    }
       
                    // set up negative and positive titles with the correct grammar, votes, and usernames
                    title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
                    title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
       
                    // define the vote counts
                    li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');
                    span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
       
                    // create positive vote button
                    plus = document.createElement('A');
                    plus.href = button[0] ? button[0].href : '#';
                    plus.onclick = button[0] ? submit_vote : function() { return false };
                    plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
                    plus.innerHTML = config.icon_plus;
                    plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
       
                    span[0] && li.insertBefore(plus, span[0]);
       
                    // create negative vote button
                    if (config.negative_vote) {
                      minus = document.createElement('A');
                      minus.href = button[1] ? button[1].href : '#';
                      minus.onclick = button[1] ? submit_vote : function() { return false };
                      minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
                      minus.innerHTML = config.icon_minus;
                      minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
         
                      span[1] && li.insertBefore(minus, span[1]);
                    }
       
                    // create vote bar
                    if (config.vote_bar) {
                      vote_bar = document.createElement('DIV');
                      vote_bar.className = 'fa_votebar';
                      vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
                      vote_bar.style.display = bar ? '' : 'none';
                      li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
                      li.appendChild(vote_bar);
                    }
       
                    // finally insert the vote system and remove the default one
                    config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
                    vote[i].parentNode.removeChild(vote[i]);
                  }
                });

I had to change the like button that @System32 made as it was 5 times to big for your buttons so I made you one using the buttons you have already and then took the text and thumbs up off of the big button and this is what I come up with for you >> as you can see on your topic's it fits in well

APE wrote:Hello
I got it to work

It was a problem with the code and the change of forum version
here is the code i have added

Code:

$(function() {
                  // General Configuration of the plugin
                  var config = {
                    position_left : true, // true for left || false for right
                    negative_vote : false, // true for negative votes || false for positive only
                    vote_bar : false, // display a small bar under the vote buttons
       
                    // button config
                    icon_plus : '<img src="https://i.servimg.com/u/f87/17/55/52/38/like_310.png" alt="+"/>',
                    icon_minus : '<img src="https://i.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',
       
                    // language config
                    title_plus : 'Like %{USERNAME}\'s post',
                    title_minus : 'Dislike %{USERNAME}\'s post',
       
                    title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post',
                    title_like_plural : '%{VOTES} people like %{USERNAME}\'s post',
       
                    title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post',
                    title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post',
       
                    title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}'
                  },
         
         
                  // function bound to the onclick handler of the vote buttons
                  submit_vote = function() {
                    var next = this.nextSibling, // the counter next to the vote button that was clicked
                        box = this.parentNode,
                        bar = box.getElementsByTagName('DIV'),
                        vote = box.getElementsByTagName('A'),
                        mode = /eval=plus/.test(this.href) ? 1 : 0,
                        i = 0, j = vote.length, pos, neg, percent;
       
                    // submit the vote asynchronously
                    $.get(this.href, function() {
                      next.innerHTML = +next.innerHTML + 1; // add to the vote count
                      next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
         
                      pos = +vote[0].nextSibling.innerHTML;
                      neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
                      percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
         
                      if (bar[0]) {
                        bar[0].style.display = '';
                        bar[0].firstChild.style.width = percent;
                        box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
                      }
                    });
       
                    // revoke voting capabilities on the post once the vote is cast
                    for (; i < j; i++) {
                      vote[i].href = '#';
                      vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');
                      vote[i].onclick = function() { return false };
                    }
       
                    return false;
                  },
         
                  vote = $('.vote'), i = 0, j = vote.length,
                  version = $('.bodylinewidth')[0] ? 0 :
                            document.getElementById('phpbb') ? 1 :
                            $('.pun')[0] ? 2 :
                            document.getElementById('ipbwrapper') ? 3 :
                            document.getElementById('modernbb') ? 4 :
                            'badapple', // version check
       
                  // version data so we don't have to redefine these arrays during the loop
                  vdata = {
                    tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
                    name : ['.name', '.postprofile .miniprofile_cont .avatar_cont > strong', '.username', '.popmenubutton', '.postprofile-name'][version],
                    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons', '.profile-icons'][version]
                  },
       
                  post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
       
                  // prevent execution if the version cannot be determined
                  if (version == 'badapple') {
                    if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
                    return;
                  }
       
                  for (; i < j; i++) {
                    post = $(vote[i]).closest('.post')[0];
                    bar = $('.vote-bar', vote[i])[0]; // vote bar
                    button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
                    pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
                    ul = $(vdata.actions, post)[0]; // post actions
                    li = document.createElement(vdata.tag); // vote system container
                    li.className = 'fa_reputation';
       
                    if (li.tagName == 'SPAN') li.style.display = 'inline-block';
       
                    // calculate votes
                    if (bar) {
                      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
                      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
         
                      n_pos = Math.round(total * (percent / 100));
                      n_neg = total - n_pos;
                    } else {
                      n_pos = 0;
                      n_neg = 0;
                    }
       
                    // set up negative and positive titles with the correct grammar, votes, and usernames
                    title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
                    title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
       
                    // define the vote counts
                    li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');
                    span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
       
                    // create positive vote button
                    plus = document.createElement('A');
                    plus.href = button[0] ? button[0].href : '#';
                    plus.onclick = button[0] ? submit_vote : function() { return false };
                    plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
                    plus.innerHTML = config.icon_plus;
                    plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
       
                    span[0] && li.insertBefore(plus, span[0]);
       
                    // create negative vote button
                    if (config.negative_vote) {
                      minus = document.createElement('A');
                      minus.href = button[1] ? button[1].href : '#';
                      minus.onclick = button[1] ? submit_vote : function() { return false };
                      minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
                      minus.innerHTML = config.icon_minus;
                      minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
         
                      span[1] && li.insertBefore(minus, span[1]);
                    }
       
                    // create vote bar
                    if (config.vote_bar) {
                      vote_bar = document.createElement('DIV');
                      vote_bar.className = 'fa_votebar';
                      vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
                      vote_bar.style.display = bar ? '' : 'none';
                      li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
                      li.appendChild(vote_bar);
                    }
       
                    // finally insert the vote system and remove the default one
                    config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
                    vote[i].parentNode.removeChild(vote[i]);
                  }
                });

I had to change the like button that @System32 made as it was 5 times to big for your buttons so I made you one using the buttons you have already and then took the text and thumbs up off of the big button and this is what I come up with for you >> as you can see on your topic's it fits in well

THANK YOU so much!! It looks great!! I really appreciate your help!

Is this solved?