Desbugar campos do perfil

Detalhes da questão

Endereço do fórum: exercito-bpf.foumeiro.com/forum
Versão do fórum: PunBB

Descrição

https://imgur.com/a/QrwqS
A descrição do rank não aparece, o campo do perfil ''patente'' fica em cima do rank atrapalhando, o icone de online, fica em cima do rank (se poder coloca ao lado do nick), Tenho um código que muda o campo mensagens que é ''Mensagens Números'' Exemplo: Mensagens: 8545. E esse código que tenho é ''Números posts'' Exemplo: 154 posts Porém como vocês podem ver, só aparece o nome posts e não da nenhuma outra modificação.

E tenho esse campo ExGold no perfil, eu gostaria de Coloca como o Posts IPB, pimeiro números e depois o nome ExGold.

Olá,

Grande parte dos códigos que "mudam" o aspecto das mensagens são os responsáveis pela aparência anormal.

Vá em Painel de controle Visualização Imagens e Cores Cores Folha de estilo CSS e adicione o seguinte código ao final da caixa de texto:

Código:

/* Fix broken stuff */

div.pun .postbody .user .user-ident .user-basic-info {
  font-size: initial !important;
  margin-bottom: 0 !important;
}

div.pun .postbody .user .user-ident .user-basic-info > img:last-of-type {
  margin-top: 5px;
}

div.postbody .user-info > dd:nth-child(1) > div {
  margin-top: 0;
}

div.postbody .user-info dd:nth-child(1) .post_field:after,
div.postbody .user-info dd:nth-child(3) .post_field:after {
  content: "";
}

div.postbody .user-info dd:nth-child(1) .post_field:after,
div.postbody .user-info dd:nth-child(3) .post_field:after,
div.postbody .user-info > dd:nth-child(3) > div {
  margin-top: 0;
}

/* Probably broken stuff */

div.postbody .user-info dd {
  display: inline;
}

div.postbody .user-info dd:after {
  content: "\A";
  white-space: pre;
  display: block;
  margin-bottom: -1em;
}

div.postbody .user-info dd .post_field {
  display: inline-block;
}

div.postbody .user-info dd .label {
  float: right;
  margin-left: 5px;
  font-size: 0 !important;
}

div.postbody .user-info dd .label b {
  font-size: initial !important;
  line-height: 14px;
}

div.postbody .user-info dd .reputation .label b {
  line-height: 18px;
}

/* Definitely broken stuff (nth-child is bad) */

div.postbody .user-info dd:nth-child(2) .label b {
  font-size: 0 !important;
}

div.postbody .user-info dd:nth-child(2) .post_field .label:before {
  content: " posts";
  font-size: 12px;
  color: #b32222;
  line-height: 1.3em;
  font-weight: 700;
}

^-^

A ''reputação'' não ta centralizado corretamente, teria como arrumar?

Eu tinha um código que eu peguei para deixa o campo mensagens, com os IPB, no caso 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: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('');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 5) {
        $(this).find('.title').text('');
}
else if(rep >= 5 && rep < 10) {
        $(this).find('.title').text('');
}
else if(rep >= 10) {
        $(this).find('.title').text('');
}
});
});

Código:

/*
* Código: IPB Like System.
* Data de criação: 18/07/2014.
* Atualização: 16/02/2015.
* Autor: Daemon.
* Versão: 1.2.
* Inspirado: IPB.
* Acesse: http://bestskins.net.
* Não distribuir, ou remover os créditos do autor.
*/
function bestskins_ls() {
 
  // Imagem de reputação
  var reput_UP = 'http://i.imgur.com/PTraX1a.png';
 
  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var 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"><img src="' + reput_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reput_UP + '" alt="+" class="rep_up"></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>';
    $('div.postfoot', vote.parentNode.parentNode.parentNode.parentNode).after( 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();
      });
}

Esse código é ótimo, eu utilizava, porém quando eu coloquei outra skin pra testar, tive que retira todos os códigos. Ai voltei a com a skin atual do meu fórum, e bugou essa parte, eu gostaria de arrumar, o código que você me passou arrumou, porém o campo mensagem não ta como o da IPS.

No caso era pra o perfil fica assim: https://imgur.com/RM9Y74n
Teria como deixa-lo assim?

Não encontrei o CSS que lhe passei no fórum. O senhor o removeu?

---

Para corrigir a reputação, em adição ao CSS passado anteriormente, adicione ao CSS:

Código:

div.postbody .user-info dd .reputation {
  font-size: 16px;
}

div.postbody .user-info dd .reputation .label {
  float: none;
  font-size: initial !important;
  margin-left: 0;
  margin-right: 5px;
}

div.postbody .user-info dd .reputation .label span {
  color: inherit !important;
}

---

Para deixar do jeito da imagem de exemplo, teria que:

• Remover o texto "→ Fundador"
  
• Remover o ExGold
  
• Remover a imagem de "patente" (Ex.: Comandante Operacional)

Está correto isso?

Bom, Kyo, vamos começa do zero, acho que você não entendeu. O que eu quero fazer , é retira o ponto verde de cima do rank, e deixa ele do lado esquerdo do nick. E depois tira a patente, de cima do rank, e também coloca para aparecer a descrição do rank. Depois disso explicarei a outro parte que envolve o JS.

Okay,

Primeiro adicione as peças de CSS que passei anteriormente. Após, seguindo as orientações desse tópico, em Painel de Controle Visualização Templates Geral, passe-nos o conteúdo do viewtopic_body.

Deu os efeitos que eu queria Kyo, porém to falando esse campo que eu marquei em preto que você modificou: https://imgur.com/mGzf2Re As letras tão grandes e eu já tenho um código para deixa-lo como esse que marquei em preto aqui: https://imgur.com/ivwo4Xh que no caso é esse 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) {
        $(this).find('.title').text('');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 5) {
        $(this).find('.title').text('');
}
else if(rep >= 5 && rep < 10) {
        $(this).find('.title').text('');
}
else if(rep >= 10) {
        $(this).find('.title').text('');
}
});
});

Código:

/*
* Código: IPB Like System.
* Data de criação: 18/07/2014.
* Atualização: 16/02/2015.
* Autor: Daemon.
* Versão: 1.2.
* Inspirado: IPB.
* Acesse: http://bestskins.net.
* Não distribuir, ou remover os créditos do autor.
*/
function bestskins_ls() {
 
  // Imagem de reputação
  var reput_UP = 'http://i.imgur.com/PTraX1a.png';
 
  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var 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"><img src="' + reput_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reput_UP + '" alt="+" class="rep_up"></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>';
    $('div.postfoot', vote.parentNode.parentNode.parentNode.parentNode).after( 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();
      });
}

O que eu quero é o mesmo efeito, porém esse código não ta pegando mais não sei pq. Quero arrumar isso. Agora acho q você entendeu.

@EDIT

Criei uma questão explicando melhor, pode fechar.