Thread Rating:
  • 3 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] MyBB like Header section
#1
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)
We can't help everyone, but everyone can help someone - Ronald Reagan
Did you know? Your question has already been answered. But you haven't seen it yet.
Don’t  Forget to “Mark as Solved” after the fix
Reply
#2
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!
Reply
#3
Thanks for this information.
Reply
#4
Great tutorial, thank you.

Reply
#5
Suggestion: I think the height of the header element should be independent of the height of the logo.
[Image: MaDuhur.png]
by Dukhor, IcyBoards Community Forums
Reply
#6
(12-09-2014, 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....  Smile
We can't help everyone, but everyone can help someone - Ronald Reagan
Did you know? Your question has already been answered. But you haven't seen it yet.
Don’t  Forget to “Mark as Solved” after the fix
Reply
#7
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.


Attached Files Thumbnail(s)
   
Reply
#8
(12-12-2014, 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...

[Image: image.png]
We can't help everyone, but everyone can help someone - Ronald Reagan
Did you know? Your question has already been answered. But you haven't seen it yet.
Don’t  Forget to “Mark as Solved” after the fix
Reply
#9
Bookmark first. will be useful someday.  Blush
MyBB Indonesia | Facebook Page | Twitter
Bangga Menggunakan MyBB sebagai Forum Core Engine Big Grin
Reply
#10
Do you have a way to make the black navbar even with the rest of the forum instead of stretching accross the screen

   
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)