MyBB Community Forums

I'd like to place a rectangle box in the header area. I found a couple examples of this, one being SimpleCorp. If you follow the link, you will see what I mean. Notice how it has a blue rectangular box in the header area with a darker border at the top.

SimpleCorp is GPL, so I thought I'd learn by seeing how the author did this. But because I'm a CSS/PHP/HTML dummy, I could not figure it out. I did find some CSS though. And the first entry (see below) seems to refer to that box. Maybe the others do too?

Anyway, I tried simply pasting the statements into the CSS of a new theme but nothing happened. I also tried looking in the header template for anything I could spot, and I can't figure this out.

Can someone explain to me how to put one of those boxes up in the header?

Quote:div.header {
padding:20px 10px 25px;
margin:0 auto;
background-color:#4086AA;
border-top:4px solid #326A85;
margin-bottom:10px;
}

div.header h2 {
float:left;
padding-top:20px;
padding-left:10px;
font-size:0.75em;
}

div.header h1 {
float:left;
padding:0;
}

I don't usually bump my unanswered questions, but I tried again and I just can't figure this out. Can someone help me?

Try something like this in the header template:

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
		<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                       </div>
                       </div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                {$welcomeblock}
<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$commentalert}
			{$pending_joinrequests}
			<navigation>
</div>

css as below

#header {
padding:20px 10px 25px;
margin:0 auto;
background-color:#4086AA;
border-top:4px solid #326A85;
margin-bottom:10px;
}

Thanks, Leefish. I appreciate you taking the time to help me. I ran into a problem, though. The method you gave me removes part of the interface. What I'm trying to do is place the rectangle above the existing interface without changing it.

I attached a screenshot of what went wrong (called modresullt) that shows where it went wrong. I also attached a Photoshoped version (called modgoal) that shows the result I was hoping for.

Any help with this will be appreciated.

Missing part of interface
[attachment=21180]

What I was hoping for
[attachment=21181]

Oh, I see. Ok, try this:

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div></div>
			<div class="menu">
				<ul>
					<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
					<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
					<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
				</ul>
			</div>		
			<hr class="hidden" />
			<div id="panel">
				{$welcomeblock}
			</div>

		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}
			<navigation>
			<br />

[attachment=21182]

BTW, its easy to help people who make it clear assuming that you are using default theme and the css from my previous post and that your guest and member headers are default that should fix it.

Thanks, Leefish. It's working now. Being able to add this box solves a major design problem for me.