MyBB Community Forums

Full Version: Search Bar not working
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I'm trying to fix the search bar on the website and it working when you type something in the search bar but the search button is inactive. How do I link the search bar with the search button to make it where it know that what ever is entered inside that bar will search for that keywords.

Website: Vizzy.VisualizeEdits.com/
Preview of Issue: http://gyazo.com/58c2454799a4480ff1f4feef8f7fb0b6

Header:
<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
                           <div id="top_navigation">
                                    <div id="panel">
				              {$welcomeblock}
			            </div>
                                        <div id="top_navigation_menu">
				        <ul>
					        <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
					        <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
					        <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
					        <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
				        </ul>
                                     </div>
                            </div>

                            <div id="search_box">
                                      <div id="search_bar">
                                               <tr>
                                                         <td valign="top"><input type="text" class="textbox" name="keywords" size="35" maxlength="250"></td>
                                               </tr>
                                      </div>
                                      <div id="search_button">
                                               <input value="Search Forum" name="submit-search" id="search_button" type="submit">
                                      </div>
                            </div>
                            
                            <div id="navigation">
                                         <ul>
					        <li><a href="{$mybb->settings['bburl']}" id="menu_item_index"><img src="{$theme['imgdir']}/toplinks/search.gif" valign="middle" height="15" width="15"/> Forum&nbsp;</a></li>
                                                <li><a href="{$mybb->settings['bburl']}" id="menu_item_index"><img src="{$theme['imgdir']}/toplinks/search.gif" valign="middle" height="15" width="15"/> Example 1&nbsp;</a></li>
					        <li><a href="{$mybb->settings['bburl']}" id="menu_item_index"><img src="{$theme['imgdir']}/toplinks/search.gif" valign="middle" height="15" width="15"/> Example 2&nbsp;</a></li>
					        <li><a href="{$mybb->settings['bburl']}" id="menu_item_index"><img src="{$theme['imgdir']}/toplinks/search.gif" valign="middle" height="15" width="15"/> Example 3&nbsp;</a></li>
					        <li><a href="{$mybb->settings['bburl']}" id="menu_item_index"><img src="{$theme['imgdir']}/toplinks/search.gif" valign="middle" height="15" width="15"/> Example 4&nbsp;</a></li>
					        <li><a href="{$mybb->settings['bburl']}" id="menu_item_index"><img src="{$theme['imgdir']}/toplinks/search.gif" valign="middle" height="15" width="15"/> Example 5&nbsp;</a></li>
				        </ul>
                            </div>
		</div>
			<hr class="hidden" />

		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}
			<navigation>
			<br />

Global.css
body {
	background: #1a1a1a;
	color: #555;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
	text-align: center; /* IE 5 fix */
	line-height: 1.4;
}

a:link {
	color: #026CB1;
	text-decoration: none;
}

a:visited {
	color: #026CB1;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

#container {
	width: 85%;
	background: #efefef;
	color: #000000;
	margin: auto auto;
	padding-top: 10px;
	text-align: left; /* IE 5 fix */
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        margin-top: 60px;
}

#content {
	/* FIX: Make internet explorer wrap correctly */
	width: auto !important;
        padding-left: 10px;
        padding-right: 10px;

}

.menu ul {
	color: #000000;
	font-weight: bold;
	text-align: right;
	padding: 4px;
}

.menu ul a:link {
	color: #000000;
	text-decoration: none;
}

.menu ul a:visited {
	color: #000000;
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #4874a3;
	text-decoration: none;
}

#panel {
	color: #ffffff;
	font-size: 12px;
	padding: 8px;
        margin-bottom: -50px;
}

#panel .remember_me input {
	vertical-align: middle;
	margin-top: -1px;
}

table {
	color: #000000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.tborder {
	background: #81A2C4;
	width: 100%;
	margin: auto auto;
	border: 1px solid #0F5C8E;
}

.thead {
	background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
	color: #ffffff;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #ADCBE7;
	color: #000000;
	font-size: 12px;
}

.tcat a:link {
	color: #000000;
}

.tcat a:visited {
	color: #000000;
}

.tcat a:hover, .tcat a:active {
	color: #000000;
}

.trow1 {
	background: #f5f5f5;
}

.trow2 {
	background: #EFEFEF;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #FFFBD9;
}

.trow_sep {
	background: #e5e5e5;
	color: #000;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
	color: #ffffff;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.bottommenu {
	background: #efefef;
	color: #000000;
	border: 1px solid #4874a3;
	padding: 10px;
}

.navigation {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #00bff3;
        color: #000000;
        border: 1px solid #000;
        padding: 0px;
        width: 165px;
        height: 22px;
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 2px;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	font-size: 13px;
}

select {
	background: #ffffff;
	border: 1px solid #0f5c8e;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #0f5c8e;
}

.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}

.autocomplete_selected {
	background: #adcee7;
	color: #000;
}

.popup_menu {
	background: #ccc;
	border: 1px solid #000;
}

.popup_menu .popup_item {
	background: #fff;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #C7DBEE;
	color: #000;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background-color: #FFFBD9;
	font-weight: bold;
	text-align: center;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#copyright {
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0;
	padding: 10px 0 0 0;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.gif) no-repeat 0;
}

div.error ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}
.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	border: 1px solid #81A2C4;
}

.pagination .pagination_current {
	background: #F5F5F5;
	border: 1px solid #81A2C4;
	font-weight: bold;
	color: #000;
}

.pagination a:hover {
	background: #F5F5F5;
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

.pagination_breadcrumb {
	background-color: #f5f5f5;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	font-weight: normal;
	white-space: nowrap;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

#top_navigation_menu {
        background: #00bff3;
        height: 40px;
	color: #000;
	font-weight: bold;
	text-align: right;
	padding: 4px;
        list-style-type: none;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom: 1px #000;
        padding-right: 22px;
        border-bottom: 1px solid #000;
}

li {
        display: inline;
}

#header {
        background: #efefef;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-top: -10px;
}

#top_navigation {

}

#navigation {
        margin-left: -28px;
}

#search_box {
        background: #00bff3;
        width: 208px;
        height: 38px;
        float: right;
        margin-right: 20px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        margin-top: -1px;
}

#search_bar {
       width: 168px;
       height: 25px;
       margin-top: 8px;
       margin-left: 6px;
}

#search_button {
        background: #1a1a1a;
        width: 28px;
        height: 24px;
        margin-top: -25px;
        margin-left: 173px;
}
The search seems to be working perfectly for me. I searched some terms and I was able to get accurate results.
(2013-07-09, 10:00 PM)Race Wrote: [ -> ]The search seems to be working perfectly for me. I searched some terms and I was able to get accurate results.

Yeah, I figured it out myself. It's looking good now. Smile
That's great. Maybe you should share the solution just in-case someone else has the same issue, they could find the answer here.