Hi I'm trying to make my board like this.
http://chaoscreations.nocturnaldusk.info/preview.jpg
I already have the top area done, I just don't know how to keep the top with the width of 100%, and the below light gray area where I want the all the forum stuff to do to be less wide. Lastly, where would I add a bottom bar that aligns that's aligned to the bottom?
Thanks,
DarkChaos
Hey,,
The way MyBB page is consits of two main things. A page that contains everything, and a container that contain the text and rest of the things.
The white part you see which is a bit off edge is the container, and it starts in the
header template.
<div id="container">
Anything you put OUTSIDE this container will show up exceeding the width of the container which is not 100%.
Oh, ic thanks. I have the header working, so if I made a new template all I need to do is add <div id="container"></div> where I want to forum to be, or would I haft to put things is the DIV aswell? o.o Sorry I'm nub with PHP... lol
NO ..
<div id="container">
Is where the container starts, anthing outside the cotainer should be put above this line in the header template.
Hi zaher. I have a little question about something like that..
If I made a table width=100% and but it b4 <div id="container"> and made the forum width=90% is the result will be right?
I think I need to try otherway to explain what am asking for..
so I want to make the logo picture width=100% and the forum width = 90%
I hope you get it
That's basicly what I was trying to do, thanks to Zaher, it's now working correctly. If you have a logo and a background for it you could use a DIV and assign it to something in the CSS, themes. I'm not that good with DIVs, so I would probably just use a table for this. But to make your logo image stretch 100% and keep the container at 90% or w/e you choose, edit the 'header' template in Default Templates. To make your logo image stretch ( which isn't a good idea because it'll be distorted ) move
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a></div>
<div class="menu">
above the <div id="container"> and add width="100%" to the img tag, so it should be like this
<a name="top" id="top"></a>
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" width="100%" /></a></div>
<div id="container">
<div id="header">
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
<navigation>
<br class="clear" />
That should do it, you may want to add <br> after the logo.
Yes, I think you get it the right way Dark thanks, and I think you are right it's not good idea, but with some themes it'll needed.
anyway thanks for the idea I'll try to test it aspa whene I start new theme.
thnx once more.
Np, also if you had a repeating image you wanted to use to go behind the logo you could do this in place where the logo class is.
<table cellspacing="0" cellpadding="0" width="100%">
<tr><td background="repeatingimagelocation" align="center">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" width="100%" /></a></div>
</td></tr>
</table>