MyBB Community Forums › Extensions › Themes › Theme Support v
A long one for you pros!

Threaded Mode
Not Solved A long one for you pros!
Yaldaram Offline
Posts: 13,283
Threads: 159
Joined: Oct 2010
Reputation: 1,291
#21
Not Solved 2011-05-20, 09:51 PM
Try this;
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div><br/><br/>
            <div style="border: solid #fff 2px;  float: right;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />
[Image: 16mJ9bI]
MyBBsmsAPP | MyStatus | ProProfile
Website Find
Reply
Matt G. Offline
Posts: 115
Threads: 4
Joined: May 2011
Reputation: 4
#22
Not Solved 2011-05-20, 09:53 PM
(2011-05-20, 09:51 PM)Yaldaram Wrote: Try this;
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div><br/><br/>
            <div style="border: solid #fff 2px;  float: right;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

Yes, but that will push everything below it down, I am guessing.
Find
Reply
xomp Offline
Posts: 427
Threads: 107
Joined: Jul 2010
Reputation: 0
#23
Not Solved 2011-05-20, 09:55 PM
(2011-05-20, 09:51 PM)Matt G. Wrote: Just Guessing on the amount of padding.
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <div style="border: solid #fff 2px;  float: right; padding-top: 30px;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

Is that fine?

edit: Oops, try this instead
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <div style="border: solid #fff 2px;  float: right; margin-top: 30px;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

The 2nd one is the winner here Smile Now is there anyway to add some padding to the right so it's not so close to the right border thing there? And maybe a way to round the borders of say the avatar? If that's too difficult just let me know Smile
Find
Reply
faviouz Offline

Former Staff
Posts: 10,063
Threads: 311
Joined: Oct 2008
Reputation: 457
#24
Not Solved 2011-05-20, 09:55 PM (This post was last modified: 2011-05-20, 09:56 PM by faviouz.)
(too late) Use margins:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <div style="border: solid #fff 2px; float: right; margin-top: 50px;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </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'm not sure if 50px is enough though, so change it accordingly until it's where you want it.
Find
Reply
Matt G. Offline
Posts: 115
Threads: 4
Joined: May 2011
Reputation: 4
#25
Not Solved 2011-05-20, 09:56 PM (This post was last modified: 2011-05-20, 09:59 PM by Matt G..)
(2011-05-20, 09:55 PM)faviouz Wrote: Use margins:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <div style="border: solid #fff 2px; float: right; margin-top: 50px;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </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'm not sure if 50px is enough though, so change it accordingly until it's where you want it.

Yea, I guess margins after I realized padding would just push it all down.


(2011-05-20, 09:55 PM)xomp Wrote:
(2011-05-20, 09:51 PM)Matt G. Wrote: Just Guessing on the amount of padding.
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <div style="border: solid #fff 2px;  float: right; padding-top: 30px;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

Is that fine?

edit: Oops, try this instead
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <div style="border: solid #fff 2px;  float: right; margin-top: 30px;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

The 2nd one is the winner here Smile Now is there anyway to add some padding to the right so it's not so close to the right border thing there? And maybe a way to round the borders of say the avatar? If that's too difficult just let me know Smile

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="menu">
                <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://forums.xomby.org/misc.php?page=irc"><img src="{$theme['imgdir']}/toplinks/irc.png" alt="" title="" />IRC Chat</a></li>
                </ul>
            </div>
            <div style="border: solid #fff 2px;  float: right; margin-top: 30px; padding-right: 20px; -moz-border-radius: 5px;
border-radius: 5px;"><img src="{$mybb->user['avatar']}" width="100px" height="100px"></div>
            <hr class="hidden" />
<div id="panel">{$welcomeblock}</div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$teradonate_notice}{$teradonate_bar}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
{$headerannounce}
            {$pending_joinrequests}
            <navigation>
            <br />

Rounded corners doesn't work in IE older versions.
Find
Reply
xomp Offline
Posts: 427
Threads: 107
Joined: Jul 2010
Reputation: 0
#26
Not Solved 2011-05-20, 09:58 PM
Yes, margins seem to be a better option there Smile now to get the right-side padded so it's not on the border line there heh
Find
Reply
faviouz Offline

Former Staff
Posts: 10,063
Threads: 311
Joined: Oct 2008
Reputation: 457
#27
Not Solved 2011-05-20, 09:59 PM
Right padding and rounded avatar:

<div style="border: solid #fff 2px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; float: right; margin-top: 50px; padding-right: 10px"><img src="{$mybb->user['avatar']}" width="100px" height="100px" style="border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;"></div>

You might want to move that inline styling to your stylesheet once you're done.
Find
Reply
Matt G. Offline
Posts: 115
Threads: 4
Joined: May 2011
Reputation: 4
#28
Not Solved 2011-05-20, 09:59 PM (This post was last modified: 2011-05-20, 10:00 PM by Matt G..)
Edited my post. lol, both posted at same time.
Find
Reply
faviouz Offline

Former Staff
Posts: 10,063
Threads: 311
Joined: Oct 2008
Reputation: 457
#29
Not Solved 2011-05-20, 10:01 PM
That won't work, because you're rounding the div and not the image. Therefore only the surronding border will be rounded. Smile I believe what I suggested works though.
Find
Reply
Matt G. Offline
Posts: 115
Threads: 4
Joined: May 2011
Reputation: 4
#30
Not Solved 2011-05-20, 10:02 PM
Okay yeah, I see what you did. You had to round both the border and the image. Forgot about that. Good Work Smile
Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)