Boa tarde. Vou explicar a situação desde o começo, é um pouco longo, desculpe qualquer coisa.

Estamos refazendo o fórum, eu sou responsável pelo layout e chamei um amigo para ajudar, este amigo entende de Javascript e jQuery, eu fico com a parte de HTML e CSS. Estávamos fazendo as alterações, quando ele acabou saindo do projeto devido as ocupações da faculdade e eu não consigo ter mais contato com ele. Alguns códigos que ele deixou aplicado no fórum de testes (Clique aqui para acessar) eu consegui entender, como o código das categorias, como pode ver ele fez um código que aplica tags diferentes, e eu percebi que era apenas fazer alterações nos nomes para aplicar em outros locais.

Mas o problema está nos tópicos, clicando aqui você tem uma ideia de como está estruturado os tópicos. Os ícones acima do avatar são para acessar o perfil, enviar mp, a ficha de personagem e as criações, no momento estão por font awesome e não consegui um java para encontrar o seletor das imagens para modificar o conteúdo, como por exemplo, a parte dos ícones da edição de mensagens a direita, eu consegui um código que alterasse e o transformassem em font-awesome.

Uma outra coisa que dá pra perceber, é que tem ícones duplicados, você percebe que o aparece em dois locais diferentes, um na barra colorida e outro no espaço da barra de rolagem no final, eu gostaria de saber como eu faço para não aparecer na barra de baixo, eu não consegui com ele a explicação ou o para fazer sumir.

Terminando,  eu gostaria de saber como eu posso pegar mais alguns dados do perfil e transformar nessa organização aqui pois está apenas ilustrativa, ela aparece quando você passa o mouse pelo avatar.

A estrutura de certa forma tá montada, eu só estou dependente desses java/jQuery para tentar separar as coisas no lugar certo.

Código geral do javascript que ele utilizou, só não contem a parte dos ícones da edição de mensagem, eu coloquei separado:

Código:

$(function () {
  
  /* essas variáveis podem e devem ser alteradas conforme a variação de cor dos grupos */
  
  var cores = [
'rgb(37, 184, 56)', '<div>konohagakure</div>',
'rgb(112, 204, 202)', '<div>kirigakure</div>',
'rgb(153, 44, 44)', '<div>iwagakure</div>',
'rgb(201, 186, 26)', '<div>kumogakure</div>',
'rgb(158, 137, 107)', '<div>sunagakure</div>',

'rgb(166, 166, 166)', '<div>samurai</div>',
'rgb(255, 140, 232)', '<div>civil</div>',

'rgb(255, 140, 0)', '<div>fiscal</div>',
'rgb(15, 46, 250)', 'moderador',
'rgb(170, 0, 255)', 'administrador',
    
'rgb(0, 3, 0)', '<div class="outrasvilas">otogakure</div>',
'rgb(0, 0, 3)', '<div class="outrasvilas">kusagakure</div>',
'rgb(3, 0, 0)', '<div class="outrasvilas">amegakure</div>',
'rgb(0, 5, 0)', '<div class="outrasvilas">yumegakure</div>',
'rgb(0, 0, 5)', '<div class="outrasvilas">takigakure</div>',
'rgb(5, 0, 0)', '<div class="outrasvilas">yugakure</div>',
'rgb(3, 3, 0)', '<div class="outrasvilas">hoshigakure</div>',
'rgb(0, 3, 3)', '<div class="outrasvilas">yukigakure</div>',
'rgb(0, 0, 0)', '<div class="outrasvilas">outras vilas</div>',
    ];
  
  $('.post').each(function () {
    var $this = $(this),
        j = 0, k = 0,
        cor = $this.find('.pickColor span').css('color'),
        icon = $this.find('.profile-fields2 .label:contains("Ícone")').next('.answer').html();
    
    $this.find('.post-head').css('background-color', cor);
    $this.find('.post-miniavatar').html(icon);
    
    /* fundo do post-head com tag do grupo */
    for (i = 0; i < 19; i++) {
      
      if (cor == cores[j]) {
        k = j + 1;
        $this.find('.group-bg').html(cores[k] + ' ' + cores[k] + ' ' + cores[k] + ' ' + cores[k] + ' ' + cores[k] + ' ' + cores[k]);
      }
      
      j = j + 2;
    }
    /* fim fundo do post-head com tag do grupo */    
  });
});