Posição dos botões de curtir

+2
Ketholy
paulim78
6 participantes

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

Tópico resolvido Posição dos botões de curtir

Mensagem por paulim78 24.11.17 21:13

Detalhes da questão


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

Descrição


tava vendo que fico meio estanho a posição do Link do meu forum.

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

tira aonde ta vermelho e coloca +/- por ali aonde ta preto. Obrigado


Última edição por paulim78 em 13.12.17 1:28, editado 1 vez(es)
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 24.11.17 21:34

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!
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 24.11.17 21:36

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!

Manim e que tipo como eu adicionei a azul na barra, ai os botão de Votos fico meio estranho com as cores.

Spoiler:
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 24.11.17 21:56

Vamos primeiramente tenta pela folha de estilo CSS.

Adicione em sua folha de estilo CSS seguinte código:

Spoiler:

Altere onde está escrito URL_DA_IMAGEM pelo link valido de uma imagem que gostaria que representasse os votos tanto negativo quanto positivo. Após isso informe a mudança para podemos proceder.

Até mais!


Última edição por Ketholy em 06.12.17 20:24, editado 1 vez(es)
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 24.11.17 22:07

Adicionar tudo isso no CSS?.
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 24.11.17 22:13

paulim78 escreveu:Adicionar tudo isso no CSS?.

Exatamente, esse código ira personalizar os votos, como citei anteriormente basta escolher uma imagem que lhe agrade com a cor do titulo do fórum e adicione ao código onde tem URL da imagem. Caso lhe agrade não precisaremos modificar nada no template.
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 24.11.17 22:59

Manim adicionei o codigo inteiro mesmo no css não resultou

https://i.imgur.com/kZ6SyQp.png
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por while 24.11.17 23:49

Olá autor, boa noite.

Remova tudo o que foi passado e adicione somente esse código na folha de estilo css:

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

Para deixar o ("+") e o ("-"), ou seja o "mais" e o "menos", basta adicionar esse código em sua folha de estilo css:

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

Simples, não?

Até.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 25.11.17 0:58

o manim simples kkkk, em veis de + e - teria como coloca uma img do meu gosto?
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por while 25.11.17 19:55

Sim, tem como sim bro.

Adicione esse código em sua folha de estilo css:

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;}

Isso é só um exemplo, caso queira outra imagem altere as url.

Até.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 25.11.17 23:53

manim fico otimo, porem quando adiciona essa imagem no fundo da imagem ainda fica aquele + e -

https://i.imgur.com/DQa7GLF.png
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 27.11.17 14:55

UP?.
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Kyo Panda 28.11.17 11:11

Adicione ao CSS:

Código:
.vote .ion-thumbsup,
.vote .ion-thumbsdown {
  font-size: 0 !important;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 29.11.17 2:39

Kyo Panda escreveu:Adicione ao CSS:

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

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

Na REP+ eu queria coloca essa imagem em vez do +
https://i.imgur.com/b7NFdlw.png

No rep - essa imagem em vez do -
https://i.imgur.com/0yIii1y.png

Ai quando da a reputação aparece uma barra de quantos votos eu queria troca ela pra coloca as carinhas entendeu.
https://i.imgur.com/SreOv8r.png

Tipo aonde ta em preto eu queria coloca o que ta em azul. tipo tira o preto e deixa so o azul. porem so com a imagem que foi acionada tipo se foi dado rep+ deixa a carinha verde. Entendeu agora?.......
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Konai 29.11.17 5:57

Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Kyo Panda 29.11.17 10:36

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

https://m.popkey.co/39f7dd/bX9eV.gif

---

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?
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 01.12.17 1:54

Manim fiz o 1 que e mais do meu gosto porem não deu. Não mudo a img e bugo kkkk.

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

bugo o tanto de reputação, e os icones não aparece do formato que eu adicionei kkkkkk
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Konai 02.12.17 21:08

Peço que me passe o código utilizado, pois em relação ao posicionamento e as imagens podemos concertar.
Leve em consideração o que o nosso querido ex-moderadeiro Kyo Panda disse, para que possamos ver direto do seu fórum pelo console.
Em relação aos códigos do @while , pareciam estar exatamente da forma que o senhor queria, depois o senhor disse que estavam todos errados... não entendi bem! Louco Tonto

Att! Feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 06.12.17 19:37

O codigo que eu estou utilizando e esse.

Spoiler:
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 06.12.17 20:27

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?

O senhor poderia fazer o que Kyo citou na mensagem anteriormente. Só assim saberemos o que esta ocorrendo de errado e daremos uma resolução para o problema.

Estarei aguardando.

Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 07.12.17 1:18

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

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 08.12.17 21:44

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!
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 09.12.17 1:54

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!
pronto, criei um tipico la de uma olhada...
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por tikky 09.12.17 7:32

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.

Vá em Módulos > Pontos e reputação > Reputação

Veja se o sistema de reputação está ativo: "Ativar o sistema de reputação".
E pode gerir os pontos ganhos na "Gestão de pontos".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 09.12.17 12:31

Bom dia paulim78,

Por gentileza retire todos os códigos repassados nesse tópico, em seguida pode nos passar a link valido das imagens que deseja que represente tanto voto positivo quanto negativo.

Até mais!
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 11.12.17 14:35

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
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 11.12.17 14:54

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

Certo! Vamos por passo, crie um novo JS com investimento em todas as páginas:

Código:
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 resto iremos personalizar pelo CSS ou HTML. Mais primeiro tenho que ver e o código é funcional em seu fórum.
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 12.12.17 0:08

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
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 12.12.17 0:24

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

O código que lhe repassei ele funciona da seguinte maneira: Ao ser criado um novo tópico automaticamente já é apresentado 1 voto, como se fosse seu voto ativo.

Nesse caso, teremos que editar o código, não será possível concertar pela CSS. Troque o código por esse:
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')));

Vamos ver se resulta.
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 12.12.17 11:50

Opa agora fico ótimo em...
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 12.12.17 15:46

Creio que o sistema que lhe repassei não vai querer alterações, pois ele se trata de um sistema único. Na minha percepção não muda mais nada. O senhor ainda tem mais alguma duvida referente a essa questão, ou posso dá como resolvido?
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 12.12.17 17:11

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

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 12.12.17 17:19

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

Simples de resolver isso, adicionar em sua folha de estilo CSS o seguinte código:
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;
}

Basta trocar #FFEB3B pela cor que deseja que o mesmo fique após a voto.

Até mais!
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 12.12.17 17:23

adicionei, porem não resultou kkk
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 12.12.17 17:25

paulim78 escreveu:adicionei, porem não resultou kkk

Ué eu testei em seu fórum e funcionou normalmente, lembre-se que você só verá o efeito caso você já tenha efetuado algum voto.
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 12.12.17 17:27

Ai manim, uma prova que dei o voto.

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

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 12.12.17 17:33

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

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

Poderia nos repassar sua folha de estilo!
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 12.12.17 17:35

Opaaa. 

Aqui esta.
Spoiler:
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 12.12.17 17:44

Troque por essa:

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;
}
Ketholy

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 12.12.17 17:47

Fico mesmo jeito kkkk

https://i.imgur.com/B92gT55.png
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Konai 12.12.17 21:37

Olá!

Substitua o código fornecido anteriormente, por este outro:
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;
}

Att! Feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por paulim78 13.12.17 1:24

Opa resolvido. Dps de muitas lutas e glorias kkk. obg a todos e desculpa algo...
paulim78

paulim78
****

Membro desde : 03/06/2012
Mensagens : 248
Pontos : 366

http://tudoexp.forum-livre.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Posição dos botões de curtir

Mensagem por Ketholy 13.12.17 1:36

Disponha! Piscada

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

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos