Perfil para ModerNBB

Detalhes da questão

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

Descrição

Tenho o código no PUNBB queria passar para MODERNBB.

Código que uso no PunBB:

Código:

(function ($) {
  'use strict';
 
  $(function () {
 
    var $target = $('#myDropDown');
   
    var $drop = $target.after([
      '<div class="lz-dropdown-user" style="position: absolute; display: none;">',
      '  <div class="lz-avatar-wrap">',
      '    ' + _userdata["avatar"],
      '  </div>',
      '  <div class="lz-col-left">',
      '    <a href="/profile?mode=editprofile&page_profil=informations">Meu Perfil</a>',
      '    <a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>',
      '    <a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos</a>',
      '  </div>',
      '  <div class="lz-col-right">',
      '    <a href="/st/' + _userdata["username"] + '">Meu Conteúdo</a>',
      '    <a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a>',
      '    <a href="/u' + _userdata["user_id"] + '">Visualizar Perfil</a>',
      '  </div>',
      '</div>',
    ].join('\n'));
   
    $target.attr('style', [
      'display: none !important;',
      'visibility: hidden !important;',
      'opacity: 0 !important;',
      'pointer-events: none !important;',
    ].join(' '));
 
    $('#drop_link').attr('onclick', '');
    $('#drop_link').on('click', function () {
      $('.lz-dropdown-user').toggle();
    });
 
    $('head').append([
      '<style type="text/css">',
      '  .lz-dropdown-user {',
      '    background-color: #333;',
      '    z-index: 9999;',
      '    width: 400px;',
      '    right: 0px;',
      '    box-sizing: border-box;',
      '    border-radius: 4px;',
      '    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.63);',
      '  }',
      '',
      '  .lz-dropdown-user * {',
      '    box-sizing: border-box;',
      '  }',
      '',
      '  .lz-dropdown-user .lz-avatar-wrap img {',
      '    height: 65px;',
      '    width: 65px;',
      '    border-radius: 50%;',
      '    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);',
      '    margin-top: 15px;',
      '    float: left;',
      '  }',
      '',
      '  .lz-dropdown-user a {',
      '    color: #fff!important;',
      '    font-size: 12px!important;',
      '  }',
      '',
      '  .lz-dropdown-user a:hover {',
      '    color: #fff!important;',
      '    text-decoration: none!important;',
      '  }',
      '</style>',
    ].join('\n'));
  });
}(jQuery));

Eu me dei o direito de criar um novo código a fim de deixar o seu fórum mais limpo.
Troque o JS por este:

Código:

/*globals jQuery, _userdata*/
(function ($, css) {
  'use strict';

  $(function () {
    var $popover = $([
      '<div class="fa-profile-popover">',
      '  <div class="inner">',
      '    <div class="col avatar">' + _userdata.avatar + '</div>',
      '    <div class="col col-links">',
      '      <a href="/profile?mode=editprofile&page_profil=informations">Meu Perfil</a>',
      '      <a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>',
      '      <a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos</a>',
      '    </div>',
      '    <div class="col col-links">',
      '      <a href="/st/' + _userdata.username + '">Meu Conteúdo</a>',
      '      <a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a>',
      '      <a href="/u' + _userdata.user_id + '">Visualizar Perfil</a>',
      '    </div>',
      '  </div>',
      '</div>'
    ].join('\n')).appendTo('body');

    var $link = $('.mainmenu[href="/profile?mode=editprofile"]');

    $link.on('click', function (event) {
      event.stopPropagation();
      event.preventDefault();

      var $this = $(this);
      var offset = $this.offset();
      var height = $this.height();

      $popover
        .css('position', 'absolute')
        .css('left', offset.left)
        .css('top', offset.top + height)
        .show()
      ;
    });

    $popover.on('click', function (event) {
      event.stopPropagation();
    });

    $(document).on('click', function () {
      $popover.hide();
    });

    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.fa-profile-popover {',
  '  margin-top: 0px;',
  '  transform: translateX(-75%);',
  '}',
  '',
  '.fa-profile-popover::before {',
  '  content: "";',
  '  width: 15px;',
  '  height: 15px;',
  '  position: absolute;',
  '  top: -7px;',
  '  right: 20px;',
  '  transform: rotate(45deg);',
  '  background-color: #fff;',
  '  box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.15);',
  '}',
  '',
  '.fa-profile-popover .inner {',
  '  background-color: #fff;',
  '  padding: 15px;',
  '  display: flex;',
  '  align-items: center;',
  '  justify-content: center;',
  '  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);',
  '}',
  '',
  '.fa-profile-popover .inner > .col {',
  '  margin-right: 35px;',
  '}',
  '',
  '.fa-profile-popover .inner > .col-links a {',
  '  display: block;',
  '  font-size: 13px;',
  '}'
]));

o/

Opa, valeu, também tomei a liberdade de editar uma parte do CSS.
Pode fechar