How to add search icon?

[Ticko]

Dear All,

In search module, how can i add an icon to the search box?

Please take a look the attachment

Thanks

[manshoomehra]

You can find many "search" extensions with advanced features on extensions.joomla.org

You can disable the default one and use any other as per your needs.
Or you can use Google search as well if you need to earn some money

[duyet]

You need to modify the style of your search input box and add the following:

Code: Select all

background: url("/path/to/images/search.gif") no-repeat scroll 160px 8px transparent;

horizontal offset: 160px
vertical offset: 8px
Depending on the image and the size of the input box you need to play around with those 2 values.

[Ticko]

Hi Duyet,

where can i find the file that need to modify? php file or css?


please kindly give me more detail on this work

Thank you

[duyet]

It should be in the CSS file but can't give you more details as i don't know how it's set up. Is your site online?

You can use FF + firebug addon (search this forum for details help on this) to invest the item which should give you the location of the css file and style which you need to add the image.

[brian]

Why do you insist on making it so hard

1. In the search module itself there is an option called "search button image"
2. Set that to yes
3. If you hover over that you will see a tooltip that says "Use an image as button. This image has to be named searchButton.gif and must be located in templates/*your template name*/images/"
4. So now that you have set this to yes and uploaded the image you are all set to go

No code editing or scrambling through files.

[Ticko]

Hello Brian,

Thanks for your reply.

Yes, i did all the things that you gave above, but it worked as button image

But here the thing that i want it to work is adding search icon inside the search box.

Please kindly see the attachment below.

Thanks

Tick