Searchbar Tutorial

Paste the line below beside the other <meta name> tags:
<meta name="color:search border" content="#000">

Paste the CSS code below in your CSS section:
.search {
width:70px;
padding:7px;
margin-top:10px;
border-radius:4px;
background:{color:bg};
font-size:12px;
color:{color:text};
border:4px double {color:search border};
font-family:ms gothic;
}

::placeholder{
color:{color:text};
}

.go {width:46px; height:34px; background:{color:bg};
    border-radius:4px;font-size:12px; font-family:{text:font};color:{color:text};

border-top:2px solid rgba({RGBcolor:search border}, 0.3);
border-left:2px solid rgba({RGBcolor:search border}, 0.3);
border-bottom:2px solid rgba({RGBcolor:search border}, 1.0);
border-right:2px solid rgba({RGBcolor:search border}, 1.0);
outline:none;font-family:ms gothic;}

.go:active{
border-bottom:2px solid rgba({RGBcolor:search border}, 0.3);
border-right:2px solid rgba({RGBcolor:search border}, 0.3);
border-top:2px solid rgba({RGBcolor:search border}, 1.0);
border-left:2px solid rgba({RGBcolor:search border}, 1.0);
outline:none;}

.go:hover{
cursor: help;
}

Paste this code somewhere under the <body> section (it tends to look best in the sidebar):
<form action="/search" method="get">
<input class="search" type="text" placeholder="{lang:Search}..." name="q" value="" style="outline:none;">
<input class="go" type="submit" value="GO!" id="sb"/>
</form>

Feel free to edit the {lang:Search} to change the placeholder text in the searchbar before it's selected. You can also edit the "GO!" section as well. Besides that, if you do not have any prior knowledge to coding (especially with input forms), it's best not to edit anything else!