2012-06-30, 12:09 PM
Hi all
I have installed the search bar similar to mybb forum.
i have added this in my header template below logo div
and added this in global.css
but the bar is placed under the logo image. how to bring it over the logo.
i have figured out the issue and its rectified now.
but i have a different issue now. that is the search bar is in correct position when the window is maximized. but when the window is restored to a smaller size the bar keeps moving in as the window gets smaller. how do i make it in a fixed position.
visit www.techtimes.co.in to see what i am trying to say. try maximize and resize the window.
I have installed the search bar similar to mybb forum.
i have added this in my header template below logo div
<div id="search">
<form action="{$mybb->settings['bburl']}/search.php" method="post">
<fieldset class="noborder">
<label for="search_box"><span id="search_left"></span></label>
<input name="keywords" id="search_box" title="Enter your search keywords" type="text">
<input value="Search Forum" name="submit-search" id="search_button" type="submit">
<input type="hidden" name="action" value="do_search"></fieldset></form>
</div>
and added this in global.css
div#search {
top: 165px;
right: 120px;
height: 26px;
position: absolute;
display: inline-table;
float: right;
}
span#search_left {
background: url(images/toplinks/search_left.gif) no-repeat;
width: 3px;
cursor: text;
height: 26px;
display: block;
position: relative;
float: left;
top: 0;
font-size: 2px;
}
input#search_box {
background: #fff url(images/toplinks/search.gif) 5px no-repeat;
width: 150px;
border: 1px solid #024570;
border-left: 0;
padding: 5px;
padding-left: 25px;
height: 14px;
float: left;
top: 0;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
}
input#search_button {
background: url(images/toplinks/search_button.gif) 100% 0% no-repeat;
width: 99px;
color: #fff;
border: 0;
padding: 4px 6px 4px 6px;
float: left;
top: 0;
height: 26px;
cursor: pointer;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
}
input#search_button:hover {
background-position: 100% 100%;
}
fieldset.noborder {
border: 0;
}
but the bar is placed under the logo image. how to bring it over the logo.
i have figured out the issue and its rectified now.
but i have a different issue now. that is the search bar is in correct position when the window is maximized. but when the window is restored to a smaller size the bar keeps moving in as the window gets smaller. how do i make it in a fixed position.
visit www.techtimes.co.in to see what i am trying to say. try maximize and resize the window.