Botão de reputação

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Botão de reputação

Mensagem por IsmaelS. em 10/10/17, 08:04 pm

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.


Última edição por IsmaelS. em 15/10/17, 03:22 pm, editado 1 vez(es)

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por Luiz em 10/10/17, 08:07 pm

Olá,

Primeiro, ative a reputação em seu fórum.
Depois, leia este tópico:
-> http://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'.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 10/10/17, 08:12 pm

Usei este:
- http://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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por Luiz em 10/10/17, 08:15 pm

Na verdade o senhor usou o do fórum de suporte americano, não? Pensativo
-> 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/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 10/10/17, 08:24 pm

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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 10/10/17, 08:43 pm

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 Feliz

Sobre remover o computador podemos ver isso depois.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 11/10/17, 09:03 am

Troquei mas não aparece o botão.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 11/10/17, 10:07 am

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:
Observação: Não sei porque mas era para aparecer normalmente.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 11/10/17, 03:19 pm

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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 11/10/17, 05:02 pm

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

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 11/10/17, 05:10 pm

Aparece na mesma.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 11/10/17, 05:13 pm

Código:
.btn-ip {
    display: none;
}
o/
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 12/10/17, 06:59 pm

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.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 12/10/17, 07:09 pm

@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 Feliz
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 12/10/17, 07:18 pm

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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 12/10/17, 07:19 pm

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.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 12/10/17, 07:25 pm

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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 12/10/17, 07:28 pm

avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 12/10/17, 08:06 pm

Veja agora se dá.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 12/10/17, 08:14 pm

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.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 12/10/17, 08:16 pm

Ficou fora do viewtopic :/

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 12/10/17, 08:20 pm

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')));
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por IsmaelS. em 14/10/17, 08:15 am

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.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botão de reputação

Mensagem por iScroll em 14/10/17, 10:29 am

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')));
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Botão de reputação

Mensagem por Luiz em 16/10/17, 01:43 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum