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

Matt G.

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.

xomp

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

faviouz

2011-05-20, 09:55 PM
(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.

Matt G.

2011-05-20, 09:56 PM
(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.

xomp

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

faviouz

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.

Matt G.

2011-05-20, 09:59 PM
Edited my post. lol, both posted at same time.

faviouz

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.

Matt G.

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