[For 1.8] MyIPB theme

[eNvy]

https://imgur.com/a/yL0rDSt
I was talking about this I did upload the inc file

Well, there's no "good" solution for that.

This happens because the browser is showing you that there's no source loaded on that image. The fact that you can see the default avatar is because I'm forcing a background-image on that and when you change your avatar, the avatar is placed above the default avatar image.

I'm gonna fix it but probably using javascript.

Edit: Done, uploaded the Version 8 with this fix.

If anyone wants to fix it manually:

Templates & Styles > Templates > MyIPB templates > Header templates > open header_welcomeblock_member

Replace the entire template with this new code:

<div class="user_menu">
	<ul>
		<li><span class="pms">{$mybb->user['pms_unread']}</span><a href="{$mybb->settings['bburl']}/private.php"><i class="fa fa-envelope fa-fw icon" title="Inbox"></i></a></li>

		<li>
			<img style="vertical-align: top; margin-top: 5px;" src="{$mybb->user['avatar']}" />
			<div class="empty"></div>

			<div class="enmenuwrap">
				<span class="enmenu">{$mybb->user['username']}<i class="fa fa-caret-down fa-fw icon"></i></span>
				<div class="ensettings">
					<ul>
						{$admincplink}
						{$modcplink}
						<li id="title">Content</li>
						<li><a href="{$mybb->settings['bburl']}/member.php?action=profile">View your profile</a></li>
						<li id="title">Settings</li>
						<li><a href="{$mybb->settings['bburl']}/usercp.php">User control panel</a></li>
						<li><a href="{$mybb->settings['bburl']}/usercp.php?action=avatar">Edit your avatar</a></li>
						<li><a href="{$mybb->settings['bburl']}/usercp.php?action=editsig">Change your signature</a></li>
						<li id="logout"><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">Sign out</a></li>
					</ul>
				</div>
			</div>
		</li>
		
	</ul>
</div>

Now, Templates & Styles > Themes > MyIPB > myipb.css

Search the class ".panelavatar" and delete it

Now add this new css code:

.user_menu ul li img {
	width: 26px;
	min-width: 26px;
	max-width: 26px;
	height: 26px;
	min-height: 26px;
	max-height: 26px;
	display: none;
  	padding: 0px;
	margin: 0 2px 0 0;
}

.user_menu ul li img.active {
	display: inline-block !important;
}

.empty {
	width: 26px;
	min-width: 26px;
	max-width: 26px;
	height: 26px;
	min-height: 26px;
	max-height: 26px;
	display: none;
	padding: 0;
	background-image: url("images/myipb/default_avatar.png") ;
	background-repeat: no-repeat;
	background-size: 100%;
	vertical-align: middle;
	margin: 0 2px 0 0;
}

.empty.active {
	display: inline-block !important;
}

Finally go to your root files > Images folder > myipb folder > custom folder > open JQuery.js file

Add this code to the bottom of the file and save the changes:

/* Header avatar fix - Start */
jQuery(document).ready(function() {
    if( jQuery('.user_menu ul li img').attr('src') == '' ) {
        jQuery('.user_menu ul li img').removeClass('active');
        jQuery('.empty').addClass('active');
    } else {
        jQuery('.user_menu ul li img').addClass('active');
        jQuery('.empty').removeClass('active');
    }
});
/* Header avatar fix - End */

That's all.