MyBB Community Forums

hi, i want to share this with you, maybe you like it, but first i want to let you know that im not expert in html or php, im just new, i know to modify few things, so dont ask me about coding or things like that because im not expert

we want to have something like this:



remember, its very easy, no need to be very xp to do this, you have to edit two files, global.css, and header wich can be found in templates.

so lets start, go to your theme, header templates, and find this code (if u have another theme, the code must be similar):

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

look the image:





change that code with this:

<div id='cssmenu'>
<ul>
   <li><a href='index.php'><span>Home</span></a></li>
   <li><a href='search.php'><span>Search</span></a></li>
   <li><a href='memberlist.php'><span>Member List</span></a></li>
   <li><a href='calendar.php'><span>Calendar</span></a></li>
   <li><a href='misc.php?action=help'><span>Help</span></a></li>
   <li class='last'><a href='/member.php?action=register'><span>Register</span></a></li>
</ul>
</div>

Save the changes and go to your theme, edit in advaced mode global.css, add this code to the end of your global.css:

#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: auto;
  position: relative;
  display: block;
  height: 30px;
  font-size: 12px;
  font-weight: bold;
  background: transparent url(images/nav_bg.png) repeat-x top left;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
#cssmenu li a {
  display: block;
  float: left;
  color: #999999;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 20px 0 20px;
}
#cssmenu li a:hover {
  color: #FFFFFF;
  height: 22px;
  background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
#cssmenu li.active a {
  display: inline;
  height: 22px;
  background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
  float: left;
  margin: 0;
}		

Save changes on global.css, go to your cpanel, or ftp program and upload this picture to the folder images:

[attachment=30398]

u donwload the image on your pc and upload it to your forum folder "images", the image name must be nav_bg, its .png

and now refresh your browser, dont forget to clean the cache on your browser, if u dont know how to clean your caches, search youtube "clean cache firefox and chrome" or what browser u use, its easy.

demo here:

http://navbar.twomini.com/index.php

if u want a diferent nav bar and have submenus on your navbar, go here and create your custom navbar:

http://cssmenumaker.com/css-menus

select the style you like and then edit the text and the links as you like

Good luck!

can some mod move this to the Tutorials pls?

Thanks