Alinhamento do Botão Curtir Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Alinhamento do Botão Curtir

4 participantes

Ir para baixo

Tópico resolvido Alinhamento do Botão Curtir

Mensagem por savenx 02.12.15 19:01

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:

Alinhamento do Botão Curtir 4N3XhwT

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

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por Fraise 02.12.15 21:02

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
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 02.12.15 22:05

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

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 04.12.15 0:24

up?
savenx
savenx
*

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV 06.12.15 16:00

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.
MateusAnjosV
MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 06.12.15 20:05

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

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por Slurk 07.12.15 17:30

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

Slurk
Slurk
****

Membro desde : 23/11/2015
Mensagens : 273
Pontos : 437

http://beststyle.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 07.12.15 18:28

Ficou assim @Tiupkit

http://prntscr.com/9bg7bl
savenx
savenx
*

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV 07.12.15 18:36

Olá!

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

Feliz
MateusAnjosV
MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por Slurk 07.12.15 18:44

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).
Slurk
Slurk
****

Membro desde : 23/11/2015
Mensagens : 273
Pontos : 437

http://beststyle.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 07.12.15 19:17

Fiz como disse e nao resultou..

Matheus enviei a conta via MP!
savenx
savenx
*

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV 07.12.15 19:24

Olá novamente!

Adicione em sua folha de estilos CSS:
Código:
#rep_post {
position: relative !important;
left: -82% !important;
top: 40px !important;
}

Feliz
MateusAnjosV
MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 07.12.15 19:42

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

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

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV 07.12.15 20:39

Na verdade, resultou, veja:
Seta 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;
}
Seta Caso não funcione, o que não é esperado, tire uma print e remova o js e o css!

Feliz
MateusAnjosV
MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 07.12.15 21:48

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

http://prntscr.com/9bir6z
savenx
savenx
*

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por Slurk 07.12.15 23:32

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,
Slurk
Slurk
****

Membro desde : 23/11/2015
Mensagens : 273
Pontos : 437

http://beststyle.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 08.12.15 0:04

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

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV 08.12.15 0:09

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();
      });
}
Seta Provavelmente vai "bugar", mas não se preocupe, serei rápido, ok?

Piscada
MateusAnjosV
MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 08.12.15 1:07

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

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV 08.12.15 1:21

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;}
MateusAnjosV
MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx 08.12.15 2:40

Resultou, MUITO OBRIGADO a todos que me ajudaram..

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

Membro desde : 22/04/2012
Mensagens : 38
Pontos : 53

http://www.wowdevbrasil.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV 09.12.15 14:34

Alinhamento do Botão Curtir Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
MateusAnjosV
MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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