MyBB Community Forums
A long one for you pros! - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Support (https://community.mybb.com/forum-10.html)
+---- Thread: A long one for you pros! (/thread-94777.html)

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20


RE: A long one for you pros! - Yaldaram - 2011-05-21

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}



RE: A long one for you pros! - xomp - 2011-05-21

That worked! Thanks!


RE: A long one for you pros! - Yaldaram - 2011-05-21

Most welcome Wink


RE: A long one for you pros! - xomp - 2011-05-21

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:
[Image: fqlz7.png]

But when I zoom out it looks like this:
[Image: nkD3w.png]

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

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 />



RE: A long one for you pros! - faviouz - 2011-05-21

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. Smile

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?


RE: A long one for you pros! - xomp - 2011-05-21

Sure, the current header code is posted above your post Smile


RE: A long one for you pros! - Firestryke31 - 2011-05-21

<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?).


RE: A long one for you pros! - xomp - 2011-05-21

(2011-05-21, 04:36 PM)Firestryke31 Wrote:
<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!


RE: A long one for you pros! - faviouz - 2011-05-21

(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? Toungue


RE: A long one for you pros! - Firestryke31 - 2011-05-22

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.