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

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Flames 22.06.17 8:05

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:
Como colocar tags nos tópicos e nos últimos assuntos Rptlqz11

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.

Flames

Flames
**

Membro desde : 05/10/2011
Mensagens : 50
Pontos : 78

http://jornamice.com.br.tc

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Luiz 22.06.17 18:10

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. Piscada

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Flames 22.06.17 19:28

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?
Como colocar tags nos tópicos e nos últimos assuntos R9rcqe10
Flames

Flames
**

Membro desde : 05/10/2011
Mensagens : 50
Pontos : 78

http://jornamice.com.br.tc

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Luiz 22.06.17 20:04

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

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Flames 22.06.17 20:15

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:
Como colocar tags nos tópicos e nos últimos assuntos Hgooku10

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

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.
Flames

Flames
**

Membro desde : 05/10/2011
Mensagens : 50
Pontos : 78

http://jornamice.com.br.tc

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Luiz 22.06.17 20:46

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.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Flames 22.06.17 20:53

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:
Como colocar tags nos tópicos e nos últimos assuntos R9rcqe10
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:Como colocar tags nos tópicos e nos últimos assuntos 8bsq-SDuR_qR4sWUsaO17A

Flames

Flames
**

Membro desde : 05/10/2011
Mensagens : 50
Pontos : 78

http://jornamice.com.br.tc

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Luiz 22.06.17 20:57

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/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Flames 22.06.17 21:04

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

Flames
**

Membro desde : 05/10/2011
Mensagens : 50
Pontos : 78

http://jornamice.com.br.tc

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como colocar tags nos tópicos e nos últimos assuntos

Mensagem por Luiz 22.06.17 21:10

Sempre às ordens. o7

---

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos