X-Cart forums - image in search box form field

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - image in search box form field (https://forum.x-cart.com/showthread.php?t=39059)

amcc	04-14-2008 01:51 AM

image in search box form field

How can i put a magnifying glass image into the search box form field, so that it is either:

fixed permanently to the left; or

disappears when you put the mouse curser in the box to start typing

Cheers

carpeperdiem

04-14-2008 05:13 AM

Re: image in search box form field

can you show an example of how another site does this? I've never seen an image embedded into a text field. ever. is this even possible?

balinor

04-14-2008 05:58 AM

Re: image in search box form field

If you are talking about something like apple.com, that is done by using a background image.

carpeperdiem

04-14-2008 06:02 AM

Re: image in search box form field

Quote:

Originally Posted by balinor

If you are talking about something like apple.com, that is done by using a background image.

That's cool! How do they do that? How do they make the left side of the input box have a text margin? CSS is your friend, I guess...

balinor

04-14-2008 06:05 AM

Re: image in search box form field

I'm guessing they just tuck an image up next to the search box, as I don't think that is part of the actual search box.

Yurij

04-14-2008 06:05 AM

Re: image in search box form field

Quote:

Originally Posted by amcc

For the text of this is done so (open file skin1/customer/search.tpl):

Find this line and change it:

PHP Code:


		
			
<td valign="middle"><input type="text" name="posted_data[substring]" size="16" value="{$search_prefilled.substring|escape}" /></td>

On this line:

PHP Code:


		
			
<td><input type="text" name="posted_data[substring]" onFocus="this.value = (this.value == 'Enter Keyword') ? '' : this.value;" onBlur="this.value = (this.value == '') ? 'Enter Keyword' : this.value;"   size="37" value="Enter Keyword"  /> </td>

carpeperdiem

04-14-2008 06:10 AM

Re: image in search box form field

Quote:

Originally Posted by balinor

I don't think that is part of the actual search box.

Apple is tricky.

They are using a transparent image with an "onFocus" to CHANGE the image from normal to highlighted, and the search field is within it. Very smart designer and programmer there. It's a VERY functional user interface. Uh, Duh. It's Apple. :-) If anyone figures out exactly how they do it, please share.

Jayk	04-14-2008 08:13 AM

Re: image in search box form field

That is pretty cool. I'd like to see how to do that one too.

Jason

kube	04-14-2008 12:05 PM

Re: image in search box form field

Here's one variation. It's called prettysearch, this ones uses the mootools framework...
http://www.conviodesign.com/2007/08/26/pretty-search/

amcc	04-15-2008 01:13 AM

Re: image in search box form field

Thanks Yurij, that worked great. I found this in relation to the background image but haven't tried it out yet:

http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/

All times are GMT -8. The time now is 02:40 PM.