Avatar na barra de menu

Detalhes da questão

Endereço do fórum: http://srdteam.forumeiros.com
Versão do fórum: phpBB3

Descrição

Olá,

Eu gostaria que o avatar aparecesse na barra de menu.

Como está:



Como quero que fique:

https://uploaddeimagens.com.br/images/001/518/306/full/efeito1.png?1532076964

Fico no aguardo,

Olá @Steve_.,
Veja se é isto que você quer:
https://ajuda.forumeiros.com/t112498-

Cordialmente,
pedxz


Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

Olá @pedxz

Já testei esse código mas eu preferia como eu mostrei na imagem acima na zona de conectar e desconectar.

Tente este:

Código:

/****
 * Application: Link and avatar in the navbar
 * Description: This application can show the link to the user's profile and avatar in the navbar.
 * Version: 1.0
 * Made and Optimizations by RafaelS. - 2018/07/06
 * View more in: https://ajuda.forumeiros.com
 * Copyright (c) 2018 RafaelS.<rafael_s at outlook dot pt>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/
 
$(function() {
if(_userdata.session_logged_in > 0) {
 
  var username = _userdata.username, userid = _userdata.user_id,navb,linkav = _userdata.avatar,prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a></li>';
 
if($('body#modernbb').length > 0) navb = '.navbar.navlinks'; // ModernBB version
else if($('td.bodyline').length > 0){navb = '.bodyline table:eq(1) tr td';prependcode = '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;';} // phpBB2 version
else if($('body#phpbb').length > 0){ navb = '.navbar .linklist.navlinks';prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;</li>';} // phpBB3 version
else if($('.pun #pun-intro').length > 0)navb = '#pun-navlinks ul.clearfix';// punBB version
else if($('#ipbwrapper').length > 0){ navb = '#submenu ul li'; prependcode= '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a>';} // Invision version
else return; // no valid version
 
$('head').append(
    '<style type="text/css">' +
    '.mainmenu.rafavatar img {' +
    'display: inline-block !important;'+
    'width:30px;' +
    'height: 30px;' +
    'vertical-align: middle;' +
    'border-radius: 16px;'    +
    'margin-right: 7px;'    +
    'box-shadow: 0 2px 2px rgba(0,0,0,0.1);' +
  'filter: none;' +
    '}' +
    '</style>'
  );
 
$(navb)
  .find('a[href*="/login?logout=1"]')
  .after(prependcode);
} else {
  return;
 }
});


Não, não é assim que eu quero.
Eu quero que ele fique na zona de CONECTAR/DESCONECTAR junto com ( SAIR [NOME DO USUÁRIO] )

Acho que percebi o que o senhor quer, teste:

Código:

/****
 * Application: Link and avatar in the navbar
 * Description: This application can show the link to the user's profile and avatar in the navbar.
 * Version: 1.0
 * Made and Optimizations by RafaelS. - 2018/07/06
 * View more in: https://ajuda.forumeiros.com
 * Copyright (c) 2018 RafaelS.<rafael_s at outlook dot pt>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/
 
$(function() {
 
if(_userdata.session_logged_in > 0) {
 
  var username = _userdata.username, userid = _userdata.user_id,navb,linkav = _userdata.avatar,prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a></li>';
 
if ($('body#modernbb').length > 0) navb = '.navbar.navlinks'; // ModernBB version
else if($('td.bodyline').length > 0){navb = '.bodyline table:eq(1) tr td';prependcode = '<span id="img">'+linkav+'</span>';} // phpBB2 version
else if($('body#phpbb').length > 0){ navb = '.navbar .linklist.navlinks';prependcode = '<span id="img">'+linkav+'</span>';} // phpBB3 version
else if($('.pun #pun-intro').length > 0)navb = '#pun-navlinks ul.clearfix';// punBB version
else if($('#ipbwrapper').length > 0){ navb = '#submenu ul li'; prependcode= '<span id="img">'+linkav+'</span>';} // Invision version
else return; // no valid version
 
$('head').append(
    '<style type="text/css">' +
    '.mainmenu #img img {' +
    'display: inline-block !important;'+
    'width:30px;' +
    'height: 30px;' +
    'vertical-align: middle;' +
    'border-radius: 16px;'    +
    'margin-right: 7px;'    +
    'box-shadow: 0 2px 2px rgba(0,0,0,0.1);' +
  'filter: none;' +
    '}' +
    '</style>'
  );
 
$(navb)/*
  .closest('li')*/
  .find('a[href*="/login?logout=1"]')
    .prepend(prependcode);
} else {
  return;
    }
});



É isso mesmo, só mais uma dúvida a imagem fica meia escurecida dá para deixar a cor real? Que por sinal é clara.

Olá!

Adicione à sua folha de estilos CSS:

Código:

.navbar ul.linklist li a.mainmenu img {
    opacity: 1;
}

Até mais.

Deu certo. Obrigado.