Como fazer esse tipo de emblema?

Detalhes da questão

Endereço do fórum: https://centrorevo.forumeiros.com/
Versão do fórum: ModernBB
Acesso ao fórum:

• Nome de usuário: Ajudantes
  
• Palavra-passe: @ajudantes@
  

Descrição

Queria saber se é possível fazer isso, e também se tem como deixar tipo igual Java de Rank Automático sabe? Só que tipo, quando a pessoa estiver em um grupo ela ganhar um emblema da quele grupo. exemplo: Grupo de Administradores: "Sou um Administrador Oficial do CRN". Aí quando ela é removida do grupo ela perde o emblema. e também um emblema de Membro automático

Oi, Rike100. Espero que esteja tudo bem por aí.

Para adicionar as conquistas em seu fórum, aceda ao Painel administrativo do Administrador e:

Usuários e Grupos - Conquistas - Gerenciar conquistas

e para personalizá-las, basta editar os campos de criação/edição de acordo com sua vontade. Sobre adicionar conquistas por grupo, ainda não é possível aplicar. Somente manual, no caso do exemplo que você demonstrou.


Aguardo retorno,
Mpezin

Tendi!!! Mas como eu faço esses emblemas? Qual o java? etc... por favor

Crie um código em javascript com revestimento em todas as páginas com o seguinte conteúdo:

Código:

(function ($) {
  'use strict';

  $(function () {
    $('#field_id20 img, .postprofile-info:contains("Emblemas") img').each(function() {
      var $this = $(this);
      var $label = $this.next();
 
      $this.replaceWith($('<div>', {
        'class': '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('.emblems-div:first')
        .before([
          '<div class="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>',
          '  .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('.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('.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));

E adicione o seguinte na sua folha de estilo css:

Código:

#field_id9 br { display:none; }
 
#field_id9 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_id9 div[alt]:before, .postprofile-info div[alt]:before {
    content: attr(alt);
    position: absolute;
    top: -70%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%);
    background-color: rgba(0,0,0,0.9);
    color: #fff;
    padding: 0 15px;
    border-radius: 3px;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    line-height: 24px;
    transition: 250ms opacity;
    z-index:998!important;
}

#field_id9 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_id9 div[alt]:hover,
.postprofile-info div[alt]:hover,
#field_id9 div[alt]:hover,
.postprofile-info div[alt]:hover {background-color: rgba(0,0,0,0.1);}

#field_id9 div[alt]:hover:before,
.postprofile-info div[alt]:hover:before,
#field_id9 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); }

.emblems-global-wrapper::before{
      border-bottom: 2px solid rgba(0,0,0,.1);
    color: #8E8E8E;
    content: 'Emblemas do militar';
    display: block;
    font-size: 11px;
    padding: 2px 0 1px 0;
    text-align: left;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 4px;
}
.postprofile-info::before{
      border-bottom: 2px solid rgba(0,0,0,.1);
    color: #8E8E8E;
    content: 'Informações do militar';
    display: block;
    font-size: 11px;
    padding: 2px 0 1px 0;
  margin-bottom: 4px;
    text-align: left;
  text-transform: uppercase;
  font-weight: bold;
}


para setar os emblemas você deve ir no Painel administrativo e seguir os passos: (Usuários & Grupos ---> Perfis).
Logo após isso criar um novo campo especial com os seguintes requisitos: (Tipo - Zona de Texto / Nome: Emblema do Policial / Preenchimento obrigatório: Não / Visualização : Mensagens / Tipo de visualização :
Texto / Quem pode alterar o valor do seu conteúdo? Moderadores / Separador: Quebra de linha)
Para fazer os emblemas você vai na zona de texto criada em Usuários & Grupos e ir diretamente em gerenciar usuários e selecionar algum, logo após procurar pelo campo ''EMBLEMAS DO POLICIAL'' e seguir o seguinte raciocínio:

Código:

[img]URL DA IMAGEM[/img] [b] TEXTO [/b]