Colocar melhor resposta

Qual é minha questão:
Queria saber se alguém sabe o código para isso, quando clicar no botão "Obrigado" ficar assim igual o FdF


http://prntscr.com/2xmcat

Endereço do meu fórum:
http://programasparapc.forumeiros.com

Versão do fórum:
PHPBB3

Olá,

Aceda a gestão de Javascripts e adicione este código; 

Código:

$(function(){

$('head').append('<style>#postContent .vote{display:none}</style>');

$('img[title="Obrigado já feito"]').parents('.post').find('.posthead').append('<span id="melhor-resp-icon" style="padding: 5px 10px;background: none repeat scroll 0% 0% rgba(0, 224, 0, 0.3);color: black;font: 12px calibri;position: absolute;margin-top: -1.8%;right: 24%;border: 1px solid black;box-shadow: inset 0 0 2px rgba(0,0,0,0.5);border-radius: 5px;">MELHOR RESPOSTA</span>');

if($('#melhor-resp-icon').length){

$('.post[style*="background-color:"], .post *[style*="background-color:"]').attr('style','');

var nicknameAuthor = $('#melhor-resp-icon').parents('.post').find('h4.username').html();
var posttAuthor = $('#melhor-resp-icon').parents('.post').find('.entry-content').html();

$('.post:first').before('<div id="cont-d" style="padding: 13px 10px 10px;margin-top: 10px;border: 1px solid rgb(173, 173, 173);border-bottom: 5px solid rgb(160, 160, 160);"><span style="padding: 5px 10px;background: none repeat scroll 0% 0% rgba(0, 224, 0, 0.3);color: black;font: 12px calibri;border: 1px solid black;box-shadow: inset 0 0 2px rgba(0,0,0,0.5);border-radius: 5px;">MELHOR RESPOSTA</span>  <b>Por:</b>  '+nicknameAuthor+'<br><br><div id="postContent" style="padding: 10px 10px 10px 5px;background: none repeat scroll 0% 0% rgb(255, 255, 255);border: 1px solid grey;">'+posttAuthor+'</div></div>');
}

});

Coloque o investimento em todas as páginas,

Atenciosamente,
ShiroK

nao funcionou '-'

Olá,

Adicione este código ao seu CSS;

Código:

/*feature box*/
.post_feature_box {
  margin-top: 5px;
  max-width:100%;
  background-color: rgb(234, 248, 226);
  border: 1px dotted rgb(51, 51, 51);
  padding: 6px;
  min-height: 60px;
}
#best-res {
color: #436500;
background: #dfedd1;
text-shadow: rgba(255,255,255,0.8) 0px 1px 0px;
border: 1px solid #accf8b;
border-top: 0;
padding: 0 12px;
height: 30px;
line-height: 30px;
position: relative;
float: right;
margin: -1px -2px 8px 8px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
}
.ipsUserPhoto {
float: left;
padding: 1px;
border: 1px solid #d5d5d5;
background: #fff;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
margin-right: 8px;
}
.ipsUserPhoto:hover {
border-color: #7d7d7d;
}
.ipsUserPhoto img {
width: 50px;
height: 50px;
}
.ipsBadge {
background: #7ba60d;
display: inline-block;
height: 16px;
line-height: 16px;
padding: 0 5px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
vertical-align: middle;
margin-right: 8px;
}

Lembre-se de manter o Javascript anterior ''ativo''.

Atenciosamente,
ShiroK

Boa noite!

Adicione este código Javascript:

Código:

jQuery(function(){
    jQuery('.post[style="background-color:#f4f9fd;"]').prepend('<div id="melhor_reply_fdf" class="profile_user">✓  Melhor Resposta</div>');
    var topicauthor = jQuery('.post #melhor_reply_fdf').parents('.post').find('p.author').html();
    var reply_author_name = jQuery('.post #melhor_reply_fdf').parents('.post').find('.postprofile strong').html();
    var topicavatar = jQuery('.post #melhor_reply_fdf').parents('.post').find('.postprofile dt a img').attr('src');
    var urlavt= jQuery('.post #melhor_reply_fdf').parents('.post').find('.postprofile a').attr('href');
    var topicpost = jQuery('.post #melhor_reply_fdf').parents('.post').find('.topic-title a').attr('href');
    var bestTopic = jQuery('.post #melhor_reply_fdf').parents('.post').find('.content').html();
if(jQuery('#melhor_reply_fdf').length){
    jQuery('.page-title').after('<fieldset id="cont-d"><legend>MELHOR RESPOSTA</legend>
<p>A melhor resposta foi dada pelo usuário   '+reply_author_name+' ! Caso não seja a melhor resposta, use o sistema de busca para obter ajuda necessária ou crie uma nova questão!</p><div id="postContent"><span class="ipsUserPhoto"><img src="'+topicavatar+'" /></span>
<span class="ipsBadge">Melhor Resposta</span> '+topicauthor+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+bestTopic+'</fieldset><a href="'+topicpost+'"><br></div>
        <span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">Ver a mensagem marcada como OBRIGADO. <img class="icon" src="http://i.imgur.com/omzqZnf.png"></span></a>
</div>');}
    });

Em seguida, adicione este CSS:

Código:

legend {
height: 20px;
padding: 9px 0px 0px 0px;
font-size: 1.6em;
font-weight: bold;
color: #00a5cd;
line-height: 100%;
display: block;
}

.ipsUserPhoto {
float: left;
padding: 1px;
border: 1px solid #d5d5d5;
background: #fff;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
margin-right: 8px;
}
.ipsUserPhoto:hover {
border-color: #7d7d7d;
}
.ipsUserPhoto img {
width: 50px;
height: 50px;
}

span#melhor-resp-icon {
background: url(http://i57.servimg.com/u/f57/16/63/75/54/ok10.png) no-repeat;
padding: 16px 15px;
position: absolute;
margin-top: -1.8%;
right: 24%;
}

#cont-d {
margin-top: 10px;
margin: 15px 0px 0px 15px;
padding: 10px 15px 10px 10px !important;
border: 1px solid #cdcdcd;
font-size: 0.9em;
position: relative;
background: #f7f7f7 url(http://2img.net/i/bl/spirale.png) no-repeat;
}

div#postContent {
background-color: #E5F1F9;
padding: 10px 10px 10px 5px;
background-image: url(http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png);
background-position: 50% 100%;
background-repeat: repeat-x;
border: 1px solid rgb(195, 224, 241);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 4px;
box-shadow: 1px 1px 1px;
margin: 3px 1px;
padding-bottom: 8px;
padding-top: 4px;
}

Modifique o valor #f4f9fd do código, para o valor de fundo das mensagens agradecidas em seu fórum. Feito isso, salve.

Atenciosamente,
Shek

@ShiroK
Olá amigo!

Eu sei que você tem uma enorme vontade em responder/ajudar, mas percebi que na maioria das vezes não responde de forma concisa e coerente, neste caso o autor não pediu o código utilizado em outro fórum, e sim o que é utilizado aqui!

Espero que entenda!

---

@HilterHP
Olá amigo, eu testei a postagem do @Shek e funcionou perfeitamente, porém caso não resulte, verifique a cor de fundo da sua melhor resposta e troque nesta parte do código: background-color:#f4f9fd;

Aguardamos seu retorno,

JS

Não apareceu nada :/ o

Como assim não apareceu nada? Você fez tudo o que eu indiquei? O que JScript indicou?  Tente novamente, porque comigo e com JScript funcionou perfeitamente.

Aliás, você só verá o resultado quando acessar uma mensagem sua que agradeceu alguém!   

Eu transformei meu fórum de testes em PUNBB e ficou assim:

http://prntscr.com/2xwudq

Infelizmente não há nada para ser visualizado na imagem que você postou!

JS

Também utilizei o código do Shek e não resultou em nada em meu fórum.

O que poderia estar errado?

CRIADOURO MARTIN escreveu:Também utilizei o código do Shek e não resultou em nada em meu fórum.

O que poderia estar errado?

Olá!

Crie um novo tópico por favor!   

Tópico bloqueado