Campo dos emblemas

Detalhes da questão

Endereço do fórum: http://nwdgames.forumbrasil.net
Versão do fórum: ModernBB

Descrição

Olá pessoal, meu campo de emblemas só ficam com 1, mas eu gostaria que fosse possível adicionar + de 1 emblema em cada perfil, então estou usando este código:

Código:

(function ($, css) {
  'use strict';
 
  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();
 
      if (!/emblemas/gi.test(_text)) {
        return;
      }
 
      $this.addClass('perfil-emblemas');
   
      $this
        .find('img')
          .each(function () {
            var $this = $(this);
 
            $this.attr('title', $this.next('strong').text());
         
            $this.tooltipster();
          })
      ;
    });
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: center;',
  '  margin: 10px 0;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas::before {',
  '  content: "Emblemas";',
  '  display: block;',
  '  font-size: 13px;',
  '  margin-bottom: 6px;',
  '  font-weight: 500;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  display: inline-block;',
  '  margin-right: 6px;',
  '  border: solid 1px #ddd;',
  '  padding: 3px;',
  '  box-shadow: inset 0 0 0 2px #ddd;',
  '}'
]));

Porém não fica como eu quero, eu queria que ficasse assim:
https://i.imgur.com/XqsuSVH.png

Como fica:
http://prntscr.com/jzmyd3

Olá @Punisher,
Mude para:

Código:

(function ($, css) {
  'use strict';
 
  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();
 
      if (!/emblemas/gi.test(_text)) {
        return;
      }
 
      $this.addClass('perfil-emblemas');
 
      $this
        .find('img')
          .each(function () {
            var $this = $(this);
 
            $this.attr('title', $this.next('strong').text());
       
            $this.tooltipster();
          })
      ;
    });
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: left;',
  '  margin: 10px 0;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas::before {',
  '  content: "Emblemas";',
  '  display: block;',
  '  font-size: 13px;',
  '  margin-bottom: 6px;',
  '  font-weight: 500;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  display: inline-block;',
  '  text-align: left;',
  ' float: left!important;',
  '  margin-right: 0px;',
  '  border: solid 1px #ddd;',
  '  padding: 3px;',
  '  box-shadow: inset 0 0 0 2px #ddd;',
  '}'
]));


- pedxz

Veja como ficou: http://prntscr.com/jznpok bugou os icones de mensagem etc.

Olá amigo!

Remova os códigos passados acima, e tente utilizar o seguinte:

Código:

(function ($, css) {
  'use strict';
 
  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();
 
      if (!/emblemas/gi.test(_text)) {
        return;
      }
 
      $this.addClass('perfil-emblemas');
  
      $this
        .find('img')
          .each(function () {
            var $this = $(this);
 
            $this.attr('title', $this.next('strong').text());
        
            $this.tooltipster();
          })
      ;
    });
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
$('.perfil-emblemas').parents().prepend('<span><strong>Emblemas</strong></span>');
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: center;',
  '  margin: 10px 0;',
  '  display: inline;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas::before {',
  '  content: "Emblemas";',
  '  display: block;',
  '  font-size: 13px;',
  '  margin-bottom: 6px;',
  '  font-weight: 500;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  height: 50px;',
  '  width: 50px;',
  '  padding: 5px;',
  '}'
]));

Até mais.

Bugou mais ainda http://prntscr.com/jzp47j

Oups!

Troque por este:

Código:

(function ($, css) {
  'use strict';
 
  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();
 
      if (!/emblemas/gi.test(_text)) {
        return;
      }
 
      $this.addClass('perfil-emblemas');
  
      $this
        .find('img')
          .each(function () {
            var $this = $(this);
 
            $this.attr('title', $this.next('strong').text());
        
            $this.tooltipster();
          })
      ;
    });
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
$('.perfil-emblemas').parent().prepend('<span><strong>Emblemas</strong></span><br />');
$('.perfil-emblemas br').remove();
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: center;',
  '  margin: 10px 0;',
  '  display: inline;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  height: 50px;',
  '  width: 50px;',
  '  padding: 5px;',
  '}'
]));

Tá quase https://prnt.sc/jzpqn0

Acho que agora vai @Punisher,

Código:

(function ($, css) {
  'use strict';
 
  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();
 
      if (!/emblemas/gi.test(_text)) {
        return;
      }
 
      $this.addClass('perfil-emblemas');
  
      $this
        .find('img')
          .each(function () {
            var $this = $(this);
 
            $this.attr('title', $this.next('strong').text());
        
            $this.tooltipster();
          })
      ;
    });
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
$('.perfil-emblemas').parent().prepend('<span><strong>Emblemas</strong></span><br>');
$('.perfil-emblemas br').remove();
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: center;',
  '  margin: 10px 0;',
  '  display: inline;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  height: 50px;',
  '  width: 50px;',
  '  padding: 5px;',
  '}'
]));

Perfeito, poderia deixar o "Emblema" em preto? igual os outros perfis

Claro!

Código:

(function ($, css) {
  'use strict';
 
  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();
 
      if (!/emblemas/gi.test(_text)) {
        return;
      }
 
      $this.addClass('perfil-emblemas');
  
      $this
        .find('img')
          .each(function () {
            var $this = $(this);
 
            $this.attr('title', $this.next('strong').text());
        
            $this.tooltipster();
          })
      ;
    });
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
$('.perfil-emblemas').parent().prepend('<span style="color:black"><strong>Emblemas</strong></span><br>');
$('.perfil-emblemas br').remove();
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: center;',
  '  margin: 10px 0;',
  '  display: inline;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  height: 50px;',
  '  width: 50px;',
  '  padding: 5px;',
  '}'
]));

Perfeito, agradeço muito, podem fechar.