Two Like button appearing on post

Hello,

I just have this problem regarding the like button.

But first, I will give the history how this button appear like that.

On my forum I had installed the like system from avac.

When I tried installed the best answer code [Tutorial here], that's the time I already encounter two like button.

Note: The two like button only appear on the post that has been chosen as best answer.

screenshot: 



Forum:

Code:

http://phedu.forums.fm/

Version: Punbb

Hello blitzkrieg,

Replace your best answer script with this :

Code:

$(function(){
    $('.post[style="background-color:#ff0000;"] .posthead h2').append('<span id="best-res"">Best Answer</span>');
    if ($('#best-res').length) $('.main.paged').before('<div class="post_feature_box"><span class="ipsUserPhoto"><img src="'+$('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src')+'" /></span><span class="ipsBadge">Best Answer</span> '+$('.post #best-res').parents('.post').find('.user .username a').html()+', '+$('.post #best-res').parents('.post').find('.posthead h2 .data-post').html()+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+$('.post #best-res').parents('.post').find('.entry-content div').html()+'</div><a href="'+$('.post #best-res').parents('.post').find('.posthead a').attr('href')+'"><span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">Go to the Full Post <img class="icon" src="http://i.imgur.com/omzqZnf.png"></span></a></div>');
});

Remember to change the thank color : #ff0000

Ange Tuteur wrote:Hello blitzkrieg,

Replace your best answer script with this :

Code:

$(function(){
    $('.post[style="background-color:#ff0000;"] .posthead h2').append('<span id="best-res"">Best Answer</span>');
    if ($('#best-res').length) $('.main.paged').before('<div class="post_feature_box"><span class="ipsUserPhoto"><img src="'+$('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src')+'" /></span><span class="ipsBadge">Best Answer</span> '+$('.post #best-res').parents('.post').find('.user .username a').html()+', '+$('.post #best-res').parents('.post').find('.posthead h2 .data-post').html()+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+$('.post #best-res').parents('.post').find('.entry-content div').html()+'</div><a href="'+$('.post #best-res').parents('.post').find('.posthead a').attr('href')+'"><span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">Go to the Full Post <img class="icon" src="http://i.imgur.com/omzqZnf.png"></span></a></div>');
});

Remember to change the thank color : #ff0000

Hello Sir Ange,

The two like button was solved, only one button is now appearing on the post.

The problem is the best answer is not appearing anymore both on the post and the box on top of the post.

Have you change the thanked post color to the one that is in the AP ?
( Administration panel > Display > Colors )

Change the #ff0000 here, to the color in the AP :

Code:

[style="background-color:#ff0000;"]

Ange Tuteur wrote:Have you change the thanked post color to the one that is in the AP ?
( Administration panel > Display > Colors )

Change the #ff0000 here, to the color in the AP :

Code:

[style="background-color:#ff0000;"]

Yeah I change it.. The color changed but the word best answer did not appear on the post the same thing with the box on top of the post.

What was the code that you used before ?

Ange Tuteur wrote:What was the code that you used before ?

This is the code:

Code:

$(function(){$('.posthead[style="background-color:#e9f7e1;"]').append('<div id="best-res" class="answerBadgeInPost">✓  Best Answer</div>').attr('style','background-image:-moz-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,255,255,0.3)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-o-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:linear-gradient(to bottom,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);-webkit-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;-moz-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;background:#dfedd1;text-shadow:rgba(255,255,255,0.8)0px 1px 0px;border:1px solid#accf8b;');
        var topicauthor = $('.posthead #best-res').parents('.posthead').find('.creator').html();
                var topicavatar = $('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
                var urlavt= $('.post best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a').attr('href');

var topicpost = $('.post #best-res').parents('.post').find('a.post-id').attr('href');

           
                var topicdata = $('.post #best-res').parents('.post').find('span.data-post').html();
          var bestTopic = $('.post #best-res').parents('.post').find('.entry-content').html();
        if($('#best-res').length){
                $('.main.paged').before('<div class="post_feature_box">
            <span class="ipsUserPhoto"><img src="'+topicavatar+'" /></span>
            <span class="ipsBadge">Best Answer &nbsp;</span>Posted by:&nbsp; ' + topicauthor+'
        &nbsp;-&nbsp; ' +topicdata+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+bestTopic+'</div>  <a href='+topicpost+'><span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">View full post  <img class="icon" src="http://i.imgur.com/omzqZnf.png" /></span></a>
            </div>');}
                });

With this code, everything works fine for the best answer except for the like button which appear in two.

When I use your code the two button was solved but the best answer didn't appear anymore.

Try now :

Code:

$(function(){$('.posthead[style="background-color:#e9f7e1;"]').append('<div id="best-res" class="answerBadgeInPost">✓  Best Answer</div>').attr('style','background-image:-moz-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,255,255,0.3)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-o-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:linear-gradient(to bottom,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);-webkit-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;-moz-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;background:#dfedd1;text-shadow:rgba(255,255,255,0.8)0px 1px 0px;border:1px solid#accf8b;');
        var topicauthor = $('.posthead #best-res').parents('.posthead').find('.creator').html();
                var topicavatar = $('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
                var urlavt= $('.post best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a').attr('href');

var topicpost = $('.post #best-res').parents('.post').find('a.post-id').attr('href');

         
                var topicdata = $('.post #best-res').parents('.post').find('span.data-post').html();
          var bestTopic = $('.post #best-res').parents('.post').find('.entry-content div').html();
        if($('#best-res').length){
                $('.main.paged').before('<div class="post_feature_box">
            <span class="ipsUserPhoto"><img src="'+topicavatar+'" /></span>
            <span class="ipsBadge">Best Answer &nbsp;</span>Posted by:&nbsp; ' + topicauthor+'
        &nbsp;-&nbsp; ' +topicdata+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+bestTopic+'</div>  <a href='+topicpost+'><span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">View full post  <img class="icon" src="http://i.imgur.com/omzqZnf.png" /></span></a>
            </div>');}
                });

Ange Tuteur wrote:Try now :

Code:

$(function(){$('.posthead[style="background-color:#e9f7e1;"]').append('<div id="best-res" class="answerBadgeInPost">✓  Best Answer</div>').attr('style','background-image:-moz-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,255,255,0.3)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-o-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:linear-gradient(to bottom,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);-webkit-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;-moz-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;background:#dfedd1;text-shadow:rgba(255,255,255,0.8)0px 1px 0px;border:1px solid#accf8b;');
        var topicauthor = $('.posthead #best-res').parents('.posthead').find('.creator').html();
                var topicavatar = $('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
                var urlavt= $('.post best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a').attr('href');

var topicpost = $('.post #best-res').parents('.post').find('a.post-id').attr('href');

          
                var topicdata = $('.post #best-res').parents('.post').find('span.data-post').html();
          var bestTopic = $('.post #best-res').parents('.post').find('.entry-content div').html();
        if($('#best-res').length){
                $('.main.paged').before('<div class="post_feature_box">
            <span class="ipsUserPhoto"><img src="'+topicavatar+'" /></span>
            <span class="ipsBadge">Best Answer &nbsp;</span>Posted by:&nbsp; ' + topicauthor+'
        &nbsp;-&nbsp; ' +topicdata+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+bestTopic+'</div>  <a href='+topicpost+'><span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">View full post  <img class="icon" src="http://i.imgur.com/omzqZnf.png" /></span></a>
            </div>');}
                });

Almost Sir Ange, like button are ok, the best answer on post the box are appearing already the only problem now is the post doesn't appear inside the answer box the one on top of the post.

Screenshot:

Try this :

Code:

$(function(){
  $('.posthead[style="background-color:#e9f7e1;"]').append('<div id="best-res" class="answerBadgeInPost">✓  Best Answer</div>').attr('style','background-image:-moz-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,255,255,0.3)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-o-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:linear-gradient(to bottom,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);-webkit-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;-moz-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;background:#dfedd1;text-shadow:rgba(255,255,255,0.8)0px 1px 0px;border:1px solid#accf8b;');
  var topicauthor = $('.posthead #best-res').parents('.posthead').find('.creator').html();
  var topicavatar = $('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
  var urlavt= $('.post best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a').attr('href');
  var topicpost = $('.post #best-res').parents('.post').find('a.post-id').attr('href');
  var topicdata = $('.post #best-res').parents('.post').find('span.data-post').html();
  var bestTopic = $('.post:has(#best-res) .entry-content').text();
  if($('#best-res').length){
  $('.main.paged').before('<div class="post_feature_box"><span class="ipsUserPhoto"><img src="'+topicavatar+'" /></span><span class="ipsBadge">Best Answer &nbsp;</span>Posted by:&nbsp; ' + topicauthor+'&nbsp;-&nbsp; ' +topicdata+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+bestTopic+'</div>  <a href='+topicpost+'><span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">View full post  <img class="icon" src="http://i.imgur.com/omzqZnf.png" /></span></a></div>');}
});

Ange Tuteur wrote:Try this :

Code:

$(function(){
  $('.posthead[style="background-color:#e9f7e1;"]').append('<div id="best-res" class="answerBadgeInPost">✓  Best Answer</div>').attr('style','background-image:-moz-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,255,255,0.3)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-o-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:linear-gradient(to bottom,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);-webkit-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;-moz-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;background:#dfedd1;text-shadow:rgba(255,255,255,0.8)0px 1px 0px;border:1px solid#accf8b;');
  var topicauthor = $('.posthead #best-res').parents('.posthead').find('.creator').html();
  var topicavatar = $('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
  var urlavt= $('.post best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a').attr('href');
  var topicpost = $('.post #best-res').parents('.post').find('a.post-id').attr('href');
  var topicdata = $('.post #best-res').parents('.post').find('span.data-post').html();
  var bestTopic = $('.post:has(#best-res) .entry-content').text();
  if($('#best-res').length){
  $('.main.paged').before('<div class="post_feature_box"><span class="ipsUserPhoto"><img src="'+topicavatar+'" /></span><span class="ipsBadge">Best Answer &nbsp;</span>Posted by:&nbsp; ' + topicauthor+'&nbsp;-&nbsp; ' +topicdata+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+bestTopic+'</div>  <a href='+topicpost+'><span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">View full post  <img class="icon" src="http://i.imgur.com/omzqZnf.png" /></span></a></div>');}
});

Your such a genius!.. This works.. Thank for the support Sir Ange...

You're welcome

Topic archived