Un sistema di reazioni per i tuoi post


Tutorial Un sistema di reazioni per i tuoi post

Messaggio Da Niko Dom 31 Ott 2021 - 18:00

Un sistema di reazioni per i tuoi post


Questo tutorial ti aiuterà ad aggiungere emoji al pulsante di reputazione e ai pulsanti Mi piace,
oltre a contare i voti senza dover cambiare pagina! :good:

Un sistema di reazioni per i tuoi post Dvkln610

Note iniziali

  1. Questa modifica si applica finché i tuoi modelli non sono stati modificati in modo significativo.
  2. Devi avere attivato il sistema di reputazione.
  3. Devi avere attivato il sistema Mi piace e Non mi piace.


Versione ModernBB

Personalizzazione CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS e aggiungiamo:
Codice:
.fa_vote,.fa_voted,.fa_count{font-size:12px;font-family:Verdana,Arial,Helvetica,Sans-serif;display:inline-block!important;width:auto!important;float:none!important;transition:300ms}
.fa_vote:hover,.fa_voted{background-image:url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);opacity:.6}
.fa_voted{cursor:default}
.fa_count{font-weight:700;margin:0 3px;cursor:default}
.fa_positive{color:#4A0}
.fa_negative{color:#A44}
.fa_votebar_inner{background:#4a00;transition:300ms}
.fa_votebar,.fa_votebar_inner{background:#c440;height:3px}
span.fa_voted.fa_plus{color:#fff;height:37px;padding:7px}
span.fa_voted.fa_minus{color:#fff;height:37px;padding:7px;color:#fff;height:37px;padding:7px}
.fa_voted,.fa_vote{background:#2b596f;border:solid #2b596f 2px;cursor:default;padding:4px;vertical-align:middle}
li.fa_reputation{float:left;margin-left:5px}
.rep-button,.rep-button:active,.rep-button:focus{font-size:0;margin:0 0 0 6px;vertical-align:middle;padding:6px 7px}
::marker{font-size:0}
.rep-button,.rep-button:active,.rep-button:focus{background-color:#2b596f}
i.ion-thumbsdown,i.ion-thumbsup{font-size:0;vertical-align:17px}
a.fa_voted.fa_plus,a.fa_voted.fa_minus,a.fa_vote.fa_plus,a.fa_vote.fa_minus{font-size:0;color:#fff}
.rep-button img,{float:right;margin-left:5px;vertical-align:middle;width:25px;height:25px}
a.fa_voted.fa_minus img,a.fa_voted.fa_plus img,button.rep-button.fa_like img,button.rep-button.fa_dislike img,.rep-button.fa_liked img,.rep-button.fa_disliked img{float:right;margin-left:5px;vertical-align:middle;width:25px;height:25px}
.rep-button img,a.fa_vote.fa_plus img,a.fa_vote.fa_minus img{float:right;height:25px;margin-left:5px;vertical-align:middle;width:25px}
.rep-nb{background-color:rgba(255,255,255,0.25);border-radius:2px;font-size:11px;margin-right:7px;vertical-align:1px;padding:11px 15px}
.rep-button.fa_liked,.rep-button.fa_disliked{padding:6px 10px 6px 0}

Codice Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione del codice Javascript sia attivata, e creiamo un nuovo codice con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function() {
              // General Configuration of the plugin
              var config = {
                position_left : true, // true for left || false for right
                negative_vote : true, // true for negative votes || false for positive only
                vote_bar : true, // display a small bar under the vote buttons
         
                // button config
                icon_plus : '',
                icon_minus : '',
               
              // language config
                title_plus : '',
                title_minus : '',
         
                title_like_singular : '%{VOTES}',
                title_like_plural : '%{VOTES}',
         
                title_dislike_singular : '%{VOTES}',
                title_dislike_plural : '%{VOTES}',
         
                title_vote_bar : '%{VOTES}'
              },
           
    // function bound to the onclick handler of the vote buttons
              submit_vote = function() {
                var next = this.nextSibling, // the counter next to the vote button that was clicked
                    box = this.parentNode,
                    bar = box.getElementsByTagName('DIV'),
                    vote = box.getElementsByTagName('A'),
                    mode = /eval=plus/.test(this.href) ? 1 : 0,
                    i = 0, j = vote.length, pos, neg, percent;
         
                // submit the vote asynchronously
                $.get(this.href, function() {
                  next.innerHTML = +next.innerHTML + 1; // add to the vote count
                  next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
           
                  pos = +vote[0].nextSibling.innerHTML;
                  neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
                  percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
           
                  if (bar[0]) {
                    bar[0].style.display = '';
                    bar[0].firstChild.style.width = percent;
                    box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
                  }
                });
         
                // revoke voting capabilities on the post once the vote is cast
                for (; i < j; i++) {
                  vote[i].href = '#';
                  vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
                  vote[i].onclick = function() { return false };
                }
         
                return false;
              },
           
              vote = $('.vote'), i = 0, j = vote.length,
              version = $('.bodylinewidth')[0] ? 0 :
                        document.getElementById('phpbb') ? 1 :
                        $('.pun')[0] ? 2 :
                        document.getElementById('ipbwrapper') ? 3 :
                        document.getElementById('modernbb') ? 4 :
                        'badapple', // version check
         
              // version data so we don't have to redefine these arrays during the loop
              vdata = {
                tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
                name : [version],
                actions : ['.post-options', '.fa_like_div', '.post-options', '.posting-icons', '.fa_like_div'][version]
              },
         
              post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
         
              // prevent execution if the version cannot be determined
              if (version == 'badapple') {
                if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
                return;
              }
         
              for (; i < j; i++) {
                post = $(vote[i]).closest('.post')[0];
                bar = $('.vote-bar', vote[i])[0]; // vote bar
                button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
                pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
                ul = $(vdata.actions, post)[0]; // post actions
                li = document.createElement(vdata.tag); // vote system container
                li.className = 'fa_reputation';
         
                if (li.tagName == 'SPAN') li.style.display = 'inline-block';
         
                // calculate votes
                if (bar) {
                  total = +bar.title.replace(/.*?\((\d+).*/, '$1');
                  percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
           
                  n_pos = Math.round(total * (percent / 100));
                  n_neg = total - n_pos;
                } else {
                  n_pos = 0;
                  n_neg = 0;
                }
         
                // set up negative and positive titles with the correct grammar, votes, and usernames
                title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
                title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
         
                // define the vote counts
                li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
                span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
         
                // create positive vote button
                plus = document.createElement('A');
                plus.href = button[0] ? button[0].href : '#';
                plus.onclick = button[0] ? submit_vote : function() { return false };
                plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
                plus.innerHTML = config.icon_plus;
                plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
         
                span[0] && li.insertBefore(plus, span[0]);
         
                // create negative vote button
                if (config.negative_vote) {
                  minus = document.createElement('A');
                  minus.href = button[1] ? button[1].href : '#';
                  minus.onclick = button[1] ? submit_vote : function() { return false };
                  minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
                  minus.innerHTML = config.icon_minus;
                  minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
           
                  span[1] && li.insertBefore(minus, span[1]);
                }
         
                // create vote bar
                if (config.vote_bar) {
                  vote_bar = document.createElement('DIV');
                  vote_bar.className = 'fa_votebar';
                  vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
                  vote_bar.style.display = bar ? '' : 'none';
                  li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
                  li.appendChild(vote_bar);
                }
         
                // finally insert the vote system and remove the default one
                config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
                vote[i].parentNode.removeChild(vote[i]);
              }
            });
     
    $(window).load(function() {
    $("li.fa_reputation,  .fa_count, .fa_vote, .fa_voted").each(function() {
            $(this).find("a.fa_voted.fa_plus").html('love it<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
            $(this).find("a.fa_voted.fa_minus").html('silly<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
            $(this).find("a.fa_vote.fa_plus").html('love it<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
            $(this).find("a.fa_vote.fa_minus").html('silly<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
        });
    });
     
    $(window).load(function() {
    $("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
            $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
    $(window).load(function() {
    $("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
            $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });


Versione PhpBB2

Modifica templates

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e modifichiamo il template viewtopic_body

Cerchiamo:
Codice:
<!-- BEGIN switch_likes_active -->
 <tr><td colspan="2">
 <div class="fa_like_div">
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div></td></tr>
 <!-- END switch_likes_active -->

e sotituiamo con:
Codice:
<!-- BEGIN switch_likes_active -->
                          <tr><td colspan="2">
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsup"></i>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsdown"></i>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
</div></td></tr>
 <!-- END switch_likes_active -->

Personalizzazione CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS e aggiungiamo:
Aggiungiamo il seguente codice:
Codice:
.fa_vote,.fa_voted,.fa_count{font-size:12px;font-family:Verdana,Arial,Helvetica,Sans-serif;display:inline-block!important;width:auto!important;float:none!important;transition:300ms}
.fa_vote:hover,.fa_voted{background-image:url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);opacity:.6}
.fa_voted{cursor:default}
.fa_count{font-weight:700;margin:0 3px;cursor:default}
.fa_positive{color:#4A0}
.fa_negative{color:#A44}
.fa_votebar_inner{background:#4a00;transition:300ms}
.fa_votebar,.fa_votebar_inner{background:#c440;height:3px}
span.fa_voted.fa_plus{color:#fff;height:19px;padding:7px}
span.fa_voted.fa_minus{color:#fff;height:37px;padding:7px;color:#fff;height:19px;padding:7px}
.fa_voted,.fa_vote{background:#2b596f;border:solid #2b596f 2px;cursor:default;padding:4px;vertical-align:middle}
li.fa_reputation{float:left;margin-left:5px}
 
 
 
 button.rep-button img, button.rep-button.fa_disliked img,  button.rep-button.fa_liked img,  button.rep-button.fa_dislike img,  button.rep-button.fa_like img,  a.fa_vote.fa_plus img, a.fa_vote.fa_minus img, a.fa_voted.fa_plus img, a.fa_voted.fa_minus img{
    width: 25px;
    height: 25px;
}
 
 
.rep-button, .rep-button:active {
    background: #2b596f;
    border: 1px solid #005c8b;
    box-shadow: 0 -1px 0 #2b596f inset;
    color: #ffffff;
    margin: 3px 3px 6px 0;
    padding: 7px 4px;
}

Installazione Javascript

  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function() {
              // General Configuration of the plugin
              var config = {
                position_left : true, // true for left || false for right
                negative_vote : true, // true for negative votes || false for positive only
                vote_bar : true, // display a small bar under the vote buttons
       
                // button config
                icon_plus : '',
                icon_minus : '',
             
              // language config
                title_plus : '',
                title_minus : '',
       
                title_like_singular : '',
                title_like_plural : '',
       
                title_dislike_singular : '',
                title_dislike_plural : '',
       
                title_vote_bar : ''
              },
         
    // function bound to the onclick handler of the vote buttons
              submit_vote = function() {
                var next = this.nextSibling, // the counter next to the vote button that was clicked
                    box = this.parentNode,
                    bar = box.getElementsByTagName('DIV'),
                    vote = box.getElementsByTagName('A'),
                    mode = /eval=plus/.test(this.href) ? 1 : 0,
                    i = 0, j = vote.length, pos, neg, percent;
       
                // submit the vote asynchronously
                $.get(this.href, function() {
                  next.innerHTML = +next.innerHTML + 1; // add to the vote count
                  next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
         
                  pos = +vote[0].nextSibling.innerHTML;
                  neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
                  percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
         
                  if (bar[0]) {
                    bar[0].style.display = '';
                    bar[0].firstChild.style.width = percent;
                    box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
                  }
                });
       
                // revoke voting capabilities on the post once the vote is cast
                for (; i < j; i++) {
                  vote[i].href = '#';
                  vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
                  vote[i].onclick = function() { return false };
                }
       
                return false;
              },
         
              vote = $('.vote'), i = 0, j = vote.length,
              version = $('.bodylinewidth')[0] ? 0 :
                        document.getElementById('phpbb') ? 1 :
                        $('.pun')[0] ? 2 :
                        document.getElementById('ipbwrapper') ? 3 :
                        document.getElementById('modernbb') ? 4 :
                        'badapple', // version check
       
              // version data so we don't have to redefine these arrays during the loop
              vdata = {
                tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
                name : [version],
                actions : ['.fa_like_div'][version]
              },
       
              post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
       
              // prevent execution if the version cannot be determined
              if (version == 'badapple') {
                if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
                return;
              }
       
              for (; i < j; i++) {
                post = $(vote[i]).closest('.post')[0];
                bar = $('.vote-bar', vote[i])[0]; // vote bar
                button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
                pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
                ul = $(vdata.actions, post)[0]; // post actions
                li = document.createElement(vdata.tag); // vote system container
                li.className = 'fa_reputation';
       
                if (li.tagName == 'SPAN') li.style.display = 'inline-block';
       
                // calculate votes
                if (bar) {
                  total = +bar.title.replace(/.*?\((\d+).*/, '$1');
                  percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
         
                  n_pos = Math.round(total * (percent / 100));
                  n_neg = total - n_pos;
                } else {
                  n_pos = 0;
                  n_neg = 0;
                }
       
                // set up negative and positive titles with the correct grammar, votes, and usernames
                title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
                title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
       
                // define the vote counts
                li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
                span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
       
                // create positive vote button
                plus = document.createElement('A');
                plus.href = button[0] ? button[0].href : '#';
                plus.onclick = button[0] ? submit_vote : function() { return false };
                plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
                plus.innerHTML = config.icon_plus;
                plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
       
                span[0] && li.insertBefore(plus, span[0]);
       
                // create negative vote button
                if (config.negative_vote) {
                  minus = document.createElement('A');
                  minus.href = button[1] ? button[1].href : '#';
                  minus.onclick = button[1] ? submit_vote : function() { return false };
                  minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
                  minus.innerHTML = config.icon_minus;
                  minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
         
                  span[1] && li.insertBefore(minus, span[1]);
                }
       
                // create vote bar
                if (config.vote_bar) {
                  vote_bar = document.createElement('DIV');
                  vote_bar.className = 'fa_votebar';
                  vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
                  vote_bar.style.display = bar ? '' : 'none';
                  li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
                  li.appendChild(vote_bar);
                }
       
                // finally insert the vote system and remove the default one
                config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
                vote[i].parentNode.removeChild(vote[i]);
              }
            });
     
    $(window).load(function() {
    $("span.fa_reputation, .fa_vote, .fa_voted").each(function() {
            $(this).find("a.fa_vote.fa_plus").html('<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
            $(this).find("a.fa_voted.fa_minus").html('<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
            $(this).find("a.fa_voted.fa_plus").html('<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
            $(this).find("a.fa_vote.fa_minus").html('<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
        });
    });
     
    $(window).load(function() {
    $("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
            $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
    $(window).load(function() {
    $("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
            $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });


Versione PhpBB3

Personalizzazione CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS e aggiungiamo:
Codice:
          .fa_vote, .fa_voted, .fa_count {
          font-size:12px;
          font-family:Verdana, Arial, Helvetica, Sans-serif;
          display:inline-block !important;
          width:auto !important;
          float:none !important;
          transition:300ms;
        }
   
    .fa_vote:hover, .fa_voted {
    background-image: url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);
    opacity: .6;
}
        .fa_voted { cursor:default }
   
        .fa_count {
          font-weight:bold;
          margin:0 3px;
          cursor:default;
        }
   
        .fa_positive { color:#4A0 }
        .fa_negative { color:#A44 }
   
        .fa_votebar_inner {
    background: #4a00;
    transition: 300ms;
}
 
.fa_votebar, .fa_votebar_inner {
    background: #c440;
    height: 3px;
}
span.fa_voted.fa_plus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
  span.fa_voted.fa_minus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
 span.fa_voted.fa_minus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
.fa_voted, .fa_vote {
    background: #2b596f;
    border: solid #2b596f 2px;
    cursor: default;
    padding: 4px;
    vertical-align: middle;
}
li.fa_reputation {
    margin-left: 5px;
    float: left;
}
.fa_vote img, .fa_voted img, a.fa_voted.fa_minus img, a.fa_voted.fa_plus img, button.rep-button.fa_like img, button.rep-button.fa_dislike img, .rep-button.fa_liked img, .rep-button.fa_disliked img {
    float: left;
    margin-left: 5px;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
button.rep-button img {
    width: 25px;
    height: 25px;
}
 
 button.rep-button.fa_liked, button.rep-button.fa_like, button.rep-button.fa_dislike , button.rep-button.fa_disliked,  .rep-button, .rep-button:active, .rep-button:focus{
    margin-left: 11px;
    padding: 7px;
    font-size: 1px;
}
 
.rep-nb {
    border-left: 1px solid #C7C3BF;
    font-weight: 700;
    line-height: 9px;
    margin-left: 0px;
    padding-left: 6px;
}
.rep-button, .rep-button:active, .rep-button:focus {
    background: #2b596f;
    border: 1px solid #2b596f;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #2b596f inset;
    color: #ffffff;
    margin: 0px 0px 2px 7px;
  float: none;
}

Codice Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione del codice Javascript sia attivata, e creiamo un nuovo codice con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function() {
              // General Configuration of the plugin
              var config = {
                position_left : true, // true for left || false for right
                negative_vote : true, // true for negative votes || false for positive only
                vote_bar : true, // display a small bar under the vote buttons
         
                // button config
                icon_plus : '',
                icon_minus : '',
               
             
               
                // language config
                title_plus : '',
                title_minus : '',
         
                title_like_singular : '',
                title_like_plural : '',
         
                title_dislike_singular : '',
                title_dislike_plural : '',
         
                title_vote_bar : ''
              },
           
           
              // function bound to the onclick handler of the vote buttons
              submit_vote = function() {
                var next = this.nextSibling, // the counter next to the vote button that was clicked
                    box = this.parentNode,
                    bar = box.getElementsByTagName('DIV'),
                    vote = box.getElementsByTagName('A'),
                    mode = /eval=plus/.test(this.href) ? 1 : 0,
                    i = 0, j = vote.length, pos, neg, percent;
         
                // submit the vote asynchronously
                $.get(this.href, function() {
                  next.innerHTML = +next.innerHTML + 1; // add to the vote count
                  next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
           
                  pos = +vote[0].nextSibling.innerHTML;
                  neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
                  percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
           
                  if (bar[0]) {
                    bar[0].style.display = '';
                    bar[0].firstChild.style.width = percent;
                    box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
                  }
                });
         
                // revoke voting capabilities on the post once the vote is cast
                for (; i < j; i++) {
                  vote[i].href = '#';
                  vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
                  vote[i].onclick = function() { return false };
                }
         
                return false;
              },
           
              vote = $('.vote'), i = 0, j = vote.length,
              version = $('.bodylinewidth')[0] ? 0 :
                        document.getElementById('phpbb') ? 1 :
                        $('.pun')[0] ? 2 :
                        document.getElementById('ipbwrapper') ? 3 :
                        document.getElementById('modernbb') ? 4 :
                        'badapple', // version check
         
              // version data so we don't have to redefine these arrays during the loop
              vdata = {
                tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
                name : [version],
                actions : ['.post-options', '.fa_like_div', '.post-options', '.posting-icons', '.fa_like_div'][version]
              },
         
              post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
         
              // prevent execution if the version cannot be determined
              if (version == 'badapple') {
                if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
                return;
              }
         
              for (; i < j; i++) {
                post = $(vote[i]).closest('.post')[0];
                bar = $('.vote-bar', vote[i])[0]; // vote bar
                button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
                pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
                ul = $(vdata.actions, post)[0]; // post actions
                li = document.createElement(vdata.tag); // vote system container
                li.className = 'fa_reputation';
         
                if (li.tagName == 'SPAN') li.style.display = 'inline-block';
         
                // calculate votes
                if (bar) {
                  total = +bar.title.replace(/.*?\((\d+).*/, '$1');
                  percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
           
                  n_pos = Math.round(total * (percent / 100));
                  n_neg = total - n_pos;
                } else {
                  n_pos = 0;
                  n_neg = 0;
                }
         
                // set up negative and positive titles with the correct grammar, votes, and usernames
                title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
                title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
         
                // define the vote counts
                li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
                span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
         
                // create positive vote button
                plus = document.createElement('A');
                plus.href = button[0] ? button[0].href : '#';
                plus.onclick = button[0] ? submit_vote : function() { return false };
                plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
                plus.innerHTML = config.icon_plus;
                plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
         
                span[0] && li.insertBefore(plus, span[0]);
         
                // create negative vote button
                if (config.negative_vote) {
                  minus = document.createElement('A');
                  minus.href = button[1] ? button[1].href : '#';
                  minus.onclick = button[1] ? submit_vote : function() { return false };
                  minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
                  minus.innerHTML = config.icon_minus;
                  minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
           
                  span[1] && li.insertBefore(minus, span[1]);
                }
         
                // create vote bar
                if (config.vote_bar) {
                  vote_bar = document.createElement('DIV');
                  vote_bar.className = 'fa_votebar';
                  vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
                  vote_bar.style.display = bar ? '' : 'none';
                  li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
                  li.appendChild(vote_bar);
                }
         
                // finally insert the vote system and remove the default one
                config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
                vote[i].parentNode.removeChild(vote[i]);
              }
            });
     
     
     
     
     
     
    $(window).load(function() {
    $("li.fa_reputation,  .fa_count, .fa_vote, .fa_voted").each(function() {
            $(this).find("a.fa_voted.fa_plus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f60d10.png" />');
            $(this).find("a.fa_voted.fa_minus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f61210.png" />');
            $(this).find("a.fa_vote.fa_plus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f60d10.png" />');
            $(this).find("a.fa_vote.fa_minus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f61210.png" />');
        });
    });
     
     
    $(window).load(function() {
    $("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
            $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
     
    $(window).load(function() {
    $("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
            $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });
     
     
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });


Modifica templates

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e modifichiamo il template viewtopic_body

Trova:
Codice:
<!-- BEGIN switch_likes_active -->
        <div class="fa_like_div">
            <!-- BEGIN switch_like_list -->
            {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
            <!-- END switch_like_list -->
            <!-- BEGIN switch_dislike_list -->
            {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
            <!-- END switch_dislike_list -->
            <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
              <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
              <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
            </button>
            <!-- BEGIN switch_dislike_button -->
            <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
              <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
              <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
            </button>
            <!-- END switch_dislike_button -->
        </div>
        <!-- END switch_likes_active -->

Sostituisci con:
Codice:
<!-- BEGIN switch_likes_active -->
                          <tr><td colspan="2">
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsup"></i>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsdown"></i>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
</div></td></tr>
 <!-- END switch_likes_active -->

[Prosegue nel post successivo]




Ultima modifica di Niko il Sab 20 Nov 2021 - 20:01 - modificato 1 volta.
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9007
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/

A rozalia piace questo messaggio.

Niko è stato ringraziato dall'autore di questo topic.

Tutorial Re: Un sistema di reazioni per i tuoi post

Messaggio Da Niko Dom 31 Ott 2021 - 18:01

Un sistema di reazioni per i tuoi post (parte 2/2)


[Prosegue]

Versione Invision

Modifica templates

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e modifichiamo il template viewtopic_body

Cerchiamo:
Codice:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="17px" height="17px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#fff"></path></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="17px" height="17px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#fff"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->

e sostituiamo con:
Codice:
<!-- BEGIN switch_likes_active -->
                          <tr><td colspan="2">
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsup"></i>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsdown"></i>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
</div></td></tr>
 <!-- END switch_likes_active -->

Personalizzazione CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS e aggiungiamo:
Aggiungiamo:
Codice:
.fa_vote,.fa_voted,.fa_count{font-size:12px;font-family:Verdana,Arial,Helvetica,Sans-serif;display:inline-block!important;width:auto!important;float:none!important;transition:300ms}
.fa_vote:hover,.fa_voted{background-image:url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);opacity:.6}
.fa_voted{cursor:default}
.fa_count{font-weight:700;margin:0 3px;cursor:default}
.fa_positive{color:#4A0}
.fa_negative{color:#A44}
.fa_votebar_inner{background:#4a00;transition:300ms}
.fa_votebar,.fa_votebar_inner{background:#c440;height:3px}
span.fa_voted.fa_plus{color:#fff;height:19px;padding:7px}
span.fa_voted.fa_minus{color:#fff;height:19px;padding:7px;color:#fff;height:19px;padding:7px}
.fa_voted,.fa_vote{background:#2b596f;border:solid #2b596f 2px;cursor:default;padding:4px;vertical-align:middle}
li.fa_reputation{float:left;margin-left:5px}
.rep-button,.rep-button:active,.rep-button:focus{font-size:0;margin:0 0 0 6px;vertical-align:middle;padding:6px 7px}
::marker{font-size:0}
.rep-button,.rep-button:active,.rep-button:focus{background-color:#2b596f}
i.ion-thumbsdown,i.ion-thumbsup{font-size:0;vertical-align:17px}
a.fa_voted.fa_plus,a.fa_voted.fa_minus,a.fa_vote.fa_plus,a.fa_vote.fa_minus{font-size:0;color:#fff}
.rep-button img,{float:right;margin-left:5px;vertical-align:middle;width:25px;height:25px}
a.fa_voted.fa_minus img,a.fa_voted.fa_plus img,button.rep-button.fa_like img,button.rep-button.fa_dislike img,.rep-button.fa_liked img,.rep-button.fa_disliked img{float:right;margin-left:5px;vertical-align:middle;width:25px;height:25px}
.rep-button img,a.fa_vote.fa_plus img,a.fa_vote.fa_minus img{float:right;height:25px;margin-left:5px;vertical-align:middle;width:25px}
.rep-nb{background-color:rgba(255,255,255,0.25);border-radius:2px;font-size:11px;margin-right:7px;vertical-align:1px;padding:11px 15px}
.rep-button.fa_liked,.rep-button.fa_disliked{padding:6px 10px 6px 0}
 
.fa_like_div {
    overflow: hidden;
    padding: 19px;
    background: #c6ccd478;
}
.rep-button, .rep-button:active {
 height: auto;
}


Installazione Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione del codice Javascript sia attivata, e creiamo un nuovo codice con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function() {
              // General Configuration of the plugin
              var config = {
                position_left : true, // true for left || false for right
                negative_vote : true, // true for negative votes || false for positive only
                vote_bar : true, // display a small bar under the vote buttons
         
                // button config
                icon_plus : '',
                icon_minus : '',
               
             
               
                // language config
                title_plus : '',
                title_minus : '',
         
                title_like_singular : '',
                title_like_plural : '',
         
                title_dislike_singular : '',
                title_dislike_plural : '',
         
                title_vote_bar : ''
              },
           
           
              // function bound to the onclick handler of the vote buttons
              submit_vote = function() {
                var next = this.nextSibling, // the counter next to the vote button that was clicked
                    box = this.parentNode,
                    bar = box.getElementsByTagName('DIV'),
                    vote = box.getElementsByTagName('A'),
                    mode = /eval=plus/.test(this.href) ? 1 : 0,
                    i = 0, j = vote.length, pos, neg, percent;
         
                // submit the vote asynchronously
                $.get(this.href, function() {
                  next.innerHTML = +next.innerHTML + 1; // add to the vote count
                  next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
           
                  pos = +vote[0].nextSibling.innerHTML;
                  neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
                  percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
           
                  if (bar[0]) {
                    bar[0].style.display = '';
                    bar[0].firstChild.style.width = percent;
                    box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
                  }
                });
         
                // revoke voting capabilities on the post once the vote is cast
                for (; i < j; i++) {
                  vote[i].href = '#';
                  vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
                  vote[i].onclick = function() { return false };
                }
         
                return false;
              },
           
              vote = $('.vote'), i = 0, j = vote.length,
              version = $('.bodylinewidth')[0] ? 0 :
                        document.getElementById('phpbb') ? 1 :
                        $('.pun')[0] ? 2 :
                        document.getElementById('ipbwrapper') ? 3 :
                        document.getElementById('modernbb') ? 4 :
                        'badapple', // version check
         
              // version data so we don't have to redefine these arrays during the loop
              vdata = {
                tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
                name : [version],
                actions : ['.post-options', '.post-options', '.posting-icons', '.fa_like_div'][version]
              },
         
              post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
         
              // prevent execution if the version cannot be determined
              if (version == 'badapple') {
                if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
                return;
              }
         
              for (; i < j; i++) {
                post = $(vote[i]).closest('.post')[0];
                bar = $('.vote-bar', vote[i])[0]; // vote bar
                button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
                pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
                ul = $(vdata.actions, post)[0]; // post actions
                li = document.createElement(vdata.tag); // vote system container
                li.className = 'fa_reputation';
         
                if (li.tagName == 'SPAN') li.style.display = 'inline-block';
         
                // calculate votes
                if (bar) {
                  total = +bar.title.replace(/.*?\((\d+).*/, '$1');
                  percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
           
                  n_pos = Math.round(total * (percent / 100));
                  n_neg = total - n_pos;
                } else {
                  n_pos = 0;
                  n_neg = 0;
                }
         
                // set up negative and positive titles with the correct grammar, votes, and usernames
                title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
                title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
         
                // define the vote counts
                li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
                span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
         
                // create positive vote button
                plus = document.createElement('A');
                plus.href = button[0] ? button[0].href : '#';
                plus.onclick = button[0] ? submit_vote : function() { return false };
                plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
                plus.innerHTML = config.icon_plus;
                plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
         
                span[0] && li.insertBefore(plus, span[0]);
         
                // create negative vote button
                if (config.negative_vote) {
                  minus = document.createElement('A');
                  minus.href = button[1] ? button[1].href : '#';
                  minus.onclick = button[1] ? submit_vote : function() { return false };
                  minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
                  minus.innerHTML = config.icon_minus;
                  minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
           
                  span[1] && li.insertBefore(minus, span[1]);
                }
         
                // create vote bar
                if (config.vote_bar) {
                  vote_bar = document.createElement('DIV');
                  vote_bar.className = 'fa_votebar';
                  vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
                  vote_bar.style.display = bar ? '' : 'none';
                  li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
                  li.appendChild(vote_bar);
                }
         
                // finally insert the vote system and remove the default one
                config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
                vote[i].parentNode.removeChild(vote[i]);
              }
            });
     
     
     
     
     
     
    $(window).load(function() {
    $("li.fa_reputation,  .fa_count, .fa_vote, .fa_voted").each(function() {
            $(this).find("a.fa_voted.fa_plus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f60d10.png" />');
            $(this).find("a.fa_voted.fa_minus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f61210.png" />');
            $(this).find("a.fa_vote.fa_plus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f60d10.png" />');
            $(this).find("a.fa_vote.fa_minus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f61210.png" />');
        });
    });
     
     
    $(window).load(function() {
    $("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
            $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
     
    $(window).load(function() {
    $("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
            $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });
     
     
     
     
     
     
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });


Versione PunBB

Modifica templates

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e modifichiamo il template viewtopic_body

Cerchiamo:
Codice:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div profile_{postrow.displayed.PROFILE_POSITION}">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->

Sostituiamo con:
Codice:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div profile_{postrow.displayed.PROFILE_POSITION}">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <div class="postliker"><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
                                                  </div>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
                                                 
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <div class="postlike"><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
                                                  </div>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
                                                 
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->

Personalizzazione CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS e aggiungiamo:
Aggiungiamo:
Codice:
        .fa_vote, .fa_voted, .fa_count {
          font-size:12px;
          font-family:Verdana, Arial, Helvetica, Sans-serif;
          display:inline-block !important;
          width:auto !important;
          float:none !important;
          transition:300ms;
        }
   
    .fa_vote:hover, .fa_voted {
    background-image: url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);
    opacity: .6;
}
        .fa_voted { cursor:default }
   
        .fa_count {
          font-weight:bold;
          margin:0 3px;
          cursor:default;
        }
   
        .fa_positive { color:#4A0 }
        .fa_negative { color:#A44 }
   
        .fa_votebar_inner {
    background: #4a00;
    transition: 300ms;
}
 
.fa_votebar, .fa_votebar_inner {
    background: #c440;
    height: 3px;
}
span.fa_voted.fa_plus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
  span.fa_voted.fa_minus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
 span.fa_voted.fa_minus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
.fa_voted, .fa_vote {
    background: #2b596f;
    border: solid #2b596f 2px;
    cursor: default;
    padding: 4px;
    vertical-align: middle;
}
li.fa_reputation {
    margin-left: 5px;
    float: left;
}
.fa_vote img, .fa_voted img, a.fa_voted.fa_minus img, a.fa_voted.fa_plus img, button.rep-button.fa_like img, button.rep-button.fa_dislike img, .rep-button.fa_liked img, .rep-button.fa_disliked img {
    float: left;
    margin-left: 5px;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
button.rep-button img {
    width: 25px;
    height: 25px;
}
 
 button.rep-button.fa_liked, button.rep-button.fa_like, button.rep-button.fa_dislike , button.rep-button.fa_disliked,  .rep-button, .rep-button:active, .rep-button:focus{
    margin-left: 11px;
    padding: 5px 3px;
    font-size: 0px;
}
 span.rep-nb {
    font-size: 15px!important;
}
.rep-nb {
    border-left: 1px solid #C7C3BF;
    font-weight: 700;
    line-height: 9px;
    margin-left: 0px;
    padding-left: 6px;
}
.rep-button, .rep-button:active, .rep-button:focus {
    background: #2b596f;
    border: 1px solid #2b596f;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #2b596f inset;
    color: #ffffff;
    margin: 0px 0px 2px 7px;
float: right;
}
 
.rep-button i, .rep-button svg {
    display: none;
}
 
.postliker, .postlike {
    margin-right: 7px;
    float: left;
}


Installazione Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione del codice Javascript sia attivata, e creiamo un nuovo codice con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function() {
              // General Configuration of the plugin
              var config = {
                position_left : true, // true for left || false for right
                negative_vote : true, // true for negative votes || false for positive only
                vote_bar : true, // display a small bar under the vote buttons
         
                // button config
                icon_plus : '',
                icon_minus : '',
               
              // language config
                title_plus : '',
                title_minus : '',
         
                title_like_singular : '%{VOTES}',
                title_like_plural : '%{VOTES}',
         
                title_dislike_singular : '%{VOTES}',
                title_dislike_plural : '%{VOTES}',
         
                title_vote_bar : '%{VOTES}'
              },
           
    // function bound to the onclick handler of the vote buttons
              submit_vote = function() {
                var next = this.nextSibling, // the counter next to the vote button that was clicked
                    box = this.parentNode,
                    bar = box.getElementsByTagName('DIV'),
                    vote = box.getElementsByTagName('A'),
                    mode = /eval=plus/.test(this.href) ? 1 : 0,
                    i = 0, j = vote.length, pos, neg, percent;
         
                // submit the vote asynchronously
                $.get(this.href, function() {
                  next.innerHTML = +next.innerHTML + 1; // add to the vote count
                  next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
           
                  pos = +vote[0].nextSibling.innerHTML;
                  neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
                  percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
           
                  if (bar[0]) {
                    bar[0].style.display = '';
                    bar[0].firstChild.style.width = percent;
                    box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
                  }
                });
         
                // revoke voting capabilities on the post once the vote is cast
                for (; i < j; i++) {
                  vote[i].href = '#';
                  vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
                  vote[i].onclick = function() { return false };
                }
         
                return false;
              },
           
              vote = $('.vote'), i = 0, j = vote.length,
              version = $('.bodylinewidth')[0] ? 0 :
                        document.getElementById('phpbb') ? 1 :
                        $('.pun')[0] ? 2 :
                        document.getElementById('ipbwrapper') ? 3 :
                        document.getElementById('modernbb') ? 4 :
                        'badapple', // version check
         
              // version data so we don't have to redefine these arrays during the loop
              vdata = {
                tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
                name : [version],
                actions : ['.post-options', '.posting-icons', '.fa_like_div.profile_left'][version]
              },
         
              post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
         
              // prevent execution if the version cannot be determined
              if (version == 'badapple') {
                if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
                return;
              }
         
              for (; i < j; i++) {
                post = $(vote[i]).closest('.post')[0];
                bar = $('.vote-bar', vote[i])[0]; // vote bar
                button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
                pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
                ul = $(vdata.actions, post)[0]; // post actions
                li = document.createElement(vdata.tag); // vote system container
                li.className = 'fa_reputation';
         
                if (li.tagName == 'SPAN') li.style.display = 'inline-block';
         
                // calculate votes
                if (bar) {
                  total = +bar.title.replace(/.*?\((\d+).*/, '$1');
                  percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
           
                  n_pos = Math.round(total * (percent / 100));
                  n_neg = total - n_pos;
                } else {
                  n_pos = 0;
                  n_neg = 0;
                }
         
                // set up negative and positive titles with the correct grammar, votes, and usernames
                title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
                title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
         
                // define the vote counts
                li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
                span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
         
                // create positive vote button
                plus = document.createElement('A');
                plus.href = button[0] ? button[0].href : '#';
                plus.onclick = button[0] ? submit_vote : function() { return false };
                plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
                plus.innerHTML = config.icon_plus;
                plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
         
                span[0] && li.insertBefore(plus, span[0]);
         
                // create negative vote button
                if (config.negative_vote) {
                  minus = document.createElement('A');
                  minus.href = button[1] ? button[1].href : '#';
                  minus.onclick = button[1] ? submit_vote : function() { return false };
                  minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
                  minus.innerHTML = config.icon_minus;
                  minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
           
                  span[1] && li.insertBefore(minus, span[1]);
                }
         
                // create vote bar
                if (config.vote_bar) {
                  vote_bar = document.createElement('DIV');
                  vote_bar.className = 'fa_votebar';
                  vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
                  vote_bar.style.display = bar ? '' : 'none';
                  li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
                  li.appendChild(vote_bar);
                }
         
                // finally insert the vote system and remove the default one
                config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
                vote[i].parentNode.removeChild(vote[i]);
              }
            });
     
    $(window).load(function() {
    $("span.fa_reputation,  .fa_count, .fa_vote, .fa_voted").each(function() {
            $(this).find("a.fa_voted.fa_plus").html('<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
            $(this).find("a.fa_voted.fa_minus").html('<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
            $(this).find("a.fa_vote.fa_plus").html('<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
            $(this).find("a.fa_vote.fa_minus").html('<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
        });
    });
     
    $(window).load(function() {
    $("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
            $(this).find(".postliker").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
    $(window).load(function() {
    $("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
            $(this).find(".postlike").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find(".postliker").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
        });
    });
     
    $(window).load(function() {
    $(".rep-button").each(function() {
            $(this).find(".postlike").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
        });
    });



Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9007
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/

A rozalia piace questo messaggio.

Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.