[TUTORIAL] Avaliação positiva de uma mensagem

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.


1º - Noção básica dos Templates:
Através da modificação das páginas dos Templates, poderá fazer várias modificações na estrutura do Fórum, podendo criar novos efeitos para o tema, e poderá ainda incluir novos conteúdos nas páginas, mesmo em locais, que não são possíveis através das funções normais do Fórum.



2º - Código a ser aplicado:
Seguinte a sua versão, abaixo temos os respectivos códigos para cada uma. Se fizer alguma alteração errada, o código ocasionara em Bugs em teu fórum, por este motivo, fique ciente da sua versão e tenha atenção no tutorial.

PUNBB

Antes de qualquer modificação feita em seu Template, pedimos que salve o código original em um editor de texto qualquer, como um bloco de notas ou até mesmo no Notepad, para que ao fazer alguma alteração errada é só voltar ao código original.

---

Depois de localizarem o Template Viewtopic_body e ter certeza que não é outro Template que estão editando, adicionem o o código 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>

Para a próxima etapa ainda no Template, 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 -->

Para mais uma etapa do nosso tutorial, precisaremos retirar uma linha, por outra. Procure pela seguinte linha:

Código:

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

E substitua-a por esta:

Código:

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

Agora, preste bastante atenção nesta parte, exatamente abaixo da linha que acabou de substituir no ultimo passo, cole o código passado 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 -->

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 ( ).

PHPBB2

Antes de qualquer modificação feita em seu Template, pedimos que salve o código original em um editor de texto qualquer, como um bloco de notas ou até mesmo no Notepad, para que ao fazer alguma alteração errada é só voltar ao código original.

---

Depois de localizarem o Template Viewtopic_body e ter certeza que não é outro Template que estão editando, adicionem o o código abaixo na última linha da Template:

Código:

<style type="text/css">div.ddvote {float: none;height: 20px;line-height: 20px;font-size: 12px;font-weight: bold;margin-top: 70px;position: absolute;margin-right: 30%;left: 0;right: 0;margin-left: 68%;}</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>

Para a próxima etapa ainda no Template, 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 -->

Para mais uma etapa do nosso tutorial, precisaremos retirar uma linha, por outra. Procure pela seguinte linha:

Código:

<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">

E substitua-a por esta:

Código:

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

Agora, preste bastante atenção nesta parte, exatamente abaixo da linha que acabou de substituir no ultimo passo, cole o código passado 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 -->

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 ( ).

PHPBB3

3º - Noção básica dos JavaScript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

4º - Código a ser usado:
O código que utilizaremos para criar a função na versão PhpBB3 será a abaixo. Pedimos para que não altere nada no código para que não ocasione em problemas.

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

Após isso, salve e visualiza teu tópico.

INVISION

5º - Noção básica dos JavaScript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

6º - Código a ser usado:
O código que utilizaremos para criar a função na versão Invision será a abaixo. Pedimos para que não altere nada no código para que não ocasione em problemas.

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

Após isso, salve e visualiza teu tópico.

Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [DÚVIDA] Avaliação positiva de uma mensagem