A long one for you pros!

[Yaldaram]

Replace above PHP code with this;

if (!empty($mybb->user['avatar']))
{
   $avatar = '<img src="'.$mybb->user['avatar'].'" width="100px"
height="100px" style="border: 2px solid #fff; border-radius: 5px;
-webkit-border-radius: 5px; -moz-border-radius: 5px;">';
}
else
{
   $avatar = "";
}

Now find the following in your header template;

<img src="{$mybb->user['avatar']}" width="100px"
height="100px" style="border: 2px solid #fff; border-radius: 5px;
-webkit-border-radius: 5px; -moz-border-radius: 5px;">

and Replace it to;

{$avatar}

[xomp]

That worked! Thanks!

[Yaldaram]

Most welcome

[xomp]

Is it possible to make the panel move correctly when I resize the page? (when you zoom in/out it moves position because I'm using margins) if that makes sense.

Example, at normal 100% zoom it looks fine:


But when I zoom out it looks like this:


Alternatively when I zoom in to more than 100% the panel starts to move behind the avatar

My current header code:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
<div style="margin:auto; text-align: left;"> <a href="{$mybb->settings['bburl']}/index.php"><img src="images/logo.png" /></a></div>      
<div class="menu" style="float: right; margin-top: -170px; margin-right: 8px;">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.png" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.png" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="http://www.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <br /><div id="panel" style="float: left; margin-top: -120px; margin-left: 780px">{$welcomeblock}</div>
            <div style="border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; float: right; padding-right:
10px; margin-top: -150px;">{$avatar}</div>
            <hr class="hidden" />
<br />
</div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

[faviouz]

I don't want to sound rude, but you're better off hiring a designer to do these customizations for you. All of the tweaks posted are pretty hacky and the more we try to fix the situation for you, the worst it's going to get. Mostly because we don't have much flexibility to play with things, so we just get around it and find the easiest way. Plus, in my opinion, websites are supposed to be viewed at 100% zoom. Visitors should know that if they zoom out a page, things will probably get distorted.

I have a solution anyway. Can you, once again, give me the current content of your header template so I can give you the complete code?

[xomp]

Sure, the current header code is posted above your post

[Firestryke31]

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
<div style="margin:auto; text-align: left;"> <a href="{$mybb->settings['bburl']}/index.php"><img src="images/logo.png" /></a></div>      
<div class="menu" style="float: right; margin-top: -170px; margin-right: 8px;">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.png" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.png" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="http://www.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <br /><div id="panel" style="float: right; margin-top: -120px; margin-right: 4px">{$welcomeblock}</div>
            <div style="border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; float: right; padding-right:
10px; margin-top: -150px;">{$avatar}</div>
            <hr class="hidden" />
<br />
</div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

Once again I'm not 100% on if this will work, but worth a try. I just took the current code and made the panel float:right instead of float:left and changed the margin (why would fav make it float:left if we're trying to stick it to the right side?).

[xomp]

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
<div style="margin:auto; text-align: left;"> <a href="{$mybb->settings['bburl']}/index.php"><img src="images/logo.png" /></a></div>      
<div class="menu" style="float: right; margin-top: -170px; margin-right: 8px;">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.png" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.png" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="http://www.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <br /><div id="panel" style="float: right; margin-top: -120px; margin-right: 4px">{$welcomeblock}</div>
            <div style="border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; float: right; padding-right:
10px; margin-top: -150px;">{$avatar}</div>
            <hr class="hidden" />
<br />
</div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

Once again I'm not 100% on if this will work, but worth a try. I just took the current code and made the panel float:right instead of float:left and changed the margin (why would fav make it float:left if we're trying to stick it to the right side?).

Thanks, that actually allows the panel to follow everything smoothly when resized but it's a little behind the avatar. Maybe I can fool with teh margin?

EDIT: Yep, this worked wonderfully! I adjusted the margin and it's perfect! Thanks both of yoU!

[faviouz]

(too late, once again...) Ok, replace everything with:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
<div style="margin:auto; text-align: left;"> <a href="{$mybb->settings['bburl']}/index.php"><img src="images/logo.png" /></a></div>      
<div class="menu" style="float: right; margin-top: -170px; margin-right: 8px;">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.png" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.png" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="http://www.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <br />

<div style="float: right; margin-top: -100px; padding-right: 10px;">

<div id="panel" style="margin-right: 120px">{$welcomeblock}</div>

div style="border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; float: right; margin-left: -30px; margin-top: -70px;">{$avatar}</div>

</div>
            <hr class="hidden" />
<br />
</div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

I know that works because I've tested it in Chrome Inspect, but I got a bit confused so I might have forgotten about something. Let me know how it goes...

Once again I'm not 100% on if this will work, but worth a try. I just took the current code and made the panel float:right instead of float:left and changed the margin (why would fav make it float:left if we're trying to stick it to the right side?).

Who told you I floated it left?

[Firestryke31]

Lol I just guessed since your version was the last one I looked at. Heck, if I were doing it I wouldn't use negative margins at all, and just float:left the logo with a <br class="clear"/> after the whole header to line things up properly.