I have seen quite a few people asking for this in the Support forums, so thought of posting a simple guide.
We will be achieving something like this: Demo Link
1. The Quick Search bar
Goto ACP >> Templates >> Your Theme's Templates >> Header Templates >> header
find {$quicksearch} move it just above your logo like this...
now goto header_quicksearch template and
change this...
into this....
Now, in global.css find
and change it as....
2. Main Menu
We are referring to the menu links - Home, Extend, Docs, Blog etc...
Add a new menu just below your logo as shown below into your header template...
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...
3. Panel Links
This is the Search, Member list, Help etc...
Find this in your header template....
move it just above {$welcomeblock} like this....
in global.css find this...
and change that into this....
4. News Bars
Goto ACP >> Templates >> Your Theme's Templates >>Index Page Templates >> index
and add these codes just after the {header} like this....
and these css go into the global.css
After saving all above changes, open your forum and do a Hard Refresh (Ctrl+F5)
Demo Link
We will be achieving something like this: Demo Link
1. The Quick Search bar
Goto ACP >> Templates >> Your Theme's Templates >> Header Templates >> header
find {$quicksearch} move it just above your logo like this...
Code:
<div id="logo">
<div class="wrapper">
{$quicksearch}
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>now goto header_quicksearch template and
change this...
Code:
<input name="keywords" type="text" class="textbox"/>
<input value="Search" type="submit" class="button" />into this....
Code:
<input name="keywords" type="text" class="textbox" placeholder="Search..." />
<input value="" type="submit" class="button" />Now, in global.css find
Code:
#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....
Code:
#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 as shown below into your header template...
Code:
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
<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...
Code:
#topmenu {
margin-bottom: -14px;
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....
Code:
<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....
Code:
<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...
Code:
#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....
Code:
#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....
Code:
{$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
Code:
.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)
Demo Link