Go to ACP->Templates->The Theme You Want To Edit->Header Templates->header
No find a spot in your code you want to add the search bar to and add the following code:
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.
The search bar will look like the following.
![[Image: create-a-search-form-with-css3-and-jquery.jpg]]()
Enjoy & Happy Theming!
No find a spot in your code you want to add the search bar to and add the following code:
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.
Code:
* { 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.
![[Image: create-a-search-form-with-css3-and-jquery.jpg]](http://cdn.designsrazzi.com/wp-content/uploads/2013/09/create-a-search-form-with-css3-and-jquery.jpg)
Enjoy & Happy Theming!