MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > A long one for you pros!
Full Version: A long one for you pros!
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Yaldaram

2011-05-21, 03:34 PM
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

2011-05-21, 03:40 PM
That worked! Thanks!

Yaldaram

2011-05-21, 03:42 PM
Most welcome Wink

xomp

2011-05-21, 03:52 PM
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 />

faviouz

2011-05-21, 04:19 PM
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?

xomp

2011-05-21, 04:22 PM
Sure, the current header code is posted above your post Smile

Firestryke31

2011-05-21, 04:36 PM
<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

2011-05-21, 04:40 PM
(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!

faviouz

2011-05-21, 04:42 PM
(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

Firestryke31

2011-05-22, 03:49 AM
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.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
MyBB Community Forums > Extensions > Themes > Theme Support > A long one for you pros!