How to add search icon?

General questions relating to Joomla! 2.5. Note: All 1.6 and 1.7 releases have reached end of life and should be updated to 2.5. There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Ticko
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Thu Mar 01, 2012 8:41 am

How to add search icon?

Postby Ticko » Fri Jul 06, 2012 7:14 am

Dear All,

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

Please take a look the attachment

Thanks
You do not have the required permissions to view the files attached to this post.

manshoomehra
Joomla! Intern
Joomla! Intern
Posts: 72
Joined: Wed Dec 14, 2011 1:49 pm
Location: Everywhere
Contact:

Re: How to add search icon?

Postby manshoomehra » Fri Jul 06, 2012 9:38 pm

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 :)

User avatar
duyet
Joomla! Guru
Joomla! Guru
Posts: 935
Joined: Wed Sep 21, 2011 8:21 pm
Location: on earth
Contact:

Re: How to add search icon?

Postby duyet » Sat Jul 07, 2012 9:36 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Thu Mar 01, 2012 8:41 am

Re: How to add search icon?

Postby Ticko » Tue Jul 10, 2012 5:31 am

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

User avatar
duyet
Joomla! Guru
Joomla! Guru
Posts: 935
Joined: Wed Sep 21, 2011 8:21 pm
Location: on earth
Contact:

Re: How to add search icon?

Postby duyet » Tue Jul 10, 2012 7:44 am

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.

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 11656
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: How to add search icon?

Postby brian » Tue Jul 10, 2012 10:06 am

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.
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

Ticko
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Thu Mar 01, 2012 8:41 am

Re: How to add search icon?

Postby Ticko » Fri Jul 13, 2012 9:01 am

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
You do not have the required permissions to view the files attached to this post.


Return to “General Questions/New to Joomla! 2.5”

Who is online

Users browsing this forum: No registered users and 7 guests