MyBB Forum like this

[canadacommunity]

Hi, i have searched the last 8 pages in general and couldn't find the answer so hopefully someone can help me by explaining what to edit and replace? Its totally different in the default theme that we install.

[.m.]

please elaborate your requirement. have you upgraded forum from 1.6.x to 1.8.x and unable to update the theme ?

if so, why not install a good looking compatible theme and use it ..
http://community.mybb.com/mods.php?actio...ory=themes

[canadacommunity]

Thanks for the quick reply. I am currently using the default theme and recent version 1.8.1 Mybb so I was just wondering if I could make the header the same as here and what codes to edit or replace?

default

   

to this

   


???

[mmadhankumar]

it can be done by a series of tempalte and css edits...

check this thread, it will answer half your question and help you move the links (memberlist, help etc) into the panel upper bar....

then in the header template move the {$quicksearch} just above your logo like this...

<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

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

to this....

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

then we need to tweak the css to change its look... 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;
}

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

the only other thing left is the menu bar (docs, blog etc) and for that you need to add a ul menu like this just after your logo and add design css as per your liking....

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

<div id="topmenu">
<ul>
<li><a href="YOUR CUSTOM LINK" title="Home">Home</a></li>
<li><a href="YOUR CUSTOM LINK" title="Downloads">Downloads</a></li>
<li><a href="YOUR CUSTOM LINK" title="Awards">Awards</a></li>
<li><a href="YOUR CUSTOM LINK" title="Blog">Blog</a></li>
</ul>
</div>

let me know how it goes....

[canadacommunity]

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<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>
           
           <nav id="topmenu">
           <ul>
           <li><a href="YOUR CUSTOM LINK" title="Home">Home</a></li>
           <li><a href="YOUR CUSTOM LINK" title="Downloads">Downloads</a></li>
           <li><a href="YOUR CUSTOM LINK" title="Awards">Awards</a></li>
           <li><a href="YOUR CUSTOM LINK" title="Blog">Blog</a></li>
           </ul>
           </nav>
		   </div>
		   </div>
			<div id="panel">
				<div class="upper">
					<div class="wrapper">
						<ul class="menu top_links" style="float: right;">
                        {$menu_portal}
                        {$menu_calendar}
                        {$menu_memberlist}
                       <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
                       </ul>
                       {$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
		</div>
		<div id="content">
			<div class="wrapper">
				{$pm_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}{$myprofile_alertbar}
				{$pending_joinrequests}
				{$awaitingusers}<br />
                {myadvertisements[zone_1]}<br />
				<navigation>
                <br />

@mmadhankumar Superb were almost done and thanks for the help up to now,  I followed exactly everything from both threads and the outcome is 75% done picture shown below


   

Search is missing the name search in blue ?

We still have to bring over from the left the home,blogs,downloads all the way over to the right ?

icons for portal,memberlists,calnder etc are now all the same how to change this ?

home,blogs,downloads etc... css would be nice if you can tell me how to put it like mybb has it ?

Let me know the code I posted is correct for the Header?

[mmadhankumar]

looks like the css changes I said above and in that other thread has not taken effect yet... open your forum and do a hard refresh (ctrl + f5) or try opening the forum in a "Private Window" in your browser...

[canadacommunity]

@mmadhankumar did a hard refresh and here are the results


   

[mmadhankumar]

you havent changed the css for rest of the links like calendar and help.. thats why...

You need to edit the css for all the menu links in global.css.... currently it would be pointing to #logo you might need to change that to #panel .upper


change every occurance of this... 

#logo ul.top_links a.XXXX {
//css codes//
}

to this....

#panel .upper ul.top_links a.XXX {
//css codes//
}

also i see you added "<nav id="topmenu">" in the header template change it to div.... "<nav to <div" and "</nav> to </div>"

after that add these codes to global.css...  youcan to do some minor modifications in the values like margin, border, colors etc to suit your forum and liking...

#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;
}

[canadacommunity]

@mmadhankumar I have good news... I redid this from scratch everything you explained again just now I only need a few adjustments can you please tell me how to fix these 3 small ones

Search looks funny ?
portal, member lists, calendar, help ..... "they need to come down just a few inches" ?

Can you also tell me how to enlarge the black box where portal and welcome block as it shrunk somehow





   

[mmadhankumar]

i believe you havent modified the css codes correctly.... let me provide the required css changes in a very simple way as it might prove useful to others too....

here is the list of changes to be made in the global.css file just copy paste the modified codes in respective places...


1. For the Search bar find this.....

#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. For the Menu Links (memberlist, help, etc) 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 it as....

#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;
}

3. For the Top Menu (home, downloads etc) add this to global.css.....

#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;
}

after making above changes and saving the global.css file, open your forum.... do a hard refresh (ctrl+F5) or clear your browser cache and reload the forum...