Como colocar tags nos tópicos e nos últimos assuntos

Detalhes da questão

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

Descrição

Olá, eu gostaria de um código para que eu pudesse adicionar tags aos tópicos, como na imagem abaixo, onde está verde:


Onde cada tag fosse de uma cor, a de cima da imagem é verde, outra seria azul, outra vermelha. Eu tentei criar pelo "Ícone de Mensagens", tentei por uma imagem, fui lá no tópico selecionei o ícone, salvei, mas ele não aparece ao lado dos nomes dos tópicos, por isso preciso de um código para funcionar.

E também queria que aparecesse a tag não só no fórum, mas também no widget "Últimos Assuntos".

Alguém pode me ajudar? Obrigado.

Olá,

Crie um novo JavaScript investido em todas as páginas, com o código:

Código:

/*
 *! Inserir tags antes do título do tópico.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';

  var tags = [
    {
      title: 'imagem', // Aqui você escolhe o conteúdo que irá virar a TAG. Não é necessário colocá-lo entre colchetes.
      background: 'red' // Você pode inserir qualquer tipo de cor de fundo, em inglês, hexadecimal, RGB, etc.
    }, // Coloque vírgula em cada grupo, exceto no último.
    {
      title: 'widget',
      background: '#000'
    } // Não coloque vírgula no último grupo!
  ];
 
  $(function () {

    var $target = $('.js-marquee a, a.topictitle');
    $target.each(function () {

      var $this = $(this);

      $.each(tags, function (index, tag) {

        var regExp = new RegExp ('\\[' + tag.title + '\\]', 'gim');
        var text = $this.text();

        if (!regExp.test(text)) {
          return;
        }

        $this.text(text.trim().replace(regExp, ''));
        $this.before('<span class="fa-topic-tag" style="background-color: ' + tag.background + ';">' + tag.title + '</span>');
       
      });
    });

    console.log([
      'As tags de tópicos foram trocadas.',
      'Caso hajam erros durante a troca, contate o suporte técnico.'
    ].join('\n'));

    var styles = [
      'span.fa-topic-tag {',
      '  color: #fff;',
      '  background-color: #39c;',
      '  padding: 1px 5px;',
      '  border-radius: 3px;',
      '  margin-right: 4px;',
      '  display: inline-block;',
      '}'
    ].join('\n');

    $(['<style type="text/css">', styles, '<style>'].join('\n')).appendTo('head');
  });
}(jQuery));

No código acima, temos essa parte:

Código:

var tags = [
  {
    title: 'imagem', // Aqui você escolhe o conteúdo que irá virar a TAG. Não é necessário colocá-lo entre colchetes.
    background: 'red' // Você pode inserir qualquer tipo de cor de fundo, em inglês, hexadecimal, RGB, etc.
  }, // Coloque vírgula em cada grupo, exceto no último.
  {
    title: 'widget',
    background: '#000'
  } // Não coloque vírgula no último grupo!
];

• Em

  title

  , você irá colocar o conteúdo que irá virar a tag. Lembre-se que não é necessário incluir colchetes ( [ e ] ). O script já as coloca automaticamente.
  
• Em

  background

  , você coloca a cor de fundo da tag para aquela palavra.
  

Feito isso, crie um título do tópico desse jeito:

[ TAG QUE VOCÊ COLOCOU NO SCRIPT ] Título normal [...]

No mais, leia as anotações no código.

o/

Olá Luiz, então funcionou aqui mas eu queria saber se em vez de adicionar manualmente o nome da tag no título do tópico, eu possa criar as opções das tags para os usuários selecionarem e quando publicarem o tópico automaticamente aparecer a tag no título.

Usando, por exemplo, a opção Ícone do Assunto, a pessoa seleciona, posta o tópico e aparece automático a tag no título, é possível?

A melhor forma de fazer isso é usando os ícones de mensagens!
Leia:
-> https://ajuda.forumeiros.com/t8479-faq-adicionar-icones-de-mensagens

o/

Mas então, eu estava tentando usar o ícone de mensagens, mas ele não aparece ao lado dos tópicos. Acho que é meu tema que é bugado ou falta algum código. Veja, eu selecionei o ícone no tópico:


E quando vou ver, ele não aparece ao lado dos nomes nos tópicos nem no widget Últimos assuntos:


Por isso eu queria tentar por um código, porque pelo ícone de Assuntos não consegui. Poderia me ajudar a resolver? Eu queria que o ícone aparecesse ao lado do nome dos tópicos no fórum e também no widget Últimos assuntos.

O código que passei nessa mensagem funciona perfeitamente.
Releia esta mensagem (clique).

Veja:
-> http://prntscr.com/fmzo0r

Como resultado, temos:
-> http://prntscr.com/fmzoha

Fonte:
-> Clique aqui.

Sim, está funcionando perfeitamente, já estou usando, muito obrigado. O que eu queria saber agora é se em vez de eu ter que adicionar a tag manualmente no título do tópico, ter a opção do usuário selecioná-la como na imagem:

E quando enviar o tópico, aparecer automaticamente no título a tag selecionada. É possível?


E também queria que me ajudasse com essas bordas que está encostando em cima, queria diminuir a altura. Eu já mexi no padding, coloquei 0px, mas não diminuiu muito. Em cima ainda está com um espaço, veja:

Para o seletor de tags, o senhor poderá usar este tutorial:
-> https://ajuda.forumeiros.com/t46956-tutorial-sistema-de-prefixos

Para corrigir o bug do CSS, vá em sua Folha de Estilos, e adicione, ao final dela:

Código:

html body span.fa-topic-tag {
  display: inline!important;
  padding: 1px 5px!important;
}

o/

Perfeito. Dúvidas solucionadas, parabéns pelo suporte Luiz. Muito obrigado, pode fechar o tópico.

Sempre às ordens. o7

---