MyBB Community Forums

Full Version: Adding different header to MyBB
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Can someone help me I want my header and the forums to be centered on the page. Here is the code to my header, its the only thing I have changed:
<a name="top" id="top"></a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link REL="SHORTCUT ICON" HREF="http://www.hascet.com/images/favicon.ico">
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<meta name="description" content="A fun website for everyone.">
<meta name="keywords" content="hascet.com hascet forum forums flash games videos youtube">

<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

<style type="text/css">
div#container
{
	position:relative;
	width: 1060px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align:left; 
}
body {text-align:center;margin:0}
</style>


<script language="JavaScript1.4" type="text/javascript">
<!--
function jsPlay(soundobj) {
 var thissound= eval("document."+soundobj);
 try {
     thissound.Play();
 }
 catch (e) {
     thissound.DoPlay();
 }
}
//-->
</script>

<script language="javascript" type="text/javascript">
<!--
function MM_swapImgRestore() {
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() {
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) {
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() {
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//-->
</script>

</head>

<body>

<div id="container">
<div id="shape2" style="position:absolute; overflow:hidden; left:20px; top:20px; width:1020px; height:100px; z-index:0"><img border=0 width="100%" height="100%" alt ="" src="http://www.hascet.com/images/shape5733765.gif"></div>

<div id="nav10d" style="position:absolute; left:162px; top:80px; z-index:1"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav10','','images/nav58181560a.gif',1)" href="http://www.hascet.com/index.html"><img name="images/nav10" onLoad="MM_preloadImages('images/nav58181560a.gif')" alt="" border=0 src="http://www.hascet.com/images/nav58181560i.gif"></a></div>
<div id="nav11d" style="position:absolute; left:347px; top:80px; z-index:1"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav11','','images/nav58181561a.gif',1)" href="http://www.hascet.com/forum"><img name="nav11" onLoad="MM_preloadImages('images/nav58181561a.gif')" alt="" border=0 src="http://www.hascet.com/images/nav58181561i.gif"></a></div>
<div id="nav12d" style="position:absolute; left:532px; top:80px; z-index:1"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav12','','images/nav58181562a.gif',1)" href="http://www.hascet.com/games.html"><img name="nav12" onLoad="MM_preloadImages('images/nav58181562a.gif')" alt="" border=0 src="http://www.hascet.com/images/nav58181562i.gif"></a></div>
<div id="nav13d" style="position:absolute; left:717px; top:80px; z-index:1"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav13','','images/nav58181563a.gif',1)" href="http://www.hascet.com/videos.html"><img name="nav13" onLoad="MM_preloadImages('images/nav58181563a.gif')" alt="" border=0 src="http://www.hascet.com/images/nav58181563i.gif"></a></div>

<div id="art1" style="position:absolute; overflow:hidden; left:460px; top:40px; width:147px; height:37px; z-index:2"><img border=0 alt="hascet.com" src="http://www.hascet.com/images/art5884375.gif"></div>

</body>
</html>

<span style="position: relative; top: 120px;">

       <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']}/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" />
</span>

You can also take a look for yourself at www.hascet.com/forum
Ok I've narrowed it down to something in this header code is messin gup the forums. because without it, its fine and its centered, but when I try to put this code in the header of the forum it messes it up. Can anyone who's familiar with coding help me out and tell me whats wrong with this thats messing it up? Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link REL="SHORTCUT ICON" HREF="http://www.hascet.com/images/favicon.ico">
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<meta name="description" content="A fun website for everyone.">
<meta name="keywords" content="hascet.com hascet forum forums flash games videos youtube">

<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

<style type="text/css">
div#container
{
	position:relative;
	width: 1060px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align:left; 
}
body {text-align:center;margin:0}
</style>

<script language="javascript" type="text/javascript">
<!--
function MM_swapImgRestore() {
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() {
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) {
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() {
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//-->
</script>

</head>

<body>

<div id="container">
<div id="shape2" style="position:absolute; overflow:hidden; left:20px; top:20px; width:1020px; height:100px; z-index:0"><img border=0 width="100%" height="100%" alt="" src="http://www.hascet.com/images/shape5733765.gif"></div>

<div id="nav10d" style="position:absolute; left:162px; top:80px; z-index:1"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav10','','images/nav58181560a.gif',1)" href="http://www.hascet.com/index.html"><img name="nav10" onLoad="MM_preloadImages('images/nav58181560a.gif')" alt="" border=0 src="http://www.hascet.com/images/nav58181560i.gif"></a></div>
<div id="nav11d" style="position:absolute; left:347px; top:80px; z-index:1"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav11','','images/nav58181561a.gif',1)" href="http://www.hascet.com/forum"><img name="nav11" onLoad="MM_preloadImages('images/nav58181561a.gif')" alt="" border=0 src="http://www.hascet.com/images/nav58181561i.gif"></a></div>
<div id="nav12d" style="position:absolute; left:532px; top:80px; z-index:1"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav12','','images/nav58181562a.gif',1)" href="http://www.hascet.com/games.html"><img name="nav12" onLoad="MM_preloadImages('images/nav58181562a.gif')" alt="" border=0 src="http://www.hascet.com/images/nav58181562i.gif"></a></div>
<div id="nav13d" style="position:absolute; left:717px; top:80px; z-index:1"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav13','','images/nav58181563a.gif',1)" href="http://www.hascet.com/videos.html"><img name="nav13" onLoad="MM_preloadImages('images/nav58181563a.gif')" alt="" border=0 src="http://www.hascet.com/images/nav58181563i.gif"></a></div>

<div id="art1" style="position:absolute; overflow:hidden; left:460px; top:40px; width:147px; height:37px; z-index:2"><img border=0 alt="hascet.com" src="http://www.hascet.com/images/art5884375.gif"></div>

</body>
</html>
Keep the CSS in the Extra CSS box and not in your HTML, that would be nicer. It doesn't look awkward to me... Run it through a W3C or something. It might help.
As soon as I put the header in, it makes it so I can't change the width of the forums, and that a grey box appears behind both the header and the forum. I know its something in the header code causing the forum to do this because when the header code isn't in there its fine.
I figured it out. The container in my header code was conflicting with the container in the header code of MyBB. Yea! I'm happy now Big Grin