+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] MyBB like Header section (/thread-163110.html)
MyBB like Header section - mmadhankumar - 2014-11-20
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)
RE: MyBB like Header section - canadacommunity - 2014-11-21
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!
RE: MyBB like Header section - SteelCurtain - 2014-11-27
Thanks for this information.
RE: MyBB like Header section - ALUXi33 - 2014-12-07
Great tutorial, thank you.
RE: MyBB like Header section - ElectricShock - 2014-12-09
Suggestion: I think the height of the header element should be independent of the height of the logo.
RE: MyBB like Header section - mmadhankumar - 2014-12-09
(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....
RE: MyBB like Header section - SriNik - 2014-12-12
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.
RE: MyBB like Header section - mmadhankumar - 2014-12-13
(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...
RE: MyBB like Header section - terzier - 2014-12-25
Bookmark first. will be useful someday.
RE: MyBB like Header section - Brooklyn - 2015-01-11
Do you have a way to make the black navbar even with the rest of the forum instead of stretching accross the screen