Reputação IPB

Detalhes da questão

Endereço do fórum: http://tudo2family.forumeiros.com/
Versão do fórum: PunBB

Descrição

Bom, quero mudar estilo de reputação do meu fórum.
já vi alguns tópicos, aqui com o mesmo pedido porem em meu fórum não obteve resultado!

Reputação como eu quero:

Fórum onde vi: http://www.wasdev.in/

Olá,

JS - Nos tópicos.

Código:

function bestskins_ls() {
    for (var x = $('.vote'), i = 0, vote; (vote = x[i++]) ; ) {
        var count = 0
          , qtd = 0
          , barra = $('.vote-bar', vote)[0]
          , botao = $('.vote-button', vote)[0];
        if (barra) {
            var numbarra = barra.title.match(/\d+/g);
            qtd = Math.round(parseInt(numbarra[1]) * parseInt(numbarra[0])) / 100
        }
        botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><div class="rep_up"></div></span></li>' : '<li style="display: none;"><div class="rep_up"></div></li>';
        var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
        var htmlFinal = '<div class="rep_bar clearfix" id="rep_post">' + '      <ul class="bs_inline">' + botao + numrep + '</ul>' + '</div>';
        $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before(htmlFinal)
    }
    x.remove()
}
;function bestskinsVoto(b, a) {
    a.onclick = '#';
    $.get(b, function() {
        a.parentNode.style.display = 'none';
        var verify = a.parentNode.nextSibling.firstChild.innerHTML;
        if (verify == 0) {
            a.parentNode.nextSibling.firstChild.classList.remove('zero'),
            a.parentNode.nextSibling.firstChild.classList.add('positive')
        }
        var c = a.parentNode.nextSibling.firstChild
          , b = parseInt(/\d+/.exec(c.innerHTML)[0]) + 1;
        c.innerHTML = c.innerHTML.replace(/\d+/, b)
    })
}
;if (document.readyState === 'complete') {
    bestskins_ls()
} else {
    document.addEventListener('DOMContentLoaded', function() {
        bestskins_ls()
    })
}

CSS:

Código:

.reputation {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #6f8f52;
    border-radius: 3px;
    border-top: 1px solid rgba(0,0,0,.20);
    bottom: -7px;
    color: #fff;
    display: inline-block;
    font-family: Ubuntu;
    font-size: 12px;
    font-weight: 700;
    margin: 5px;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0,0,0,0.14);
    text-transform: uppercase;
}

Até mais.

Não Resultou GSCode.

Olá!

Siga este tutorial: https://ajuda.forumeiros.com/t64222-

Obrigado por sua dúvida.

Até mais!

Olá Shek.

eu já segui este tutorial também, porem queria como está na imagem é possível?

E aí, colega? Tudo joia?

Você pode seguir os passos desse tutorial: https://ajuda.forumeiros.com/t93881-, mas troque o código CSS sugerido por esse:

Código:

.reputation, .reputation.zero {
  background-color: #597127!important;
  background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);
  border--radius: 3px;
  text-transform: uppercase;
  color: white;
  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;
}

Vá pela sombra!

Opá tudo sim obg.

Ficou assim:

Até logo

Cuidado com ups antes do período de 24 horas,

Troque seu JS por esse:

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 .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) {
        $(this).find('.title').text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 5) {
        $(this).find('.title').text('Iniciante');
}
else if(rep >= 5 && rep < 10) {
        $(this).find('.title').text('Membro ativo');
}
else if(rep >= 10) {
        $(this).find('.title').text('Excelente');
}
});
});

Ficou certinho cepheus.

porem teria como diminuir as largura dos lado e deixar um verde claro ?

No css postado pelo Key of Destiny :
https://ajuda.forumeiros.com/t104749-reputacao-ipb#730148

Repare no seletor: .reputation, .reputation.zero

Código:

background-color: #597127!important;

Onde está: #597127
Troque por: #94C136

Repare também em:

Código:

max-width: 125px;

Onde está: 125px;
Troque por: 100px;

Resolvido obrigado Cepheus