Avatar no Menu

[SteK]

Detalhes da questão

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

Descrição

Olá! Como eu coloco o avatar do usuário ao lado do "Meu Perfil"?

Como eu quero

Como está o meu

Meu Código

Código:

<!-- Meu Perfil e Avatar -->
<div id="user_navigation" class="logged_in" style="display: flex; align-items: center; margin-left: auto; padding-right: 20px;">
  <!-- Avatar -->
  <img loading="lazy" src="{{USER_AVATAR}}" alt="Avatar" id="fa_usermenu" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;">

  <!-- Meu Perfil -->
  <div class="perfil" style="background: rgba(26, 26, 26, 0.7); padding: 0 20px; height: 80px; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
    <a href="/profile?mode=editprofile" style="text-decoration: none; color: white; display: inline-flex; align-items: center; height: 100%; justify-content: center;">
      <span style="font-size: 18px;">Meu Perfil</span>
    </a>
  </div>
</div>

<!-- CSS para o avatar -->
<style>
  #fa_usermenu img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    object-fit: cover; /* Garante que a imagem seja cortada corretamente, se necessário */
  }
</style>```

[tikky]

Olá @SteK,


Substitua o código por

Código:

<!-- Meu Perfil e Avatar -->
<div id="user_navigation" class="logged_in" style="display: flex; align-items: center; margin-left: auto; padding-right: 20px;">
  <!-- Avatar -->
<script>
      $(document).ready(function () {

      $('<img />', {
        src: _userdata.avatar_link,
        alt: _userdata.username,
        id: "fa_usermenu",
        loading: "lazy",
        css: {
          width: "40px",
          height: "40px",
          "border-radius": "50%",
          "margin-right": "10px"
        }
      }).appendTo('[data-user-avatar]');
    });
  </script>
  <div data-user-avatar></div>
  <img loading="lazy" src="{{USER_AVATAR}}" alt="Avatar" id="fa_usermenu" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;">
 
  <!-- Meu Perfil -->
  <div class="perfil" style="background: rgba(26, 26, 26, 0.7); padding: 0 20px; height: 80px; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
    <a href="/profile?mode=editprofile" style="text-decoration: none; color: white; display: inline-flex; align-items: center; height: 100%; justify-content: center;">
      <span style="font-size: 18px;">Meu Perfil</span>
    </a>
  </div>
</div>
 
<!-- CSS para o avatar -->
<style>
  #fa_usermenu img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    object-fit: cover; /* Garante que a imagem seja cortada corretamente, se necessário */
  }
</style>

Atenciosamente,
tikky.