Changing the Search Bar on PHPmotion

Print Friendly, PDF & Email

While the default blue coloring may be nice looking, it doesn’t match ANY of the other ways your default PHPmotion template shows drop-downs, textfields, or submit buttons. See register/login pages for examples. Luckily, its extremely easy to change your search-bar to match your other pages. As a bonus, it will add a professional touch to almost any theme you may be using. Gray buttons are a universal symbol for end users, and keeping with quasi-standards ensures that visitors to your site experience the ease-of-use that keeps them coming back.

This MOD is so easy, I let my mom implement it on one of my own sites.

This mod was tested and used on:

  • PHPmotion 3.5 rev-39
  • PHPmotion 3.5 rev-72

Use on other versions at your own risk.

Step 1:
Navigate to the main_1.htm file inside of the desired template you wish to change. The filepath to your default director will look something like this: /themes/default/templates/main_1.htm

Step 2:
Find this code:

<!–Begin Search Bar–>
<div id=”search-bar”>
<form method=”get” action=”search.php” autocomplete=”off”>
<select size=”1″ name=”type” style=”font-family: verdana; font-weight:bold; font-size: 10pt; width:88px; color:#FFFFFF; border: 1px inset #F5F5F5; background-color: #7AB0D8″ />
<option value=”videos”>[var.lang_word_videos]</option>
<option value=”audios”>[var.lang_word_audios]<!–[onload;block=option;when [var.enable_audio]=1;comm]–></option>
<option value=”images”>[var.lang_word_images]<!–[onload;block=option;when [var.enable_images]=1;comm]–></option>
<option value=”groups”>[var.lang_groups]</option>
<option value=”blogs”>[var.lang_blogs]<!–[onload;block=option;when [var.enable_blogs]=1;comm]–></option>
</select>
<input autocomplete=”off” id=”keyword” name=”keyword” value=”Search [var.site_name]” onclick=”clickclear(this, ‘Search [var.site_name]’)” onblur=”clickrecall(this,’Search [var.site_name]’)” style=”font-family: verdana; font-weight:bold; font-size: 10pt;  height:18px; width:188px; color:#FFFFFF; border: 1px inset #F5F5F5; background-color: #7AB0D8″ />
<input type=”submit” value=”Search” style=”font-family: verdana; font-weight:bold; font-size: 10pt; width:88px; color:#FFFFFF; border: 1px inset #F5F5F5; background-color: #7AB0D8″ />
<div id=”searchBoxSuggestions”></div>
</form>
</div>
<!–End Search Bar–>

The code above will cause your Search Bar to look something like this:

Step 3:
Replace with this code:

<!–Begin Search Bar–>
<div id=”search-bar”>
<form method=”get” action=”search.php” autocomplete=”off”>
<select size=”1″ name=”type” sstyle=”font-size: 9pt; width:58px; height:17px; font-weight:bold; color:#000; letter-spacing: 1; border: 1px solid #DFDCDC; background-color: #FDFDFD” />
<option value=”videos”>[var.lang_word_videos]</option>
<option value=”audios”>[var.lang_word_audios]<!–[onload;block=option;when [var.enable_audio]=1;comm]–></option>
<option value=”images”>[var.lang_word_images]<!–[onload;block=option;when [var.enable_images]=1;comm]–></option>
<option value=”groups”>[var.lang_groups]</option>
<option value=”blogs”>[var.lang_blogs]<!–[onload;block=option;when [var.enable_blogs]=1;comm]–></option>
</select>
<input type=”text” autocomplete=”off” id=”keyword” name=”keyword” value=”Search [var.site_name]” onclick=”clickclear(this, ‘Search [var.site_name]’)” onblur=”clickrecall(this,’Search [var.site_name]’)”  />
<input type=”submit” value=”Search” />
<div id=”searchBoxSuggestions”></div>
</form>
</div>
<!–End Search Bar–>

Which will change your Search Bar to look something like this:

Step 4:
Save your file

Step 5:
Upload your new main_1.htm and try out a search!

, , ,

No comments yet.

Leave a Reply