Instructions To: Relocate Advanced Search Header Below Menu

[Royal]

Hello Everyone,

For those who love to relocate their Advanced Search Header below Menu.

Position your advanced Search either Left or Right.

Always Back Up, Backup before making any changes.

In (includes/templates/Your_Template/common/ tpl_header.php)

Look for:

<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>

Add code between the blue lines:

<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>

Go to (includes/templates/Your_Template/css/stylesheet.css)

Look for #navMainSearch

#navMainSearch {
	 float: right;
         }

Change to:

#navMainSearch {
         float: left;
         margin: 2em;
         background-image: url(../images/your_background.gif);
         padding: 0.2em;
         }

Style your #navMainSearch the way you like it.


To change keyword, width, and search button go to:

(/includes/templates/Your_Template/sideboxes/tpl_search_header.php)

 if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;<input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />';
  }

Change the keyword, width and button size to your preference:

 if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="100" style="width: 400px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="100" style="width: 400px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;<input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 100px" />';
  }

Have a wonderful year everyone!

[unhappyDAVE]

Great explanation, do you have one for removing it from the header?

Here is what i need-

I have it installed in the header top right corner-

I want to replace it with google adsense search bar. ( java edition)

I am swamped and know if i start this it could be hours till i get it installed correctly-

any help would be greatly appreciated.

[unhappyDAVE]

Never mind- Thanks again for you awesome screen shots- I figured it out -

[unhappyDAVE]

Add code between the blue lines:

Code:

<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
<div id="navMainSearch">***ADDED HERE***
<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '

[Royal]

Never mind- Thanks again for you awesome screen shots- I figured it out -

I'm glad you figure it out. You beat me by 2 minutes.

You are very welcome!

[Royal]

Always remember to Backup before doing any changes.

Tested on v1.38a

I used Explorer (IE) and Firefox browser for Post 1 to view website.

Website contents were on the Far right for Google Chrome and Safari when check.


Correction: Using float move contents to the far right for most browsers.

Go to (includes/templates/Your_Template/css/stylesheet.css)

Look for #navMainSearch

#navMainSearch {
	 float: right;
         }

Change to:

#navMainSearch {
         float: left;
         margin: 2em;
         background-image: url(../images/your_background.gif);
         padding: 0.2em;
         }

Style your #navMainSearch the way you like it.

Remove code: float: left; from #navMainSearch and you will be able to view IE, Firefox, Opera, Safari, Sea Monkey and Google Chrome Browsers.

Go to your Admin/Tools/Layout Boxes Controller.

Look for search_header.php.

1. Turn - Left/Right Column Status: OFF
2. Turn - Single Column Status: ON.

I also notice that I can only have Advanced Search to the left only.

You can still change the width to your preference without having you content swith to either Left/Right.

Go to (includes/templates/Your_Template/css/stylesheet.css)

Look for #navMainSearch

#navMainSearch {
         float: left;
         margin: 2em;
         background-image: url(../images/your_background.gif);
         padding: 0.2em;

         }

Change to:

#navMainSearch {
         background-image: url(../images/your_background.gif);
         width: 100%;
         font-size: 1.2em;         }

Used your background color. Example: (background-color: #9a9a9a;)

Or

Your background image. Example: (url(../images/your-background.gif)

If your width is 750px or any other number you can used that instead of 100%.

Go to http://www.browsershots.org to see how your website look on other browsers.

[Kim]

Great explanation, do you have one for removing it from the header?

Here is what i need-

I have it installed in the header top right corner-

I want to replace it with google adsense search bar. ( java edition)

I am swamped and know if i start this it could be hours till i get it installed correctly-

any help would be greatly appreciated.

You know you can simply turn it off? Admin> Tools> Layout Boxes Controller> Header Search

[Royal]

Remember to Backup before making any changes.

Just remove the blue lines and add the red lines.

I just notice the extra space. Know that look about right

I promise myself I will get some sleep.

Go to (includes/templates/Your_Template/css/stylesheet.css)

#navMainSearch {
         float: left;
         margin: 2em;
         background-image: url(../images/your_background.gif);
         padding: 0.2em;
         }

Change to:

#navMainSearch {
         background-image: url(../images/your_background.gif);
         width: 100%;
         font-size: 1.2em;       
         }

Used your background color. Example: (background-color: #9a9a9a;)

Or

Your background image. Example: (url(../images/your-background.gif)

If your width is 750px or any other number you can used that instead of 100%.

Go to http://www.browsershots.org to see how your website look on other browsers.

Validate your store: http://validator.w3.org/