Agradecimento avançado

Qual é minha questão:
Gostaria de saber como deixar meu botão de agradecimento desta maneira:




Como podem ver, quando a pessoa clica no sinal de '' + '', é adicionado +1 à contagem que aparece no tópico.
Assim é possível ver quantas pessoas agradeceram aquele tópico/post.

Eu coloquei um sistema disponibilizado aqui pelo suporte: http://ajuda.forumeiros.com/t47960-tutorial-reputacao-personalizada

Mas, não resultou como esperado.
No tópico do tutorial, há uma imagem mostrando como deveria aparecer.
Veja:


Destacado em vermelho, há o resultado que deveria ficar no tópico.
Entretanto, ao colocá-lo em meu fórum, aparece o número e mais nada.
Veja:



Eu peguei o código js correspondente ao meu fórum, phpbb3.
Então, eu gostaria de saber como fazer aquele do +, citado primeiro ou fazer o segundo funcionar corretamente.


A primeira versão eu vi no suporte americano: http://help.forumotion.com/t100343-rules-added


Obrigado por sua atenção, Convidado

Medidas que eu tomei para corrigir o problema:


Links e imagens do meu problema:


Endereço do meu fórum:
http://masterexp.forumeiro.com

Versão do meu fórum:
PHPBB3

Olá,

Por acaso seguiu os passos severamente ? Um passo invalido ou um esquecimento básico pode causar grandes mudanças e efeitos na conclusão .
Mande-nos seu código por favor.

Segui todos os passos.
Os códigos que usei foram retirados do tópico que apresentei.
Não fiz nenhuma alteração. Usei os códigos disponíveis no tópico.
Como dito antes o JS eu peguei o referente a fóruns Phpbb3 a qual é a versão do meu.

css:

Código:

.vote {
float: right;
margin-left: 4px;
width: 9px;
}
.vote .vote-button {
font-weight: 700;
margin-left: -1px;
text-align: center;
}
.vote .vote-button a {
text-decoration: none !important;
}
.vote .vote-bar {
border: 1px solid #666666;
font-size: 0;
height: 50px;
margin: 0 auto;
width: 3px;
}
.vote .vote-no-bar {
letter-spacing: -2px;
margin-left: -2px;
white-space: nowrap;
}
.vote .vote-bar-plus {
background-color: #00FF00;
}
.vote .vote-bar-minus {
background-color: red;
}

div.vote-count {
background: url("sd-1.archive-host.com/membres/images/142586199450897653/FDF/button_count.png") no-repeat scroll 0 0 transparent;
color: #4AAE00;
font-size: 10px;
font-weight: 700;
height: 17px;
padding-top: 2px;
text-align: center;
width: 27px;
}
td.post-options li, ul.profile-icons li, .post-options li, .post-footer ul.misc-icons li{
color: transparent;
}

JS:

Código:

function discat(cat){$('#menu > div').slideUp(500);$('#subcat'+cat).slideDown(900)}$(function(){$("dd.dterm[style*='489903.gif']").closest("dl.icon").addClass("t-uniq");$("#profile_field_2_-20").focus(function(){$(this).val(($(this).val()?$(this).val()+"\n":"")+new Date().getDate()+"/"+(new Date().getMonth()+1)+"/"+(new Date().getFullYear()-2000)+" ([b]"+$("#i_icon_mini_logout").attr("alt").replace(/^.*?\[ (.*) \]$/,"$1")+"[/b])"+" : ").unbind("focus")})});$(function(){$(".vote").each(function(){$(this).find(".vote-button:first a").html('<img src="http://sd-1.archive-host.com/membres/images/142586199450897653/FDF/buttonok.png" alt="Voter" title="Voter pour ce message" />').click(function(){$.get($(this).attr("href"));$(this).parent().html('<img src="http://sd-1.archive-host.com/membres/images/142586199450897653/FDF/buttonok_off.png" alt="Vote enregistré" title="Vote enregistré" />');return!1});$(this).closest(".postbody").find("ul.profile-icons").append("<li />").find("li:last").append($(this).find(".vote-button:first a")).append($(this).find(".vote-bar").length?' <div class="vote-count" title="Agradecimentos recebidos">'+$(this).find(".vote-bar").attr("title").replace(/^.*\(([0-9]*) .*?\)$/,"$1"):"")+'</div>';$(this).remove()});if($("code").filter(function(){var a=$(this).text().indexOf("["),b=$(this).text().indexOf("]"),c=$(this).text().indexOf("[/"),d=$(this).text().indexOf("<"),e=$(this).text().indexOf('"'),f=$(this).text().indexOf("'"),g=$(this).text().indexOf("/");return a==-1||b==-1||c==-1||a>b||b>c||d!=-1&&d<a||e!=-1&&e<a||f!=-1&&f<a||g!=-1&&g<a}).each(function(){$(this).wrapInner('<pre class="prettyprint'+($(this).text().indexOf("<")==-1&&/[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text())?" lang-css":"")+' linenums" />')}).length){var s=document.createElement("script");s.type="text/javascript";s.async=!0;s.src="http://forum.forumactif.com/12076.js";document.getElementsByTagName("head")[0].appendChild(s)}});

Olá,

Leia o seguinte tutorial caso os passos acima não resolvam.
http://ajuda.forumeiros.com/t47960-

Até mais!

Coleman, há vários tópicos onde vejo respostas suas e que as mesmas são erradas, equivocadas ou sem atenção.
Assim como a que deu agora.
Sugiro que fique mais atento ao responder um tópico e leia-o na íntegra, assim como as respostas dadas. Não apenas leia o título, veja superficialmente e coloque uma resposta qualquer.

---

Se ler o tópico, verá que eu já havia dito que segui este tópico. Coloquei-o até como citação.
Destacarei a parte.

Eu coloquei um sistema disponibilizado aqui pelo suporte: http://ajuda.forumeiros.com/t47960-tutorial-reputacao-personalizada

Mas, não resultou como esperado.
No tópico do tutorial, há uma imagem mostrando como deveria aparecer.

Ainda indiquei através de imagem qual era o erro.

Se ler o post do nosso amigo #Flik , ele pergunta se eu segui os passos do tópico e eu em minha resposta a ele, disse que sim e coloquei a css e o js que usei pois ele havia solicitado também.

---

Espero que não leve a mal. Apenas tome esta mensagem como crítica construtiva e preste mais atenção, pois um moderadeiro dando respostas equivocadas e desnecessárias como vem fazendo nos tópicos, não é algo interessante.

---

Aguardo novas respostas.

Sim, mas mesmo lendo sua questão de ponta a ponta não consigo entender o que deseja. O número em questão já é o efeito esperado pelo tutorial. O que mais deu errado?

Tambem Não Entendi
Especifique Sua Pergunta

Até Mais

A questão é que, como você pode ver na imagem apresentada no tutorial, os agradecimentos são contados e há uma imagem com um sinal de assinalado e em baixo, a quantidade de agradecimentos em cima de uma outra imagem.
Veja:


Já, em meu fórum de teste, não aparece nenhuma das duas imagens após o agradecimento. Apenas o número.


Espero que possam ajudar.

Essa imagem:

É para quem ainda não agradeceu, o que resultará no sinal para ele votar e quantos já votaram, como o senhor mesmo disse.

Se ele votar, só vai aparecer o resultado.

Entendo.
Não há uma forma de manter a imagem?

Por que, veja no código JS.

Há a seguinte imagem


A meu ver, ela seria a imagem de agradecimento dado. Após o agradecimento, deveria aparecer esta imagem junto com o número, ficando desta forma.



Entretanto, a imagem aparece apenas por alguns segundos e desaparece.

Acha que isso tem solução?

Bom dia!

Sendo sincero eu acho que não pode ser modificado. As imagens podem ser modificadas no código Jquery no tutorial. Então é algo que não podemos alterar no Jquery, entende?

Então, mantendo essa linha do agradecimento avançado, sabe como posso fazer um sistema de agradecimento igual ao do suporte americano?

O modo feito tanto no fórum Forumotion como no forum Forumactif são iguais ao do tutorial, aliás, o que pode fazer depois é ativar o sismtema de reputação. Fora isso, não precisará fazer mais nada.

Mas, no forumotion depois que eu clico no mais, ele continua aparecendo depois do agradecimento dado.
Acho estranho esse sistema apresentado aqui o qual as imagens simplesmente somem.

Bom dia!

O sistema do tutorial é o mesmo, porém cada fórum de suporte pode mudar esse sistema ou não. No caso, pode até ser possível nós ter-mos colhido o código mas não com essa modificação.

Estou com o problema parecido com o do nosso amigo Thoth, mas como a versão do meu fórum é Punbb, o problema é um pouco diferente, é inverso, quando eu clico no botão verde, ele fica meio apagado apenas, e não apresenta nem um tipo de numero, somente a imagem que não esta aparecendo para o Thoth...
Acredito que aja algum tipo de fala neste tutorial, pois eu, como nosso amigo thoth, segui exatamente o tutorial, e não tive dificuldades para conclui-lo, mas o erro persiste...

Edit:
acredito que o tutorial deveria ficar exatamente como na imagem mostrada nele mesmo...

este problema pode ser resolvido ?
pois acredito ser um erro no tutorial, sendo do códio ou da imagem de exemplo que nos ilude...

É, gostaria de que isso fosse solucionado.
Acredito que, assim com eu, os demais usuários não implementariam códigos os quais parecem com problemas, em seus fóruns.
Acho que uma revisão nesse código deveria ser feita. Como eu disse, no forumotion, após clicarmos em agradecer, a imagem deles permanece no tópico. Ela não simplesmente some como nesse código apresentado à nós aqui no forumeiros.

Então, ja são dois com o mesmo problema, e com versões de fórum diferentes...
o que podemos fazer para resolver isso ?

Ola,

Pois va em :
Painel de controle Modulos Pontos e reputaçao Reputaçao Gestao de reputaçao


Marque quantos pontos vc quer que a pessoa ganhe , pois se ele tira sua duvida

Não não, nada a ver, o problema esta no tutorial mesmo...

como poderemos fazer para ficar igual ao do Tutorial ?

Espero que alguém consiga responder.

Tipo ninguém aqui tem contato com o fórum americano, pois o deles esta funcionando...
vou até la ver se eu acho esse tutorial...

UP

Pelo menos digam que é impossível...

aew Thoth, ajuda eu a procurar nos tutoriais do fórum americano

uzumaki minato, é normal isso.
Já estou acostumado. Eu nunca faço perguntas triviais como normalmente tem aqui que visivelmente os membros são preguiçosos para usar a ferramenta de busca e ficam centenas criando tópicos perguntando as mesmas coisas. Sempre procuro informações antes de postar então, quando faço uma pergunta, ela sempre demora a ser respondida. Minha ultima pergunta demorou 1 mês com o tópico aberto para ela ser respondida...
Acredito que quem saiba responder nossa questão é apenas o Luciano98, como sempre é ele que consegue responder minhas dúvidas.
Temos que dar sorte dele visitar o tópico.

Mas vou ajudar a procurar sim.

link dos tutoriais traduzidos...

http://translate.google.com.br/translate?sl=en&tl=pt&js=n&prev=_t&hl=pt-BR&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fhelp.forumotion.com%2Ft61210-list-of-tricks-tips

aqui esta o tutorial, o difícil é fazer funcionar na versão Punbb, mas para phpbb3 não terá problemas ^^

Sempre gostamos de criar novas maneiras para aumentar a interatividade nas postagens, e dessa vez, você aprenderá através do tutorial a colocar um botão de avaliação positiva nas mensagens, onde cada clique representará o mesmo que "Curtir", como estamos acostumados na rede social Facebook.

--> Tutoriais, dicas e astúcias <--
Avaliação positiva de uma mensagem

Versão PunBB

1º - Localizar a template:
Painel de Controle Visualização Templates Geral viewtopic_body () Editar

2º - Adicionar o código:

Adicionem o seguinte script abaixo na última linha da template:

Código:

<style type="text/css">div.ddvote{float:right;margin-left: 20px; height:20px;line-height:20px;font-size:12px;font-weight:bold;}</style>
<script type="text/javascript">
//<![CDATA[
var CopyrightNotice = 'Professional like/dislike bar for forumotion IPB2/Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
var x=$('.vote').get();
for (i=x.length-1; i>=0; i--) {
    var plus='0';

    var vplus='<img style="margin-right:3px" title="Like" src="http://i45.servimg.com/u/f45/14/85/89/99/plus_110.png" />';
   
    var y=$(x[i]).find('.vote-button a').get();
    for (j=0; j<y.length; j++) {
        if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
    }
    var y=$(x[i]).find('.vote-bar')[0];
    if (y) {
        var z=y.title.split(' ');
        var pct=parseInt(z[3].replace(/%/,''))/100;
        var num=parseInt(z[4].replace(/\(/,''));
        plus=String(Math.round(num*pct));
    }
    $(x[i]).replaceWith('<div class="ddvote"> ' + vplus + plus + ' <div>');
}
//]]>
</script>

3º - Remover o bloco de votação:

Procure pelas seguintes linhas no template e remova-as: (busque apenas a primeira linha, depois veja até onde deletar)

Código:

<!-- BEGIN switch_vote_active -->
    <div class="vote gensmall">
    <!-- BEGIN switch_vote -->
        <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
    <!-- END switch_vote -->
    <!-- BEGIN switch_bar -->
        <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
        <!-- BEGIN switch_vote_plus -->
            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
        <!-- END switch_vote_plus -->
        <!-- BEGIN switch_vote_minus -->
            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
        <!-- END switch_vote_minus -->
        </div>
    <!-- END switch_bar -->
    <!-- BEGIN switch_no_bar -->
        <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
    <!-- END switch_no_bar -->
    <!-- BEGIN switch_vote -->
        <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
    <!-- END switch_vote -->
    </div>
<!-- END switch_vote_active -->

4º - Substituir outra linha da template:

Agora procure pela seguinte linha:

Código:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>

Substitua-a por esta:

Código:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead clearfix"{postrow.displayed.THANK_BGCOLOR}>

5º - Adicionar o bloco de votação:

Agora, exatamente abaixo da linha que acabou de substituir, cole o código abaixo:

Código:

<!-- BEGIN switch_vote_active -->
    <div class="vote gensmall">
    <!-- BEGIN switch_vote -->
        <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
    <!-- END switch_vote -->
    <!-- BEGIN switch_bar -->
        <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
        <!-- BEGIN switch_vote_plus -->
            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
        <!-- END switch_vote_plus -->
        <!-- BEGIN switch_vote_minus -->
            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
        <!-- END switch_vote_minus -->
        </div>
    <!-- END switch_bar -->
    <!-- BEGIN switch_no_bar -->
        <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
    <!-- END switch_no_bar -->
    <!-- BEGIN switch_vote -->
        <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
    <!-- END switch_vote -->
    </div>
<!-- END switch_vote_active -->

6º - Salvar e publicar o template:

Ao terminar, clique em Salvar, na parte inferior da página e depois, no mesmo local em que clicou para ir até a edição do template, clique em Publicar ()

Observações:

Sim, eu poderia ter dado o template pronto para que vocês apenas o substituíssem. Mas não o fiz por duas razões.

1) Seguindo o tutorial, você sabe exatamente o que fez para obter o resultado desejado, caso contrário, estaria confiando no código fornecido por mim sem saber as substituições e edições que fiz.

2) Muitos membros já podem ter feito alguma alteração na template através de outro tutorial ou modificação própria, então eu acabaria estragando as mesmas...

Já fiz o tutorial utilizando a imagem que pediram, do FdF Inglês.

Versão Phpbb3 & Invision

1º - Localizar a gestão dos códigos Javascript:
Painel de Controle Módulos Gestão dos códigos JavaScript Criar um novo Javascript

2º - Criar o código:

Título: Avaliação positiva de uma mensagem
Investimento: Em todas as páginas
Código Javascript:

Phpbb3:

Código:

var CopyrightNotice = 'Professional like/dislike bar for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
    $('#main-content').prepend('<style type="text/css">ul.profile-icons li.ddvote{height:20px;line-height:20px;font-size:12px;font-weight:bold}ul.profile-icons li.ddvote a{display:inline}.postbody ul.profile-icons li.ddvote img{cursor:default;vertical-align:middle}.postbody ul.profile-icons li.ddvote a img{cursor:pointer}</style>');
    var x=$('.vote').get();
    for (i=x.length-1; i>=0; i--) {
        var plus='0';

        var vplus='<img style="position:relative;top:-3px;margin-right:3px" title="Like" src="http://i45.servimg.com/u/f45/14/85/89/99/plus_110.png" />';

        var y=$(x[i]).find('.vote-button a').get();
        for (j=0; j<y.length; j++) {
            if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
            }
        var y=$(x[i]).find('.vote-bar')[0];
        if (y) {
            var z=y.title.split(' ');
            var pct=parseInt(z[3].replace(/%/,''))/100;
            var num=parseInt(z[4].replace(/\(/,''));
            plus=String(Math.round(num*pct));
        }
        if (x[i].parentNode.parentNode.parentNode.className=='module row1') {
            $(x[i].parentNode).find('.profile-icons').prepend('<li class="ddvote"> ' + vplus + plus + ' <li>');
            $(x[i].parentNode).find('.h3').css('border','none');
        }
        else {
            $(x[i].parentNode.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + ' <li>');
        }
        x[i].parentNode.removeChild(x[i]);
    }
});

Invision:

Código:

var CopyrightNotice = 'Professional like/dislike bar for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
    $('#main-content').prepend('<style type="text/css">ul.post-info li.ddvote{height:20px;line-height:20px;font-size:12px;font-weight:bold;}</style>');
    var x=$('.vote').get();
    for (i=x.length-1; i>=0; i--) {
        var plus='0';

        var vplus='<img style="position:relative;top:-3px;margin-right:3px" title="Like" src="http://i45.servimg.com/u/f45/14/85/89/99/plus_110.png" />';

        var y=$(x[i]).find('.vote-button a').get();
        for (j=0; j<y.length; j++) {
            if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
            }
        var y=$(x[i]).find('.vote-bar')[0];
        if (y) {
            var z=y.title.split(' ');
            var pct=parseInt(z[3].replace(/%/,''))/100;
            var num=parseInt(z[4].replace(/\(/,''));
            plus=String(Math.round(num*pct));
        }
        $(x[i].parentNode.previousSibling.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + ' <li>');
        x[i].parentNode.removeChild(x[i]);
    }
});

Clique em Confirmar.

Resultado final:

Agora, acesse algum tópico ou mensagem no fórum que tenha sido criado por outro membro e veja o resultado em uma de suas postagens (com já 1 voto positivo computado):

(Desconsidere a versão de exemplo)

---

© Fórum dos Fóruns & Heisenburg