Alinhamento do Botão Curtir

Detalhes da questão

Endereço do fórum: http://www.wowdevbrasil.tk/
Versão do fórum: PunBB

Descrição

E ae galera, beleza? Estou com um problema e preciso de ajuda! Eu gostaria de fixar o meu botão de curtir de acordo com a imagem:



Link do script que estou usando: https://ajuda.forumeiros.com/t100407-tutorial-sistema-de-curtir-nas-mensagens

Boa noite.

Troque o código JavaScript por este:

Código:

/***
* Código: IPB Like System
* Data de criação: 18/07/2014
* Atualização: 31/03/2015
* Autor: Daemon
* Versão: 1.2
* Inspirado: IPB
* Acesse: http://bestskins.net & http://ajuda.forumeiros.com
* Não distribuir, ou remover os créditos do autor.
***/
function bestskins_ls() {
  // Imagem de reputação
  var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var qtd = 0,
                    barra = $('.vote-bar', vote)[0],
                    botao = $('.vote-button', vote)[0];                     
                if (barra) {
                    var numbarra = barra.title.match(/\d+/g);
                        qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                }
           
 
                botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                var htmlFinal =
                '<div class="rep_bar clearfix" id="rep_post">' +
                '      <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                '</div>';
  $('.pun .postfoot .user-contact', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
  }
  x.remove();
};
function bestskinsVoto(b,a) {
  a.onclick = '#';
    $.get(b, function() {
    a.parentNode.style.display = 'none';
    var verify = a.parentNode.nextSibling.firstChild.innerHTML;
    if(verify == 0) {
        a.parentNode.nextSibling.firstChild.classList.remove('zero'),
        a.parentNode.nextSibling.firstChild.classList.add('positive');
    }
    var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
    c.innerHTML = c.innerHTML.replace(/\d+/,b);
    });
};
if (document.readyState ===  'complete') {
        bestskins_ls();
} else {
      document.addEventListener('DOMContentLoaded', function() {
        bestskins_ls();
      });
}

Até mais.
Fraise

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

Fraise, eu efetuei a troca do Código, porém o botão de curtir sumiu!

up?

Boa tarde @savenx!

Por gentileza, poderia deletar o script do @Fraise e manter o do tutorial?  Após isso, crie uma conta de testes  e me forneça, ok?

Até mais.
MateusAnjosV.

Ja retornei com o Script original.. como assim, conta de teste?

Olá amigo, tente esse JS em investimento nos topicos:

Código:

function bestskins_ls(){var bestskins={singular:'Curtiu isso!',plural:'Curtiram isso!'};for(var x=$('.vote'),i=0,vote;(vote=x[i++]);){var qtd=0,barra=$('.vote-bar',vote)[0],botao=$('.vote-button',vote)[0];if(barra){var numbarra=barra.title.match(/\d+/g);qtd=Math.round(parseInt(numbarra[1])*parseInt(numbarra[0]))/100}var numrep=qtd+' '+(qtd==1?bestskins.singular:bestskins.plural);botao=botao?'<span onclick="bestskinsVoto(\''+botao.firstChild.href+'\',this);" class="BS_like">'+numrep+'</span>':'<span class="BS_like BS_done">'+numrep+'</span>';$('.postfoot',vote.parentNode.parentNode.parentNode.parentNode).before(botao)}x.remove()};function bestskinsVoto(b,a){var d=a.innerHTML;a.innerHTML='Carregando...';a.onclick='#';$.get(b,function(){a.className+=' BS_done';a.innerHTML=d;var c=a,b=parseInt(/\d+/.exec(c.innerHTML)[0])+1;c.innerHTML=c.innerHTML.replace(/\d+/,b)})};document.addEventListener('DOMContentLoaded',bestskins_ls,false);

Ficou assim @Tiupkit

http://prntscr.com/9bg7bl

Olá!

Uma conta para testes é uma conta comum – sem nenhuma moderação – apenas para que eu logue e efetue os testes.

seguinte altere o js pra este porém sem investimento:

Código:

function lglike(b,a){var d=a.innerHTML;a.innerHTML="Loading...";a.onclick="#";$.get(b,function(){a.className+=" LGnovote";a.innerHTML=d;var c=a.nextSibling,b=parseInt(/\d+/.exec(c.innerHTML)[0])+1;c.innerHTML=c.innerHTML.replace(/\d+/,b)})};

function init_lg_like_system() {
    var x = $('.vote');
    for (var i = 0, l = x.length; i < l; i++) {
        var vote = x[i],
            count = 0,
            plus = 0;
        var bar = $('.vote-bar', vote)[0];
        var button = $('.vote-button', vote)[0];
        if (bar) {
            var info = bar.title.match(/\d+/g);
            count = info[0];
            var percent = info[1];
            plus = Math.round(parseInt(percent) * parseInt(count)) / 100;
        }
        button = button ? '<span onclick="lglike(\'' + button.firstChild.href + '\',this);" class="LGlike">' + vote_singular + '</span>' : '<span class="LGlike LGnovote">' + vote_singular + '</span>';

        var votes_text = '<span class="LGlikecount">' + plus + ' ' + (plus == 1 ? vote_singular : vote_plural) + '</span>';

        if (like_version === 'phpbb3' || like_version === 'PHPBB3') {
            $('.corners-bottom', vote.parentNode.parentNode)
        .before('<div class="LGvote" style="margin:3px">' + button + votes_text + '</div>');
        } else if (like_version === 'invision' || like_version === 'Invision' || like_version === 'INVISION') {
            $(vote.parentNode.parentNode.parentNode.nextSibling.lastChild)
        .prepend('<li><div class="LGvote">' + button + votes_text + '</div></li>');
        } else if (like_version === 'punbb' || like_version === 'PUNBB') {
            $('.post-entry', vote.parentNode.parentNode.parentNode.parentNode)
        .before('<div class="LGvote" style="float:right;">' + button + votes_text + '</div>');
        }
          else if (like_version === 'PHPBB2' || like_version === 'phpbb2') {
            $('td.post tr:last')
        .append('</br></br><div class="LGvote" style="margin:3px">' + button + votes_text + '</div>');
        }
    }
    x.remove();
};

if (DOM_IS_READY == true) {
    init_lg_like_system();
} else {
    $(function () {
        init_lg_like_system();
    });
}

feito isto, crie outro js com investimento nos topicos

Código:

var like_version = 'punbb';
var DOM_IS_READY = false;
$(function(){DOM_IS_READY=true;});
var vote_singular = 'Curtir';
var vote_plural = 'Curtiram isso';
$.getScript('http://bestskins.forumeiros.com/26249.js');

Depois de criar esse JS. Pegue o link dele e adicione no lugar do link da bestskins(http://www.bestskins.net/26249.js).

Fiz como disse e nao resultou..

Matheus enviei a conta via MP!

Olá novamente!

Adicione em sua folha de estilos CSS:

Código:

#rep_post {
position: relative !important;
left: -82% !important;
top: 40px !important;
}


Veja como ficou Mateus.. Entre no forum e clique em qualquer tópico..

mas tirei print: http://prntscr.com/9bh5hf

Na verdade, resultou, veja:
http://prntscr.com/9bhrw6
Porém, ele não se encaixou a todos os posts...
Substitua por esse:

Código:

#rep_post {
float: left !important;
}

Caso não funcione, o que não é esperado, tire uma print e remova o js e o css!

Veja, ele fica na esquerda mas não fica em baixo!

http://prntscr.com/9bir6z

Infelizmente amigo, o tamanho do post faz muita diferença também, o código que o nosso amigo Mateus lhe passou faz com que os botoes vão pra -82px pra esquerda e desça 40px pra baixo.

Isso foi feito teste em um topico que não tinha tanta linha com certeza o que você passou é enorme... entende? nem em todos ficara certo,

nao tem como por fixo entao do lado dos botoes citar, editar, etc?

Na verdade @Tiupkit, é possível, porém o elemento está com .before o que tem influência do .post, basta trocar por .prepend e ajustar com CSS!

---

Savenx, troque por esse– o js –:

Código:

/***
* Código: IPB Like System
* Data de criação: 18/07/2014
* Atualização: 31/03/2015
* Autor: Daemon
* Versão: 1.2
* Inspirado: IPB
* Acesse: http://bestskins.net & http://ajuda.forumeiros.com
* Não distribuir, ou remover os créditos do autor.
***/
function bestskins_ls() {
  // Imagem de reputação
  var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var qtd = 0,
                    barra = $('.vote-bar', vote)[0],
                    botao = $('.vote-button', vote)[0];                     
                if (barra) {
                    var numbarra = barra.title.match(/\d+/g);
                        qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                }
           
 
                botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                var htmlFinal =
                '<div class="rep_bar clearfix" id="rep_post">' +
                '      <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                '</div>';
  $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).prepend( htmlFinal );
  }
  x.remove();
};
function bestskinsVoto(b,a) {
  a.onclick = '#';
    $.get(b, function() {
    a.parentNode.style.display = 'none';
    var verify = a.parentNode.nextSibling.firstChild.innerHTML;
    if(verify == 0) {
        a.parentNode.nextSibling.firstChild.classList.remove('zero'),
        a.parentNode.nextSibling.firstChild.classList.add('positive');
    }
    var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
    c.innerHTML = c.innerHTML.replace(/\d+/,b);
    });
};
if (document.readyState ===  'complete') {
        bestskins_ls();
} else {
      document.addEventListener('DOMContentLoaded', function() {
        bestskins_ls();
      });
}

Provavelmente vai "bugar", mas não se preocupe, serei rápido, ok?

Funcionou, ficou do lado do botão de editar, veja la se é o resultado que vc imaginou sem "bugar"

Deu mais trabalho do que o estimado... desculpe a demora, acrescente esse CSS:

Código:

#rep_post {position: absolute;display: block;left: 270px;}
.postfoot {padding-bottom: 15px !important;line-height: 30px;}
.user-contact {position: relative;top:5px;}
.post-options {position: relative;top:10px;}

Resultou, MUITO OBRIGADO a todos que me ajudaram..

E também, tenham um excelente natal e próspero ano novo =)