Emblemas no perfil tópico.

Detalhes da questão

Endereço do fórum: http://pmgot.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá, estava seguindo um tópico sobre emblemas no perfil. [Esse tópico]
Como está: https://prntscr.com/snr9hw

Eu queria um ao lado do outro, se possível..

Saudações,

Retire o que o tópico fez e tente por este modo:

Código CSS

Código:

#field_id2 br { display:none; }
 
#field_id2 div[alt], .postprofile-info div[alt] {
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border-radius: 3px;
    display: inline-block;
    height: 45px;
    margin-top: 5px;
    margin-right: 6px;
    position: relative;
    width: 45px;
}
 
#field_id2 div[alt]:before, .postprofile-info div[alt]:before {
    content: attr(alt);
    position: absolute;
    top: -60%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%);
    background-color: rgba(0,0,0,0.9);
    color: #fff;
    padding: 0 10px;
    border-radius: 3px;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    line-height: 24px;
    transition: 250ms opacity;
    z-index:998!important;
}

#field_id2 div[alt]:after, .postprofile-info div[alt]:after {
    position: absolute;
    top: -8px;
    left: calc(50% - 7px);
    content: '';
    -webkit-filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
    filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(0,0,0,0.9);
    opacity: 0;
    transition: 250ms opacity;
    z-index:998!important;
}
 
#field_id2 div[alt]:hover:before,
.postprofile-info div[alt]:hover:before,
#field_id2 div[alt]:hover:after,
.postprofile-info div[alt]:hover:after { opacity: 1; }

.postprofile-info div[alt] + br { display: none; }

.postprofile-info .label { margin-bottom: 10px; }

.show-more-em {
    padding: 9px 16px;
    background-color: #263238;
    border-radius: 3px;
    font-size: 14px;
    color: #fff!important;
    font-weight: 600;
}
.show-more-em:hover { background-color: rgba(0,0,0,0.44); }

Crie um JavaScript em investimento nos tópicos:

Código:

(function ($) {
  'use strict';

  $(function () {
    $('#field_id2 img, .postprofile-info:contains("Emblemas") img').each(function() {
      var $this = $(this);
      var $label = $this.next();
 
      $this.replaceWith($('<div>', {
        'class': 'rcc-emblems-div',
        style: 'background-image: url(' + $this.attr('src') + ')',
        alt: $.trim($label.text())
      }));
       
      $label.remove();
    });

    $('.postprofile').each(function () {
      var $profile = $(this);
     
      $profile
        .find('.postprofile-info .label span:contains("Emblemas")')
        .parent()
        .hide();

      $profile
        .find('.rcc-emblems-div:first')
        .before([
          '<div class="rcc-emblems-global-wrapper">',
          '  <div class="only-8-em"></div>',
          '  <div class="default-em" style="display: none;"></div>',
          '  <a class="show-more-em" href="javascript:void(0);" style="display: none;">Mostrar todos</a>',
          '</div>',
          '',
          '<!-- @ignore | Estilos Opcionais -->',
          '<style>',
          '  .rcc-emblems-global-wrapper * {',
          '    transition: initial !important;',
          '  }',
          '',
          '  .show-more-em {',
          '    margin-top: 10px;',
          '    display: block;',
          '  }',
          '',
          '  .default-em:empty + a {',
          '    display: none !important;',
          '  }',
          '.default-em.no-animation { overflow: initial !important; }',
          '</style>'
        ].join('\n'))
      ;

      $profile
        .find('.rcc-emblems-div')
        .each(function () {
          var $this = $(this);

          $this
            .next('br')
            .hide()
          ;

          $this.appendTo($profile.find('.default-em'));
        })
      ;
     
      var label = $('.postprofile > dl > dd.postprofile-info > .label:contains("Localização")');
      if(label.length > 0) {
        label
          .next('br')
          .hide()
        ;
      }

      $profile
        .find('.default-em')
        .find('.rcc-emblems-div')
        .each(function (index, self) {
          if (index > 7) {
            return;
          }

          $profile.find('.show-more-em').show();
          $(this).appendTo($profile.find('.only-8-em'));
        })
      ;

      $profile
        .find('.show-more-em')
        .on('click', function () {
          var $this = $(this);

          if ($this.is('.clicked')) {
            $this.removeClass('clicked').text('Mostrar todos');
            $profile.find('.default-em').removeClass('no-animation').slideUp(300, function () {
              $(this).addClass('no-animation');
            });

            return;
          }

          $this.addClass('clicked').text('Mostrar menos');
          $profile.find('.default-em').removeClass('no-animation').slideDown(300, function () {
            $(this).addClass('no-animation');
          });
        })
      ;
    });
  });
}(jQuery));

Lembrando que deve ter um campo de zona de texto no perfil com nome de Emblemas para funcionar.

Atenciosamente,
Chagas

Fiz, mas eu utilizo isso:

Código:

[table class="field_id2"][tr][td data-title="Sou policial da PMGOT"][img]https://images.habbo.com/c_images/album1584/IT693.png[/img][/td][/tr][/table]

Alterei para field_id2, está correto?

Saudações,

Para colocar uma imagem e descrição, basta colocar assim no campo:

Código:


[img]url da imagem[/img][b] descrição [/b]

Atenciosamente,
Chagas

Ficou assim: https://prntscr.com/snsghi

Teria como deixar em hover como antes? Assim: https://prntscr.com/snsgnm

Edit: ja arrumei, pode fechar, muito obrigado.