Header Search Box - How to add text?

[maxim]

I would like to add "Search For" before the header search box that reads "Enter search keywords here". Is that possible? How (bearing in mind that I'm a newbie)?

Note: I have changed the text in the search box and for the search button.

[fairestcape]

This is a bit of a hack, but it seems to work...

See my example at http://www.buysouthafrican.co.uk/shop

If you are using a CUSTOM template, then the files that I list in this post must be edited and saved into your custom folders.

I have a TEST SHOP which uses the CLASSIC template, so this will be my custom template in my examples below. If you have a different template, then in the directory paths below, substitute YOUR template wherever you see \classic\.

1. Create a folder called sideboxes, in your custom template: eg:-
( includes\templates\classic\sideboxes\ )

2. Using FTP, navigate to:-
includes\templates\template_default\tpl_search_header.php
and ftp a copy to your hard drive.

3. Open the hard-drive copy of tpl_search_header.php for editing.

Original code starts as:-

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_search_header.php 4142 2006-08-15 04:32:54Z drbyte $
 */
  $content = "";

Edit it as follows:-

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_search_header.php 4142 2006-08-15 04:32:54Z drbyte $
 */
 ?>
 <div id="searchHeaderText"><?php echo SEARCH_HEADER_TEXT; ?></div>
<?php
  $content = "";

So, you are INSERTING the following above the $content line

 ?>
 <div id="searchHeaderText"><?php echo SEARCH_HEADER_TEXT; ?></div>
<?php

Save the file on your hard drive, then FTP it to:-
includes\templates\classic\sideboxes\
(ie: the new sideboxes folder you created in your CUSTOM template).

------------------------------------------------
NEXT STEP
------------------------------------------------

4. FTP a copy of your english.php file to your hard drive. (If you already have english.php in your custom template, then that is the one to edit. If not, FTP this one:-
\includes\languages\english.php)

5. Open it for editing and find (around line 74)the lines:-

//text for sidebox heading links
  define('BOX_HEADING_LINKS', '  [more]');

// categories box text in sideboxes/categories.php
  define('BOX_HEADING_CATEGORIES', 'Categories'); 

6. Insert the following line underneath, using similar spacing:-

//text for search header label text
  define('SEARCH_HEADER_TEXT', 'Search for:'); 

7. Save the file.

8. FTP it into:
\includes\languages\classic\

---------------------------------------------------------------
NEXT STEP
---------------------------------------------------------------

9. Open your stylesheet.css file (again, you should edit one in your CUSTOM css folder - \includes\templates\classic\css\stylesheet.css ).

Insert the following lines at the bottom of the stylesheet:-

#searchHeaderText {
        padding-top: 0.5em;
        float: left;
} 

10. Save the file, (and if you edited a copy on your hard drive, send it to your custom css folder.)

You can adjust " padding-top: 0.5em; " to suit your needs... 0.6em, or 0.4em ...

[fairestcape]

SORRY...

In Number 2 above...

2. Using FTP, navigate to:-
includes\templates\template_default\tpl_search_header.php
and ftp a copy to your hard drive.

should be...

2. Using FTP, navigate to:-
includes\templates\template_default\sideboxes\tpl_search_header.php
and ftp a copy to your hard drive.

[maxim]

Thanks so much for the assistance, fairestcape. Just one problem: the "Search for" text is sitting above the search box, instead of next to it.

P.S. It wasn't too much of a hack for the newbie. Also, I have to pick up my 2 year old, so I won't be able to try any new advice until bedtime. (smiley face)

[schoolboy]

Just one problem: the "Search for" text is sitting above the search box, instead of next to it.

This is why the addition to the stylesheet is important...

#searchHeaderText { 
        padding-top: 0.5em; 
        float: left; 
} 

The FLOAT: LEFT; should nudge it down to the left of the search input field.
The PADDING-TOP will adjust it's height, relative to the input field.

If you added this to your stylesheet, and you are STILL getting the text ABOVE the search field, then you may had added the style commands to the incorrect stylesheet.

Put up your site URL so I can see if this is the case...

[maxim]

Problem solved!!! Thanks for all the help and guidance.

I think I was encountering the formatting problem since I have Alternative Header v1.1a installed, which centers the header search box. I am still trying to figure CSS out, but I changed the following:

#searchHeaderText {
        padding-top: 0.5em;
        float: left;
}

to:

#searchHeaderText {    
        padding-top: 1.0em;
        display:inline;
        vertical-align:top;

And it worked.

[schoolboy]

Good stuff...

Yes, you will often need to tweak the stylesheet according to the template you are using.

The point is that the stylesheets now govern so much of the layout that one has to become proficient in CSS if one intends to create a specific look and feel.