MyBB Community Forums

Full Version: How to add a navigation bar in forum
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Guys can you help me how to put my navigation bar in the forum?
Thanks.
Go into your ACP > Templates > Modify / Delete > Expand your template > Edit the header template.
You should see some HTML code in a textarea. Find the appropriate place to insert your navigation.
I,m sorry but I am new to html, can you help me where to insert the navigation?
Thanks.
I would need to know what type of navigation you would like to add. Possibly an example or a picture.
This is my navigation created with photoshop and imageready.
<html>
<head>
<title>navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (navbar.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		home_over = newImage("images/home-over.gif");
		tech_over = newImage("images/tech-over.gif");
		support_over = newImage("images/support-over.gif");
		contact_over = newImage("images/contact-over.gif");
		forum_over = newImage("images/forum-over.gif");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (navbar.psd) -->
<table id="Table_01" width="760" height="111" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/logo3.gif" width="273" height="46" alt=""></td>
		<td colspan="5">
			<img src="images/logo4.gif" width="487" height="46" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/logo.gif" width="273" height="65" alt=""></td>
		<td colspan="5">
			<img src="images/logo2.gif" width="487" height="41" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('home', 'images/home-over.gif'); return true;"
				onmouseout="changeImages('home', 'images/home.gif'); return true;"
				onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
				onmouseup="changeImages('home', 'images/home-over.gif'); return true;">
				<img name="home" src="images/home.gif" width="60" height="24" border="0" alt=""></a></td>
		<td>
			<a href="#"
				onmouseover="changeImages('tech', 'images/tech-over.gif'); return true;"
				onmouseout="changeImages('tech', 'images/tech.gif'); return true;"
				onmousedown="changeImages('tech', 'images/tech-over.gif'); return true;"
				onmouseup="changeImages('tech', 'images/tech-over.gif'); return true;">
				<img name="tech" src="images/tech.gif" width="139" height="24" border="0" alt=""></a></td>
		<td>
			<a href="#"
				onmouseover="changeImages('support', 'images/support-over.gif'); return true;"
				onmouseout="changeImages('support', 'images/support.gif'); return true;"
				onmousedown="changeImages('support', 'images/support-over.gif'); return true;"
				onmouseup="changeImages('support', 'images/support-over.gif'); return true;">
				<img name="support" src="images/support.gif" width="82" height="24" border="0" alt=""></a></td>
		<td>
			<a href="#"
				onmouseover="changeImages('contact', 'images/contact-over.gif'); return true;"
				onmouseout="changeImages('contact', 'images/contact.gif'); return true;"
				onmousedown="changeImages('contact', 'images/contact-over.gif'); return true;"
				onmouseup="changeImages('contact', 'images/contact-over.gif'); return true;">
				<img name="contact" src="images/contact.gif" width="72" height="24" border="0" alt=""></a></td>
		<td>
			<a href="#"
				onmouseover="changeImages('forum', 'images/forum-over.gif'); return true;"
				onmouseout="changeImages('forum', 'images/forum.gif'); return true;"
				onmousedown="changeImages('forum', 'images/forum-over.gif'); return true;"
				onmouseup="changeImages('forum', 'images/forum-over.gif'); return true;">
				<img name="forum" src="images/forum.gif" width="134" height="24" border="0" alt=""></a></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Thanks.
Please help me