Botão de reputação

Detalhes da questão

Endereço do fórum: http://ismaels.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá!

Queria retirar aquele botão que esta com a bola em vermelho:


E queria trocar para um botão de like ou seja reputação ao tópico como aqui a FdF se possível e com o efeito hover atrás a verde.

Olá,

Primeiro, ative a reputação em seu fórum.
Depois, leia este tópico:
-> https://ajuda.forumeiros.com/t109606-personalizar-o-botao-reputacao

Se não satisfeito, veja este:
-> http://help.forumotion.com/t142870-improve-the-reputation-system-so-it-counts-votes#972462

o/

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.

Usei este:
- https://ajuda.forumeiros.com/t109606-personalizar-o-botao-reputacao

Mas não ficou lá muito bem e buga algumas partes do fórum também, exemplo a caixa de resposta rápida:
- http://ismaels.forumeiros.com/t4-ignore-testando

Na verdade o senhor usou o do fórum de suporte americano, não?
-> http://prntscr.com/gvued1

Esse código é dele.

---

Se você preferir testar o outro, remove o JavaScript de reputação, trocando-o por este:

Código:

/**
 *! Botão curtir para fóruns ModernBB
 *
 *  @author Luiz
 *  @version {beta} 1.0
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($, styles) {
  'use strict';
 
  /**
  * @name Recriar o painel de voto.
  * @desc Usado para recriar o painel dos votos no topo do post.
  * @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
  * @param {string} number - Corresponde ao número de votos daquela postagem.
  * @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
  * @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
  */
  var $createVote = function (href, number, vote, cond) {
    $('<div>', {
      'data-href': href,
      'html'    : [
        '<span class="fa-vote-counter">' + number + '</span>',
        $('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
      ].join('\n'),
      'class'    : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
    })
      .insertAfter(vote)
        .find('.fa-new-vote-action-trigger')
          .on('click', function () {
 
            var $this = $(this);
 
            if (!cond || $(this).is('.voted')) {
              alert('Você já votou!');
              return;
            }
 
            var $button = $(this).prev('span');
            var $parent = $(this).parent('div');
 
            $this.addClass('voted');
            $parent.addClass('voted');
            $button.text(parseInt($button.text()) + 1);
 
            $.get(href)
              .done(function () {
 
                console.info('O voto foi registrado.');
 
              })
              .fail(function () {
                alert('Houve um erro, tente novamente!');
                location.reload();
              })
            ;
          })
    ;
  };
 
  $(function () {
    $('.post').each(function () {
 
      var $this  = $(this);
      var $vote  = $this.find('.vote');
      var $like  = $this.find('.vote .ion-thumbsup');
      var $bar    = $this.find('.vote-bar');
      var $barNum = $this.find('.vote-bar .vote-bar-desc');
 
      $vote.hide();
 
      /**
      * Parte 01:
      * Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
      */
      if ($like.length && $bar.length) {
 
        var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href1  = $like.attr('href');
 
        $createVote(href1, number1, $vote, true);
 
        return;
 
      }
 
      /**
      * Parte 02:
      * Executar o código caso já existam votos, contando com o do usuário.
      */
      if ($bar.length) {
 
        var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href2  = $like.attr('href');
 
        $createVote(href2, number2, $vote, false);
 
        return;
 
      }
 
      /**
      * Parte 03:
      * Executar o código caso o usuário não tiver votado, e não existam votos.
      */
      if ($like.length) {
 
        var href3 = $like.attr('href');
 
        $createVote(href3, 0, $vote, true);
 
        return;
 
      }
 
    });
 
    $(['<style>', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery, [
  '.fa-new-vote-wrapper {',
  '  float: right;',
  '  display: inline-block;',
  '  position: relative;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-vote-counter {',
  '  position: absolute;',
  '  left: -22px;',
  '  background-color: #d4d4d4;',
  '  padding: 1px 15px 1px 7px;',
  '  border-radius: 5px 0 0 5px;',
  '  color: #555;',
  '  z-index: 1;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
  '  background-color: #8b5;',
  '  color: #fff;',
  '  display: inline-block;',
  '  padding: 6px 7.5px;',
  '  border-radius: 100px;',
  '  font-size: 14px;',
  '  cursor: pointer;',
  '  text-decoration: none;',
  '  position: absolute;',
  '  left: -5px;',
  '  top: -2px;',
  '  z-index: 13;',
  '  -webkit-transition: all 200ms linear;',
  '    -moz-transition: all 200ms linear;',
  '      -ms-transition: all 200ms linear;',
  '      -o-transition: all 200ms linear;',
  '          transition: all 200ms linear;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
  '  background-color: #444;',
  '}',
  '',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
  '  background-color: #8e8e8e;',
  '}'
].join('\n')));

o/

Erro meu :/ Agora queria apenas o icone do dedo do like em vez daquele mini computador.

Fiz este para meu fórum, se quiser é todo seu: http://prntscr.com/gvumic

JavaScript:

Código:

/**
 *! Botão curtir para fóruns ModernBB
 *
 *  @author Luiz
 *  @version {beta} 1.0
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($, styles) {
  'use strict';
 
  /**
  * @name Recriar o painel de voto.
  * @desc Usado para recriar o painel dos votos no topo do post.
  * @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
  * @param {string} number - Corresponde ao número de votos daquela postagem.
  * @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
  * @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
  */
  var $createVote = function (href, number, vote, cond) {
    $('<div>', {
      'data-href': href,
      'html'    : [
        '<span class="fa-vote-counter">' + number + '</span>',
        $('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
      ].join('\n'),
      'class'    : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
    })
      .insertAfter(vote)
        .find('.fa-new-vote-action-trigger')
          .on('click', function () {
 
            var $this = $(this);
 
            if (!cond || $(this).is('.voted')) {
              alert('Você já votou!');
              return;
            }
 
            var $button = $(this).prev('span');
            var $parent = $(this).parent('div');
 
            $this.addClass('voted');
            $parent.addClass('voted');
            $button.text(parseInt($button.text()) + 1);
 
            $.get(href)
              .done(function () {
 
                console.info('O voto foi registrado.');
 
              })
              .fail(function () {
                alert('Houve um erro, tente novamente!');
                location.reload();
              })
            ;
          })
    ;
  };
 
  $(function () {
    $('.post').each(function () {
 
      var $this  = $(this);
      var $vote  = $this.find('.vote');
      var $like  = $this.find('.vote .ion-thumbsup');
      var $bar    = $this.find('.vote-bar');
      var $barNum = $this.find('.vote-bar .vote-bar-desc');
 
      $vote.hide();
 
      /**
      * Parte 01:
      * Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
      */
      if ($like.length && $bar.length) {
 
        var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href1  = $like.attr('href');
 
        $createVote(href1, number1, $vote, true);
 
        return;
 
      }
 
      /**
      * Parte 02:
      * Executar o código caso já existam votos, contando com o do usuário.
      */
      if ($bar.length) {
 
        var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href2  = $like.attr('href');
 
        $createVote(href2, number2, $vote, false);
 
        return;
 
      }
 
      /**
      * Parte 03:
      * Executar o código caso o usuário não tiver votado, e não existam votos.
      */
      if ($like.length) {
 
        var href3 = $like.attr('href');
 
        $createVote(href3, 0, $vote, true);
 
        return;
 
      }
 
    });
 
    $(['<style>', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery, [
  '.fa-new-vote-wrapper {',
  '  float: left;',
  '  display: inline-block;',
  '  position: relative;',
  '  margin: -10px 30px auto;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-vote-counter {',
  '  position: absolute;',
  '  left: -4px;',
  '  top: 1px;',
  '  padding: 3px 10px 1px 10px;',
  '  border-radius: 0px 5px 5px 0px;',
  '  color: #fff;',
  '  z-index: 1;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
  '  color: #fff;',
  '  display: inline-block;',
  '  padding: 6px 7.5px;',
  '  font-size: 18px;',
  '  cursor: pointer;',
  '  text-decoration: none;',
  '  position: absolute;',
  '  left: -25px;',
  '  top: -5px;',
  '  z-index: 13;',
  '  -webkit-transition: all 200ms linear;',
  '    -moz-transition: all 200ms linear;',
  '      -ms-transition: all 200ms linear;',
  '      -o-transition: all 200ms linear;',
  '          transition: all 200ms linear;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 2px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '  background: #11a017;',
  '}',
  '',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 1px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '}'
].join('\n')));

OBS: Apenas editei CSS do código passado acima pelo Luiz

Sobre remover o computador podemos ver isso depois.

Troquei mas não aparece o botão.

Você tem adicionado os ícones fontawesome em seu fórum?

---
Edit
Adicione ao seu CSS:

Código:

.ion-thumbsup:before {
    content: "\f164";
    font: normal normal normal 14px/1 FontAwesome;
}

Após isso comente para fazer alterações no CSS.

Spoiler:

Não devo ter instalado, agora queria em vez do mini PC colocar o botão do like

Na gestão de imagem, oculte esse ícone : http://prntscr.com/gw84vq
Veja se retira o mini computador

Aparece na mesma.

Código:

.btn-ip {
    display: none;
}

o/

Resultou agora queria colocar o botão do like lá, aviso que o tema já foi colocado no fórum: http://suportedesign.forumeiros.com/t2173-desenvolvimento-de-forum-trabalho-remunerado

IsmaelS. escreveu:Resultou agora queria colocar o botão do like lá, aviso que o tema já foi colocado no fórum: http://suportedesign.forumeiros.com/t2173-desenvolvimento-de-forum-trabalho-remunerado

Basta fazer os mesmos processos passados aqui no tópico do mesmo jeito que fez no outro fórum

Mas eu já estou a utilizar os códigos que tinha passado.

Qual o problema então ?
Peço que o senhor libere que eu registre em tal forum para efetuar testes se necessários sobre isso.

Esta aberto a novas inscrições, o que falo é isto:

Certeza? http://prntscr.com/gwpn1p

Veja agora se dá.

Agora sim,
Substitua por este:

Código:

/**
 *! Botão curtir para fóruns ModernBB
 *
 *  @author Luiz
 *  @version {beta} 1.0
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($, styles) {
  'use strict';
 
  /**
  * @name Recriar o painel de voto.
  * @desc Usado para recriar o painel dos votos no topo do post.
  * @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
  * @param {string} number - Corresponde ao número de votos daquela postagem.
  * @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
  * @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
  */
  var $createVote = function (href, number, vote, cond) {
    $('<div>', {
      'data-href': href,
      'html'    : [
        '<span class="fa-vote-counter">' + number + '</span>',
        $('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
      ].join('\n'),
      'class'    : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
    })
      .insertAfter(vote)
        .find('.fa-new-vote-action-trigger')
          .on('click', function () {
 
            var $this = $(this);
 
            if (!cond || $(this).is('.voted')) {
              alert('Você já votou!');
              return;
            }
 
            var $button = $(this).prev('span');
            var $parent = $(this).parent('div');
 
            $this.addClass('voted');
            $parent.addClass('voted');
            $button.text(parseInt($button.text()) + 1);
 
            $.get(href)
              .done(function () {
 
                console.info('O voto foi registrado.');
 
              })
              .fail(function () {
                alert('Houve um erro, tente novamente!');
                location.reload();
              })
            ;
          })
    ;
  };
 
  $(function () {
    $('.post').each(function () {
 
      var $this  = $(this);
      var $vote  = $this.find('.vote');
      var $like  = $this.find('.vote .ion-thumbsup');
      var $bar    = $this.find('.vote-bar');
      var $barNum = $this.find('.vote-bar .vote-bar-desc');
 
      $vote.hide();
 
      /**
      * Parte 01:
      * Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
      */
      if ($like.length && $bar.length) {
 
        var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href1  = $like.attr('href');
 
        $createVote(href1, number1, $vote, true);
 
        return;
 
      }
 
      /**
      * Parte 02:
      * Executar o código caso já existam votos, contando com o do usuário.
      */
      if ($bar.length) {
 
        var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href2  = $like.attr('href');
 
        $createVote(href2, number2, $vote, false);
 
        return;
 
      }
 
      /**
      * Parte 03:
      * Executar o código caso o usuário não tiver votado, e não existam votos.
      */
      if ($like.length) {
 
        var href3 = $like.attr('href');
 
        $createVote(href3, 0, $vote, true);
 
        return;
 
      }
 
    });
 
    $(['<style>', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery, [
  '.fa-new-vote-wrapper {',
  '  float: rigth;',
  '  display: inline-block;',
  '  position: relative;',
  '  margin: -5px -50px auto;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-vote-counter {',
  '  position: absolute;',
  '  left: -4px;',
  '  top: 1px;',
  '  padding: 3px 10px 1px 10px;',
  '  border-radius: 0px 5px 5px 0px;',
  '  color: #fff;',
  '  z-index: 1;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
  '  color: #fff;',
  '  display: inline-block;',
  '  padding: 6px 7.5px;',
  '  font-size: 18px;',
  '  cursor: pointer;',
  '  text-decoration: none;',
  '  position: absolute;',
  '  left: -25px;',
  '  top: -5px;',
  '  z-index: 13;',
  '  -webkit-transition: all 200ms linear;',
  '    -moz-transition: all 200ms linear;',
  '      -ms-transition: all 200ms linear;',
  '      -o-transition: all 200ms linear;',
  '          transition: all 200ms linear;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 2px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '  background: #11a017;',
  '}',
  '',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 1px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '}'
].join('\n')));

Veja se fica de seu agrado.

Ficou fora do viewtopic :/

Erro de inglês hehhehe

Código:

/**
 *! Botão curtir para fóruns ModernBB
 *
 *  @author Luiz
 *  @version {beta} 1.0
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($, styles) {
  'use strict';
 
  /**
  * @name Recriar o painel de voto.
  * @desc Usado para recriar o painel dos votos no topo do post.
  * @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
  * @param {string} number - Corresponde ao número de votos daquela postagem.
  * @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
  * @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
  */
  var $createVote = function (href, number, vote, cond) {
    $('<div>', {
      'data-href': href,
      'html'    : [
        '<span class="fa-vote-counter">' + number + '</span>',
        $('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
      ].join('\n'),
      'class'    : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
    })
      .insertAfter(vote)
        .find('.fa-new-vote-action-trigger')
          .on('click', function () {
 
            var $this = $(this);
 
            if (!cond || $(this).is('.voted')) {
              alert('Você já votou!');
              return;
            }
 
            var $button = $(this).prev('span');
            var $parent = $(this).parent('div');
 
            $this.addClass('voted');
            $parent.addClass('voted');
            $button.text(parseInt($button.text()) + 1);
 
            $.get(href)
              .done(function () {
 
                console.info('O voto foi registrado.');
 
              })
              .fail(function () {
                alert('Houve um erro, tente novamente!');
                location.reload();
              })
            ;
          })
    ;
  };
 
  $(function () {
    $('.post').each(function () {
 
      var $this  = $(this);
      var $vote  = $this.find('.vote');
      var $like  = $this.find('.vote .ion-thumbsup');
      var $bar    = $this.find('.vote-bar');
      var $barNum = $this.find('.vote-bar .vote-bar-desc');
 
      $vote.hide();
 
      /**
      * Parte 01:
      * Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
      */
      if ($like.length && $bar.length) {
 
        var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href1  = $like.attr('href');
 
        $createVote(href1, number1, $vote, true);
 
        return;
 
      }
 
      /**
      * Parte 02:
      * Executar o código caso já existam votos, contando com o do usuário.
      */
      if ($bar.length) {
 
        var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href2  = $like.attr('href');
 
        $createVote(href2, number2, $vote, false);
 
        return;
 
      }
 
      /**
      * Parte 03:
      * Executar o código caso o usuário não tiver votado, e não existam votos.
      */
      if ($like.length) {
 
        var href3 = $like.attr('href');
 
        $createVote(href3, 0, $vote, true);
 
        return;
 
      }
 
    });
 
    $(['<style>', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery, [
  '.fa-new-vote-wrapper {',
  '  float: right;',
  '  display: inline-block;',
  '  position: relative;',
  '  margin: -5px -50px auto;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-vote-counter {',
  '  position: absolute;',
  '  left: -4px;',
  '  top: 1px;',
  '  padding: 3px 10px 1px 10px;',
  '  border-radius: 0px 5px 5px 0px;',
  '  color: #fff;',
  '  z-index: 1;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
  '  color: #fff;',
  '  display: inline-block;',
  '  padding: 6px 7.5px;',
  '  font-size: 18px;',
  '  cursor: pointer;',
  '  text-decoration: none;',
  '  position: absolute;',
  '  left: -25px;',
  '  top: -5px;',
  '  z-index: 13;',
  '  -webkit-transition: all 200ms linear;',
  '    -moz-transition: all 200ms linear;',
  '      -ms-transition: all 200ms linear;',
  '      -o-transition: all 200ms linear;',
  '          transition: all 200ms linear;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 2px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '  background: #11a017;',
  '}',
  '',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 1px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '}'
].join('\n')));

Ficou por cima dos outros, e queria retirar o "1 e 0" a frente do botão apenas deixar o like ou seja quando a pessoa desse o like o botão ficava em verde.

Neste caso, terá de inspecionar o elemento, e nesta parte ir editando assim: http://prntscr.com/gxbrl7
Pois pra mim está perfeito, veja: http://prntscr.com/gxbsdp

Sobre retirar os numeros:
Tente isso:

Código:

/**
 *! Botão curtir para fóruns ModernBB
 *
 *  @author Luiz
 *  @version {beta} 1.0
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($, styles) {
  'use strict';
 
  /**
  * @name Recriar o painel de voto.
  * @desc Usado para recriar o painel dos votos no topo do post.
  * @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
  * @param {string} number - Corresponde ao número de votos daquela postagem.
  * @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
  * @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
  */
  var $createVote = function (href, number, vote, cond) {
    $('<div>', {
      'data-href': href,
      'html'    : [
        $('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
      ].join('\n'),
      'class'    : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
    })
      .insertAfter(vote)
        .find('.fa-new-vote-action-trigger')
          .on('click', function () {
 
            var $this = $(this);
 
            if (!cond || $(this).is('.voted')) {
              alert('Você já votou!');
              return;
            }
 
            var $button = $(this).prev('span');
            var $parent = $(this).parent('div');
 
            $this.addClass('voted');
            $parent.addClass('voted');
            $button.text(parseInt($button.text()) + 1);
 
            $.get(href)
              .done(function () {
 
                console.info('O voto foi registrado.');
 
              })
              .fail(function () {
                alert('Houve um erro, tente novamente!');
                location.reload();
              })
            ;
          })
    ;
  };
 
  $(function () {
    $('.post').each(function () {
 
      var $this  = $(this);
      var $vote  = $this.find('.vote');
      var $like  = $this.find('.vote .ion-thumbsup');
      var $bar    = $this.find('.vote-bar');
      var $barNum = $this.find('.vote-bar .vote-bar-desc');
 
      $vote.hide();
 
      /**
      * Parte 01:
      * Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
      */
      if ($like.length && $bar.length) {
 
        var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href1  = $like.attr('href');
 
        $createVote(href1, number1, $vote, true);
 
        return;
 
      }
 
      /**
      * Parte 02:
      * Executar o código caso já existam votos, contando com o do usuário.
      */
      if ($bar.length) {
 
        var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href2  = $like.attr('href');
 
        $createVote(href2, number2, $vote, false);
 
        return;
 
      }
 
      /**
      * Parte 03:
      * Executar o código caso o usuário não tiver votado, e não existam votos.
      */
      if ($like.length) {
 
        var href3 = $like.attr('href');
 
        $createVote(href3, 0, $vote, true);
 
        return;
 
      }
 
    });
 
    $(['<style>', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery, [
  '.fa-new-vote-wrapper {',
  '  float: right;',
  '  display: inline-block;',
  '  position: relative;',
  '  margin: -5px -50px auto;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-vote-counter {',
  '  position: absolute;',
  '  left: -4px;',
  '  top: 1px;',
  '  padding: 3px 10px 1px 10px;',
  '  border-radius: 0px 5px 5px 0px;',
  '  color: #fff;',
  '  z-index: 1;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
  '  color: #fff;',
  '  display: inline-block;',
  '  padding: 6px 7.5px;',
  '  font-size: 18px;',
  '  cursor: pointer;',
  '  text-decoration: none;',
  '  position: absolute;',
  '  left: -25px;',
  '  top: -5px;',
  '  z-index: 13;',
  '  -webkit-transition: all 200ms linear;',
  '    -moz-transition: all 200ms linear;',
  '      -ms-transition: all 200ms linear;',
  '      -o-transition: all 200ms linear;',
  '          transition: all 200ms linear;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 2px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '  background: #11a017;',
  '}',
  '',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 1px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '}'
].join('\n')));