MyBB Community Forums

I have seen quite a few people asking for this in the Support forums, so thought of posting a simple guide.



1. The Quick Search bar

Goto ACP >> Templates >> Your Theme's Templates >> Header Templates >> header

find {$quicksearch} move it just below your logo like this...

<div id="logo">
<div class="wrapper">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
{$quicksearch}

now goto header_quicksearch template and

change this...

<input name="keywords" type="text" class="textbox"/>
<input value="Search" type="submit" class="button" />

into this....

<input name="keywords" type="text" class="textbox" placeholder="Search..." />
<input value="" type="submit" class="button" />

Now, in global.css find

#search {
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    vertical-align: middle;
}

#search input.button,
#search input.textbox {
    border-color: #000;
}

#search input.button {
    background: #0066a2 url(images/thead.png) top left repeat-x;
    color: #fff;
}

#search input {
    margin: -3px 0;
}

and change it as....

#search {
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    vertical-align: middle;
}

#search input.textbox {
    border-color: #A5A5A5;
    margin: -3px 0;
    border-radius: 3px;
    width: 200px;
    line-height: 20px;
}

#search input.button {
    background: url(images/headerlinks_sprite.png) 0px 0px no-repeat;
    border: 0;
    height: 16px;
    margin-left: -25px;
}

2. Main Menu

We are referring to the menu links - Home, Extend, Docs, Blog etc...

Add a new menu just below your logo and quicksearch as shown below into your header template...

<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
{$quicksearch}
<div id="topmenu">
<ul>
<li><a href="YOUR CUSTOM LINK" title="">Menu Item1</a></li>
<li><a href="YOUR CUSTOM LINK" title="">Menu Item2</a></li>
<li><a href="YOUR CUSTOM LINK" title="">Menu Item3</a></li>
<li><a href="YOUR CUSTOM LINK" title="">Menu Item4</a></li>
</ul>
</div>

next is to add some css to the menu we have just added above... add the following codes into the global.css file of your theme...

#topmenu {
 margin: 30px 0 -14px 0;
 position: relative;
 font-size: 15px;
 text-align: right;
}

#topmenu ul {
  list-style: none;    
  margin: 0;  
  padding: 0;
}

#topmenu ul li {
  display: inline-block;  
  margin: 0 1px;
}

#topmenu ul li a {
  padding: 5px 10px 5px;  
  display: block;  
  text-decoration: none;  
  border-bottom: 4px solid #3a3a3a;
}

#topmenu ul li a:hover {
  border-bottom: 4px solid #ff7500;
  color: #ff7500;
}

3. Panel Links

This is the Search, Member list, Help etc...

Find this in your header template....

<ul class="menu top_links">
{$menu_portal}
{$menu_search}
{$menu_memberlist}
{$menu_calendar}
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
</ul>

move it just above {$welcomeblock} like this....

<ul class="menu top_links">
{$menu_portal}
{$menu_search}
{$menu_memberlist}
{$menu_calendar}
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
</ul>
{$welcomeblock}

in global.css find this...

#logo ul.top_links {
	font-weight: bold;
	text-align: right;
	margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
	background-position: 0 0;
}

#logo ul.top_links a.memberlist {
	background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
	background-position: 0 -40px;
}

#logo ul.top_links a.help {
	background-position: 0 -60px;
}

#logo ul.top_links a.portal {
	background-position: 0 -180px;
}

and change that into this....

#logo {
border-bottom: 4px solid #3A3A3A;
}

#logo img {
margin-bottom: 10px;
}

#panel .upper {
background: #5F5F5F;
}

#panel .upper ul.top_links {
    font-weight: bold;
    text-align: right;
    margin: 0px 5px -20px 0;
}

#panel .upper ul.top_links a.search {
    background-position: 0 0;
}

#panel .upper ul.top_links a.memberlist {
    background-position: 0 -20px;
}

#panel .upper ul.top_links a.calendar {
    background-position: 0 -40px;
}

#panel .upper ul.top_links a.help {
    background-position: 0 -60px;
}

#panel .upper ul.top_links a.portal {
    background-position: 0 -180px;
}

4. News Bars

Goto ACP >> Templates >> Your Theme's Templates >>Index Page Templates >> index

and add these codes just after the {header} like this....

{$header} 
<div class="newsbar newsbar1"><a href="Link to Announcement1">Announcement 1</a></div>
<div class="newsbar newsbar2"><a href="Link to Announcement2">Announcement 2</a></div>
<div class="newsbar newsbar3"><a href="Link to Announcement3">Announcement 3</a></div>
<div class="newsbar social">
    <span>Find us on Social Networks</span>
	<span><a href="Your Twitter Link">Follow us on Twitter</a></span>
	<span><a href="Your Facebook Link">Like us on Facebook</a></span>
	<span><a href="Your Youtube Link">Subscribe to our Youtube Channel</a></span>
</div>

and these css go into the global.css

.newsbar {
text-align: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 5px 10px;
margin: 10px 0 0;
}

.newsbar1 {
background: #4BC7F5;
border: 1px solid #0B93C5;
}

.newsbar2 {
background: #C0EA43;
border: 1px solid #80AB00;
}

.newsbar3 {
background: #FB3;
border: 1px solid #DA9201;
}

.social {
margin-bottom: 10px;
border: 1px solid #CCC;
}

.social span {
border-right: 1px solid #DDD;
padding: 0px 16px;
}

After saving all above changes, open your forum and do a Hard Refresh (Ctrl+F5)

After all the help & Tuts you offered to all of us on Mybb, I'm so surprised your not even a Mybb Developer yet..... I just met you recently but you know that your more then a ***Happy to Help*** member but wow Kudos to you BRO @mmadhankumar!

Thanks for this information.

Great tutorial, thank you.

Suggestion: I think the height of the header element should be independent of the height of the logo.

(2014-12-09, 05:26 AM)ElectricShock Wrote: [ -> ]Suggestion: I think the height of the header element should be independent of the height of the logo.

yes a good suggestion.... especially useful for forums with big logos.... 

Good Tutorial but it proved me a costly mistake.
Followed the tutorial ...but total alignment got changed.
Even the text at footer area has become invisible.
It seems there is a problem with css file.

Here's the link for the board: http://foodrecipeseasy.com/

Please do help me

---

Hey! Someone respond my query.

(2014-12-12, 04:46 PM)SriNik Wrote: [ -> ]Good Tutorial but it proved me a costly mistake.
Followed the tutorial ...but total alignment got changed.
Even the text at footer area has become invisible.
It seems there is a problem with css file.

sorry i was away and offline for the past couple of days and hence couldnt check this... the problem is with your forum.. the template structure is a complete mess... the #panel div includes your content and footer, which is not the right way... first try to revert the templates to original before attempting this...

Bookmark first. will be useful someday. 

Do you have a way to make the black navbar even with the rest of the forum instead of stretching accross the screen

[attachment=33487]