Posição dos botões de curtir

Detalhes da questão

Descrição

Ketholy escreveu:Olá novamente paulim78,

Não vejo nada de estranho na posição dos votos em seu tópico, aliais esta na posição correta referente a versão usada.

Mais como solicitado pelo senhor vamos ver o que podemos fazer.

Por gentileza poderia nos repassar seu viewtopic_body.

Até mais!

Spoiler:

Spoiler:

paulim78 escreveu:Adicionar tudo isso no CSS?.

Código:

.vote {margin-top:45px!important;}

Código:

.ion-thumbsup:before {content: "+"!important;}
        .ion-thumbsdown:before {content: "-"!important;margin-left:10px;}

Código:

.vote .ion-thumbsup {background-image: url(https://i.imgur.com/BUJNUQU.png)!important;width:28px!important;height:28px!important;}
        .vote .ion-thumbsdown {background-image: url(https://i.imgur.com/loZ5OUG.png)!important;width:28px!important;height:28px!important;}

Código:

.vote .ion-thumbsup,
.vote .ion-thumbsdown {
  font-size: 0 !important;
}

Kyo Panda escreveu:Adicione ao CSS:

Código:

.vote .ion-thumbsup,
.vote .ion-thumbsdown {
  font-size: 0 !important;
}

paulim78 escreveu:Não, entenderam tudo errado tudo errado mesmo, fecharam meu topico completamente atoa, não leram direito entendeu de outro jeito.

Gaaratsu escreveu:Olá querido!

Queira checar os seguintes tutoriais:
https://ajuda.forumeiros.com/t56722-tutorial-alterar-os-sinais-de-reputacao
https://ajuda.forumeiros.com/t47960-tutorial-reputacao-personalizada

Att!

Spoiler:

paulim78 escreveu:O codigo que eu estou utilizando e esse.

Spoiler:

Poderia criar alguma postagem no seu fórum que seja visível a membros para que seja possível ver como está o CSS do botão curtir?

paulim78 escreveu:mais meu fórum tem vários tópicos que eu criei para testar. 

https://i.imgur.com/bAdfLTZ.png

olha ai o tanto de reputação do Usuário como que tah. e eu troquei as img dos botão porem nao resulto nada no fórum.

Ketholy escreveu:

paulim78 escreveu:mais meu fórum tem vários tópicos que eu criei para testar. 

https://i.imgur.com/bAdfLTZ.png

olha ai o tanto de reputação do Usuário como que tah. e eu troquei as img dos botão porem nao resulto nada no fórum.

Não consigo visualizar nenhum tópico, o senhor poderia liberar a visualização de alguma ária para membros.

Até mais!

paulim78 escreveu:mais meu fórum tem vários tópicos que eu criei para testar. 

https://i.imgur.com/bAdfLTZ.png

olha ai o tanto de reputação do Usuário como que tah. e eu troquei as img dos botão porem nao resulto nada no fórum.

paulim78 escreveu:Esse seria Voto positivo
https://i.imgur.com/ndTP7Ev.png

Esse seria voto negativo
https://i.imgur.com/kWA7hMw.png

Não sei se vai ter como fazer nesse mesmo script. Mais quando da o Voto positivo aparecer essa IMG
https://i.imgur.com/bqw96Uh.png

E quando der Voto Negativo aparecer essa IMG
https://i.imgur.com/fy0bLbB.png

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

paulim78 escreveu:Amigo resultou pfto, so que quando cria um topico ou envia a msg ja vem com 1 voto la kkkk. creio eu que isso e modificado no CSS ne igual vc falo kkkkk... Mais funciono pfto esse script

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 number3 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$0');
        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')));

paulim78 escreveu:Bom Teria como só, na hora que der o voto o Like fica verde?. pois dps do link ele fica cinza...

Código:

.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger, .fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {
    background-color: #FFEB3B;
}

paulim78 escreveu:adicionei, porem não resultou kkk

paulim78 escreveu:Ai manim, uma prova que dei o voto.

https://i.imgur.com/HpBXspy.png

Spoiler:

Código:

.topic-actions-buttons{
display: none;
}

.fa_login_row {
margin: 0px 0;
}

.fa_login_button {
color: #69C;
background: none;
border: 0px solid #69C;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
display: block;
height: 30px;
line-height: 3px;
width: 240px;
margin: 3px auto;
transition: 250ms;
outline: none;
cursor: pointer;
}

element.style {
height: 360px;
}

.button, .button1, .button2, input[type="submit"] {
background-color: #3793ff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
color: #fff;
display: inline-block;
font-family: Roboto, sans-serif;
font-size: 1.2rem;
font-weight: 500;
overflow: hidden;
padding: 1px 20px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: auto!important;
}
a.mainmenu[href="/faq"]{
display: none !important;
}
a.mainmenu[href="/calendar"]{
display: none !important;
}
a.mainmenu[href="/groups"]{
display: none !important;
}
.postprofile-rank{
  padding: 3px;
  border: 1px solid #aaa;
}
.postprofile-info{
padding-right: 11px !important;
}
.postprofile-rank{
  padding: 3px;
  border: 1px solid #aaa;
}
.postprofile .field{
    margin-right: 0px !important;
}
.post-head{
  background: #3793FF;
}
.post-head .topic-title {
    color: #444;
    display: inline-block;
    font-family: Arial Black;
    font-size: 2.2rem;
    font-weight: 650;
    margin: -3px 0 3px;
    padding: 0;
    text-transform: none;
}
.vote {margin-top:45px!important;}
.vote {
padding: 4px 1px 4px 1px;
text-align: center;
width:20px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}

.vote .vote-no-bar {
display: none;
}

.vote .vote-bar {
border-left: 0px;
border-right: 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d4d6d5;
font-size: 0px;
height: 50px;
margin: 0px;
width: 20px;
padding: 3px 0px 3px 0px;
}

.vote .vote-bar-plus {
margin-left: 7px;
width: 6px;
}

.vote .vote-bar-minus {
margin-left: 7px;
width: 6px;
}

.vote .vote-button a[href*="plus"] {
background:url('https://i.imgur.com/ciztWMl.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

.vote .vote-button a[href*="minus"] {
background-image:url('https://i.imgur.com/bAto3Nn.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger, .fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {
    background-color: #FFEB3B;
}


Código:

.fa-new-vote-wrapper .fa-vote-counter, .fa-vote-counter:hover {
background-color: #00ff00 !important;
}
.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger, .fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {
background-color: #00ff00 !important;
}