[SOLVED] Make a large search box

Niska · #1 Jun 11, 2010, 04:55 AM

I'm unable to find howto make the text inside the search box, and the search box, a little bit larger. Is it possible?

juggledad · #2 Jun 11, 2010, 05:11 AM

see http://forum.bytesforall.com/showthread.php?t=6606

Niska · #3 Jun 11, 2010, 05:19 AM

I've tried adding "font-size: 1.2em;" in Style & edit HEADER AREA -> Search Box. But it didn't do any difference.

juggledad · #4 Jun 11, 2010, 05:45 AM

from 'So..you have a problem and need some help...'

Quote:

4 - Provide the version number of Atahualpa and WP you are running - saying 'I'm using the latest version' is useless, what if a new vrsion came out earlier today or you only think you are using the latest version. Besides, six months from now that statement won't help someone else looking for an answer.

5 - Provide the URL! - if there is a problem on a particular page - name the page!!

Niska · #5 Jun 11, 2010, 06:03 AM

Atahualpa 3.5.1. I'm using the default settings.

URL: localhost (for development)

juggledad · #6 Jun 11, 2010, 07:50 AM

are we talking about the search box in the header area or in a sidebar widget?

Niska · #7 Jun 11, 2010, 12:46 PM

In the header. I've just started laborating with this theme and don't have any other widgets than the default ones.

juggledad · #8 Jun 12, 2010, 06:25 AM

add the following to ato->Add HTML/CSS Inserts->CSS Inserts

HTML Code:

div.searchbox-form input {font-size: 1.2em;}

Niska · #9 Jun 12, 2010, 01:02 PM

Thanks! I'll try it.

Jam · #10 Mar 28, 2011, 11:43 PM

Hi all, I've included a Search box in a sidebar widget, Atahualpa 3.4.9, but I would like to make the Search box wider and remove the magnify glass image/icon. Would anyone know how I can remove that image and make the Search field wider (if just removing the image doesnt do it)?

lmilesw · #11 Mar 29, 2011, 12:24 AM

What I do is determine the CSS selector with Firebug then use CSS to style the box with width and height. For the magnifying glass you would determine the selector and use display:none to hide the image.

Jam · #12 Mar 29, 2011, 01:27 AM

Thanks Larry.
For others - I did that, found style="display: block; in searchform.php and changed it to "display: none; and removed some padding while I was there. Fixered

lmilesw · #13 Mar 29, 2011, 10:34 AM

It is better to use CSS in ATO>Add HTML/CSS Inserts>CSS Inserts to make those changes as changes to searchform.php will not hold if you upgrade the theme. For example the selector for the magnifying glass is .searchbutton so to hide it you would use.

HTML Code:

.searchbutton {
display: none;
}

The width of the search box should expand to fit the sidebar.