MyBB Community Forums

Go to ACP->Templates->The Theme You Want To Edit->Header Templates->header

Now find a spot in your code you want to add the search bar to and add the following code:

<form action="{$mybb->settings['bburl']}/search.php" id="search-form">
    <fieldset>
        <input type="text" id="search" name="search" />
        <input type="submit" id="search-submit" value="" />
    </fieldset>
</form>
<script>
$(document).ready(function(){ 
	
	// Add the value of "Search..." to the input field and a class of .empty
	$("#search").val("Search...").addClass("empty");
	
	// When you click on #search
	$("#search").focus(function(){
		
		// If the value is equal to "Search..."
		if($(this).val() == "Search...") {
			// remove all the text and the class of .empty
			$(this).val("").removeClass("empty");;
		}
		
	});
	
	// When the focus on #search is lost
	$("#search").blur(function(){
		
		// If the input field is empty
		if($(this).val() == "") {
			// Add the text "Search..." and a class of .empty
			$(this).val("Search...").addClass("empty");	
		}
		
	});

});
</script>

Piece of advice you may want to remove anything in your code with this line of code in it "{$mybb->settings['bburl']}/search.php" because you don't want 2 search bars on your forum.

Now go to Themes and the theme you want to edit make sure you save your progress first.

Now create a new stylesheet by clicking Add Stylesheet and name it searchbar.css now click the write own content radio button.

Add the following code then click save and wala your done with a new search bar on your forum.

* { margin: 0; padding: 0; }
fieldset { border: none }

#search-form {
	width: 190px;
	position: relative;
}
#search {
	background: #b2a48c;
	border: 3px solid #402f1d;
	color: #2b1e11;
	height: 20px;
	line-height: 20px;
	width: 150px;
	padding: 2px 4px;
	position: absolute;
	top: 11px;
	left: 0
}
#search-submit {
	background: #b2a48c url(images/search.png) no-repeat 12px 7px;
	border: 3px solid #402f1d;
	height: 50px;
	width: 50px;
	position: absolute;
	top: 0;
	right: 0
}

.empty {
	color: #524630;
}

/* CSS3 */
#search { border-radius: 20px; 
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px;
	background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74));
	background: -moz-linear-gradient(top, #b2a48c, #9b8d74);
	text-shadow: rgba(0,0,0,.2) 0 0 5px;
}

#search-submit { 
	border-radius: 50px; 
	-moz-border-radius: 50px; 
	-webkit-border-radius: 50px; 
	-mox-box-shadow: 0 0 5px black;

	/* Webkit-transition */
	-webkit-transition-property: background-color; 
	-webkit-transition-duration: 0.4s, 0.4s; 
	-webkit-transition-timing-function: linear, ease-in;
	}

The search bar will look like the following.


Enjoy & Happy Theming!