Como obter o quadro de reputação

[Vitor-Vicente]

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Administrador
Navegador usado : Opera
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://mastergz.forumbrasil.net

Descrição do problema

Olá , como colocar o quadro de reputação na versão punBB, eu tinha na versão PHPBB3, mas fiz a conversão , sumiu

http://prntscr.com/6ty9sm

[Shaman]

Olá, vamos lá, é o mesmo código.

Crie um novo JavaScript com investimento nos tópicos com o seguinte código:

Código:

$(document).ready(function() {
$('.pun .post .user').each(function() {
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.user-info .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal"></span>');
if(rep == 0) {
        $('.title', this).text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 30) {
        $('.title', this).text('Iniciante');
}

});
});

Para adicionar mais campos é só copiar e colar mais um else:

Código:

else if(rep >= NUMERO && rep < NUMERO) {
        $('.title', this).text('Nome aqui');
}

Cole antes do

Código:

});
});

acho que isso você sabe.


O css você adiciona este: e as cores nós modificamos de acordo com que você quiser:

Código:

.reputation {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #COR REPUTAÇÃO 1+;
  border-radius: 3px;
  color: #3C763D;
  display: block;
  font-weight: 700;
  margin: 0 auto 5px;
  max-width: 130px !Important;
  min-width: 130px !Important;
  padding: 3px 8px;
  text-align: center;
}
.reputation.zero {
    background: none repeat scroll 0 0 rgba(222,222,222,0.34) !Important;
  color: #COR REPUTAÇÃO 0;
}

Até mais!


Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre JavaScript & jQuery'

[Vitor-Vicente]

Olá , cole antes do , isso nao entendir.

[Shaman]

Caso você queira adicionar mais campos por exemplo:

"Membro ativo" - Você vai copiar um else na abertura e no fechamento. {} então seria isto:

Código:

else if(rep >= NUMERO && rep < NUMERO) {
        $('.title', this).text('Membro ativo');
}

O NUMERO && rep < NUMERO significa isto: Se reputação for menor ou igual a NUMERO e reputação maior que NUMERO faça membro ativo, um exemplo parecido com Algorítimos.

Sobre a parte do cole antes do

Código:

});
});

o código iria ficar assim com o exemplo do Membro ativo

Código:

$(document).ready(function() {
$('.pun .post .user').each(function() {
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.user-info .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal"></span>');
if(rep == 0) {
        $('.title', this).text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 30) {
        $('.title', this).text('Iniciante');
}
else if(rep >= NUMERO && rep < NUMERO) {
        $('.title', this).text('Membro ativo');
}

});
});

Ou seja, colamos o else atras do do fechamento final do código

Código:

});
});

Entendeu?

[Vitor-Vicente]

Ta certo entendir sim ,

meu JS ta assim , ja ta pronto

Código:


$(document).ready(function() {
$(".postprofile dl").each(function(){
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.postprofile dl .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal;color: #ffffff !important;"></span>');
if(rep == 0) {
        $(this).find('.title').text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep <10) {
        $(this).find('.title').text('Iniciante');
}
else if(rep >= 10 && rep < 30) {
        $(this).find('.title').text('Regular');
}
else if(rep >= 30 && rep < 50) {
        $(this).find('.title').text('Bom');
}
else if(rep >= 50 && rep < 100) {
        $(this).find('.title').text('Ótimo');
}
else if(rep >= 100 && rep < 200) {
        $(this).find('.title').text('Pleno');
}
else if(rep >= 200 && rep <500) {
        $(this).find('.title').textt('Excelente');
}
else if(rep >= 500 && rep < 1000) {
$(this).find('.title').text('Expert');

}
else if(rep >= 1000) {
        $(this).find('.title').text('Vip  Master');
}
});
});

[Shaman]

Isso, agora só aplicar o CSS e modificar as cores , quando resolvido comente o tópico por gentileza ou o marque como resolvido ok?

Tabela de cores hexadecimal: http://erikasarti.net/html/tabela-cores/

Até mais!

[Vitor-Vicente]

Shaman, vc observou que o inicio do JS são diferente, eu acho que foi por isso q parou de funcionar.

[Shaman]

Troque o JS por este e personalize o CSS de acordo com seu gosto

Código:

$(document).ready(function() {
$('.pun .post .user').each(function() {
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.user-info .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal"></span>');
if(rep == 0) {
        $('.title', this).text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep <10) {
        $(this).find('.title').text('Iniciante');
}
else if(rep >= 10 && rep < 30) {
        $(this).find('.title').text('Regular');
}
else if(rep >= 30 && rep < 50) {
        $(this).find('.title').text('Bom');
}
else if(rep >= 50 && rep < 100) {
        $(this).find('.title').text('Ótimo');
}
else if(rep >= 100 && rep < 200) {
        $(this).find('.title').text('Pleno');
}
else if(rep >= 200 && rep <500) {
        $(this).find('.title').textt('Excelente');
}
else if(rep >= 500 && rep < 1000) {
$(this).find('.title').text('Expert');

}
else if(rep >= 1000) {
        $(this).find('.title').text('Vip  Master');
}

});
});

[Vitor-Vicente]

Shaman , deu ruim la.

http://prntscr.com/6tzblp

http://prntscr.com/6tzbvh

[Shaman]

Me passe o CSS que você utilizou para por o efeito por gentileza.

[Vitor-Vicente]

Código:

.reputation {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #COR REPUTAÇÃO 1+;
  border-radius: 3px;
  color: #3C763D;
  display: block;
  font-weight: 700;
  margin: 0 auto 5px;
  max-width: 130px !Important;
  min-width: 130px !Important;
  padding: 3px 8px;
  text-align: center;
}
.reputation.zero {
    background: none repeat scroll 0 0 rgba(222,222,222,0.34) !Important;
  color: ##00FF00 REPUTAÇÃO 0;
}


[Shaman]

Troque por este:

Código:

.reputation {
  background-color: #2F8948;
  border-radius: 3px;
  color: #B8B8B8;
  font-weight: 700;
  margin: 0 -8px 0;
  max-width: 130px!important;
  min-width: 130px!important;
  padding: 3px 8px;
  text-align: center;
  display: inline-block;
}
.reputation.zero {
  background: none repeat scroll 0 0 rgba(222,222,222,0.34) !Important;
  color: #00FF00;
}


Até mais!

[Vitor-Vicente]

Olá

http://prntscr.com/6tzxep esta repetindo a palavra iniciante e a cor de inciante não vai bem

[Shaman]

Olá, troque o JavaScript por este:

Código:

$(document).ready(function() {
$('.pun .post .user').each(function() {
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.user-info .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal"></span>');
if(rep == 0) {
        $('.title', this).text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 10) {
        $('.title', this).text('Iniciante');
}
else if(rep >= 10 && rep < 30) {
        $('.title', this).text('Regular');
}
else if(rep >= 30 && rep < 50) {
        $('.title', this).text('Bom');
}
else if(rep >= 50 && rep < 100) {
        $('.title', this).text('Ótimo');
}
else if(rep >= 100 && rep < 200) {
        $('.title', this).text('Pleno');
}
else if(rep >= 200 && rep < 500) {
        $('.title', this).text('Exelente');
}
else if(rep >= 1 && rep < 10) {
        $('.title', this).text('Iniciante');
}
else if(rep > 500) {
        $('.title', this).text('Expert');
}
});
});

Depois trocaremos a cor.

[Vitor-Vicente]

Shaman , ficou assim

http://prntscr.com/6u09jc

https://ajuda.forumeiros.com/t98975-referente-ao-quadro-de-reputacao foi vc mesmo que ajudou

[Sennior]

Saudações,

Poderia deixar o código ativo em teu fórum?
E mande também um link de algum tópico do seu fórum que possamos ver o quadro da reputação.

Até mais.

[Vitor-Vicente]

Olá, os código ativos, são esses

Código:

.reputation {
  background-color: #2F8948;
  border-radius: 3px;
  color: #B8B8B8;
  font-weight: 700;
  margin: 0 -8px 0;
  max-width: 130px!important;
  min-width: 130px!important;
  padding: 3px 8px;
  text-align: center;
  display: inline-block;
}
.reputation.zero {
  background: none repeat scroll 0 0 rgba(222,222,222,0.34) !Important;
  color: #00FF00;
}

Código:

$(document).ready(function() {
$('.pun .post .user').each(function() {
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.user-info .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal"></span>');
if(rep == 0) {
        $('.title', this).text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 10) {
        $('.title', this).text('Iniciante');
}
else if(rep >= 10 && rep < 30) {
        $('.title', this).text('Regular');
}
else if(rep >= 30 && rep < 50) {
        $('.title', this).text('Bom');
}
else if(rep >= 50 && rep < 100) {
        $('.title', this).text('Ótimo');
}
else if(rep >= 100 && rep < 200) {
        $('.title', this).text('Pleno');
}
else if(rep >= 200 && rep < 500) {
        $('.title', this).text('Exelente');
}
else if(rep >= 1 && rep < 10) {
        $('.title', this).text('Iniciante');
}
else if(rep > 500) {
        $('.title', this).text('Expert');
}
});
});

Resultado desejado é esse

http://prntscr.com/6ue6cp

http://prntscr.com/6ue7hh

[Sennior]

Saudações,

Aceda ao teu Painel administrativo:
CPainel ->> Módulos ->> HTML & JAVASCRIPT ->> Gestão dos Códigos JavaScript
Crie um novo JavaScript com investimento nos tópicos:

Código:

$(document).ready(function() {
$(".pun .post .user").each(function(){
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.user-info .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal"></span>');
if(rep == 0) {
        $('.title', this).text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 5) {
        $('.title', this).text('Iniciante');
}
else if(rep >= 5 && rep < 10) {
        $('.title', this).text('Membro ativo');
}
else if(rep >= 10) {
        $('.title', this).text('Excelente');
}
});
});

Logo após, aceda na Folha de Estilo CSS:
CPainel ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilos CSS

Código:

.reputation {
  background-color: rgb(141, 177, 62)!important;
  background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);
  border-radius: 3px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  display: block;
  margin: 0 auto;
  margin-bottom: 3px;
  padding: 3px 7px;
  max-width: 125px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px;
  background-position: 0px 1px;
  background-repeat: repeat no-repeat;
}
.reputation.zero {
  background-color: rgb(16, 16, 16)!important;
  color: rgb(255, 255, 255);
}

Entendendo o código acima, o senhor poderá localizar esta parte do código:

Código:

else if(rep >= 1 && rep < 5) {
        $('.title', this).text('Iniciante');
}

Isso significa que membros com reputação igual ou maior que 1, e menor do que 5 terão o título de iniciante. Onde está escrito :contains("Reputação") se aplicará o efeito. Se o seu campo de reputação estiver com outro nome, basta mudar no código nesta parte.

Até mais.
Sennior

[Vitor-Vicente]

Olá, não está dando certo

ficou assim

http://prntscr.com/6wrw7g

Código:

$(document).ready(function() {
$(".pun .post .user").each(function(){
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.user-info .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal"></span>');
if(rep == 0) {
        $('.title', this).text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 10) {
        $('.title', this).text('Iniciante');
}
else if(rep >= 10 && rep < 30) {
        $('.title', this).text('Regular');
}
else if(rep >= 30 && rep < 50) {
        $('.title', this).text('Bom');
}
else if(rep >= 50 && rep < 100) {
        $('.title', this).text('Ótimo');
}
else if(rep >= 100 && rep < 200) {
        $('.title', this).text('Pleno');
}
else if(rep >= 200 && rep < 500) {
        $('.title', this).text('Exelente');
}
else if(rep > 500) {
        $('.title', this).text('Expert');
}
});
});

Código:


.reputation {
  background-color: rgb(141, 177, 62)!important;
  background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);
  border-radius: 3px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  display: block;
  margin: 0 auto;
  margin-bottom: 3px;
  padding: 3px 7px;
  max-width: 125px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px;
  background-position: 0px 1px;
  background-repeat: repeat no-repeat;
}
.reputation.zero {
  background-color: rgb(16, 16, 16)!important;
  color: rgb(255, 255, 255);
}


[Pastrana]

@Vitor-Vicente

No seu template viewtopic_body procure por:

Código:

<!-- BEGIN profile_field -->

e

Código:

<!-- END profile_field -->

Troque o conteúdo deles por:

Código:

<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->


Pastrana

[Vitor-Vicente]

Olá , eu achei ele aqui e esta assim

Código:


                                                          <!-- BEGIN profile_field -->
                        <div class="custom_field"> <div class="post_field">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}</div></div>
                        <!-- END profile_field -->

troquei só essa parte aqui

Código:

{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}

por essa abaixo

Código:

{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

o numero da reputação ficou certo ele subiu,  mas continua repetindo a palavra abaixo  neutro , iniciante. etc..

http://prntscr.com/6wv8ed

[Pastrana]

Tem que ficar somente isso:

Código:

 
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->


Não se esqueça de publicar o template!

Pastrana

[Vitor-Vicente]

Olá, deu certo, só faltou um espaço aqui

http://prntscr.com/6wvet0

pra ficar igual esse

http://prntscr.com/6ue6cp

[Pastrana]

No seu CSS procure por:

Código:

.reputation

Antes do final do colchetes  "}" , adicione:

Código:

margin-top: 5px !important;

Resultado final tem que ficar assim:

Código:

.reputation {
    background-color: #8DB13E !important;
    background-image: url("http://i38.servimg.com/u/f38/17/31/71/58/highli10.png");
    background-position: 0px 1px;
    background-repeat: repeat no-repeat;
    border-radius: 3px;
    color: #FFF;
    display: block;
    font-weight: 700;
    margin: 0px auto 3px;
    max-width: 125px;
    padding: 3px 7px;
    text-align: center;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.298);
    margin-top: 5px !important;
}

Preview:

Spoiler:

[Vitor-Vicente]

Ok, vlw , deu certo.

[Sennior]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.