Firefox search box - how can I make it higher?

The default height of the search box is too small on my hi res. screen.

There must be a way to edit userChrome.css to make it higher and
more visible. Unfortunately, I did lots of googling and can't find an
answer (short of learning programming, style sheets and Fireffox
design).

Can anyone kindly help?

Thank you very much,

DK

DK wrote:
> The default height of the search box is too small on my hi res. screen.
>
> There must be a way to edit userChrome.css to make it higher and
> more visible. Unfortunately, I did lots of googling and can't find an
> answer (short of learning programming, style sheets and Fireffox
> design).
>
> Can anyone kindly help?
>
> Thank you very much,
>
> DK
>
Add the following lines to the userChrome.css file (adjust height/width
values to your likings):

/*
* Adjust width & height of the search box
*/
#find-field {
height: 75px !important;
width: 300px !important;
}


The userChrome.css file can be found in the folder 'chrome' which is a
subfolder of your profile folder. The file doesn't exist by default, but
there should be an example file called userChrome-example.css, which you
simply could rename by removing the -example part. For additional
information, see <http://www.mozilla.org/support/firefox/edit#css>.
--
Regards,

Roland

In article <445329d8$0$31639$e4fe514c@news.xs4all.nl>, Roland de Ruiter <roland.de.ruiter@example.invalid> wrote:
>DK wrote:
>> The default height of the search box is too small on my hi res. screen.
>>
>> There must be a way to edit userChrome.css to make it higher and
>> more visible. Unfortunately, I did lots of googling and can't find an
>> answer (short of learning programming, style sheets and Fireffox
>> design).
>>
>> Can anyone kindly help?
>>
>> Thank you very much,
>>
>>
>Add the following lines to the userChrome.css file (adjust height/width
>values to your likings):
>
>/*
> * Adjust width & height of the search box
> */
>#find-field {
> height: 75px !important;
> width: 300px !important;
>}
>

I tried it for the height and, unfortunately, the pixel value makes
no difference whatsoever. Not even when set it to 200 px....
I should probably mention two things, in case they are relevant
to the lack of success with your edits:

It's Firefox 1.07.

The search bar behavior has already been hacked:
a) The file browser.xul inside browser.jar includes
</toolbaritem>
<toolbaritem id="search-container" title="&searchItem.title;"
align="center" flex="1000"
class="chromeclass-toolbar-additional">
<searchbar id="searchbar" flex="1000"/>
</toolbaritem>
b) The file search.xml inside browser.jar includes
enablehistory="true"

This has an effect of search bar resizing itself with the main
window and havign pulldown history list. I woudln't think any
of it should affect the height but as I picked these edits somewhere
on the net, I wouldn't know.

Any other ideas?

Thanks,

DK

DK wrote:
> In article <445329d8$0$31639$e4fe514c@news.xs4all.nl>, Roland de Ruiter <roland.de.ruiter@example.invalid> wrote:
>> DK wrote:
>>> The default height of the search box is too small on my hi res. screen.
>>>
>>> There must be a way to edit userChrome.css to make it higher and
>>> more visible. Unfortunately, I did lots of googling and can't find an
>>> answer (short of learning programming, style sheets and Fireffox
>>> design).
>>>
>>> Can anyone kindly help?
>>>
>>> Thank you very much,
>>>
>>>
>> Add the following lines to the userChrome.css file (adjust height/width
>> values to your likings):
>>
>> /*
>> * Adjust width & height of the search box
>> */
>> #find-field {
>> height: 75px !important;
>> width: 300px !important;
>> }
>>
>
> I tried it for the height and, unfortunately, the pixel value makes
> no difference whatsoever. Not even when set it to 200 px....
> I should probably mention two things, in case they are relevant
> to the lack of success with your edits:
>
> It's Firefox 1.07.
>
> The search bar behavior has already been hacked:
> a) The file browser.xul inside browser.jar includes
> </toolbaritem>
> <toolbaritem id="search-container" title="&searchItem.title;"
> align="center" flex="1000"
> class="chromeclass-toolbar-additional">
> <searchbar id="searchbar" flex="1000"/>
> </toolbaritem>
> b) The file search.xml inside browser.jar includes
> enablehistory="true"
>
> This has an effect of search bar resizing itself with the main
> window and havign pulldown history list. I woudln't think any
> of it should affect the height but as I picked these edits somewhere
> on the net, I wouldn't know.
>
> Any other ideas?
>
> Thanks,
>
> DK
OK, I thought you were referring to the size of the 'Find in this page'
box which appears at the bottom of the window when you use Ctrl+F (or
Edit > Find in This Page).

For the search engine box (next to the address bar) try to add the
following lines to the userChrome.css file:

/*
* Adjust width & height of the search box
*/
#searchbar {
height: 75px !important;
width: 300px !important;
font-size: 16pt !important;
}

--
Regards,

Roland

In article <4454834c$0$31653$e4fe514c@news.xs4all.nl>, Roland de Ruiter <roland.de.ruiter@example.invalid> wrote:
>OK, I thought you were referring to the size of the 'Find in this page'
>box which appears at the bottom of the window when you use Ctrl+F (or
>Edit > Find in This Page).
>
>For the search engine box (next to the address bar) try to add the
>following lines to the userChrome.css file:
>
>/*
> * Adjust width & height of the search box
> */
>#searchbar {
> height: 75px !important;
> width: 300px !important;
> font-size: 16pt !important;
>}

Thank you very much and sorry for being so vague in asking
the question. This worked perfectly! Now if I also could force
resize of the search engine icons in the searchbox, I would
be a very happy camper!

The width and font now looks perfect but icons are still too small
to be distinctive enough without paying attention.

I suppose it is possible to specify their px diemnsion explicitely?

Than again,

DK

P.S. How is "address bar" officially called? (The place URLs go)
I'd like to resize it as well to match dimensions of the search bar.
Just to make it all look consistent.

DK wrote:
> In article <4454834c$0$31653$e4fe514c@news.xs4all.nl>, Roland de Ruiter <roland.de.ruiter@example.invalid> wrote:
>> OK, I thought you were referring to the size of the 'Find in this page'
>> box which appears at the bottom of the window when you use Ctrl+F (or
>> Edit > Find in This Page).
>>
>> For the search engine box (next to the address bar) try to add the
>> following lines to the userChrome.css file:
>>
>> /*
>> * Adjust width & height of the search box
>> */
>> #searchbar {
>> height: 75px !important;
>> width: 300px !important;
>> font-size: 16pt !important;
>> }
>
> Thank you very much and sorry for being so vague in asking
> the question. This worked perfectly! Now if I also could force
> resize of the search engine icons in the searchbox, I would
> be a very happy camper!
>
> The width and font now looks perfect but icons are still too small
> to be distinctive enough without paying attention.
>
> I suppose it is possible to specify their px diemnsion explicitely?
>
> Than again,
>
> DK
>
> P.S. How is "address bar" officially called? (The place URLs go)
> I'd like to resize it as well to match dimensions of the search bar.
> Just to make it all look consistent.

To enlarge the search engine icons, use the following lines:

/*
* Change size of the search engine images
*/
.searchbar-engine-image {
height: 60px !important;
width: 60px !important;
}

This rule also cause the black dropdown arrow to be enlarged and in fact
it now blocks the engine icon for a large part. I couldn't find a way to
make this arrow smaller or to move it more to the right, but when you
add the following lines, the arrow will be hidden:

/*
* Hide the black downward pointing arrow
*/
.searchbar-dropmarker-image {
display: none !important;
}


You can use the DOM Inspector to find out the id's and classes of the
various Firefox UI elements. IIRC the DOM Inspector is installed by
default and should be available in menu Tools > DOM Inspector. For more
info see <http://kb.mozillazine.org/DOM_Inspector>.

In the DOM Inspector select the window you want to examine from menu
File > Inspect a Window. Then use Search > Select Element By Click (or
the toolbar button to the left of the binocular button) and click in the
Firefox window on the element you're interested in (for instance the
addressbar). Go back to the DOM Inspector window and you'll see that the
element you just clicked is selected in the element tree. The id of the
addressbar appears to be 'urlbar', so you can add a CSS rule for it in
userChrome.css:

#urlbar {
height: 75px !important;
}

In CSS, rules that apply to an id must start with # (like the #urlbar
and #searchbar rules), rules applying to an element's class must start
with . (like the .searchbar-engine-image rule).

For more info, see
<http://developer.mozilla.org/en/docs/CSS:Getting_Started>
<http://www.w3.org/TR/CSS21/>
--
Regards,

Roland

In article <4454f597$0$31647$e4fe514c@news.xs4all.nl>, Roland de Ruiter <roland.de.ruiter@example.invalid> wrote:
>To enlarge the search engine icons, use the following lines:
>
> /*
> * Change size of the search engine images
> */
> .searchbar-engine-image {
> height: 60px !important;
> width: 60px !important;
> }
>
>This rule also cause the black dropdown arrow to be enlarged and in fact
>it now blocks the engine icon for a large part. I couldn't find a way to
>make this arrow smaller or to move it more to the right, but when you
>add the following lines, the arrow will be hidden:
>
> /*
> * Hide the black downward pointing arrow
> */
> .searchbar-dropmarker-image {
> display: none !important;
> }
>
>
>You can use the DOM Inspector to find out the id's and classes of the
>various Firefox UI elements. IIRC the DOM Inspector is installed by
>default and should be available in menu Tools > DOM Inspector. For more
>info see <http://kb.mozillazine.org/DOM_Inspector>.
>
>In the DOM Inspector select the window you want to examine from menu
>File > Inspect a Window. Then use Search > Select Element By Click (or
>the toolbar button to the left of the binocular button) and click in the
>Firefox window on the element you're interested in (for instance the
>addressbar). Go back to the DOM Inspector window and you'll see that the
>element you just clicked is selected in the element tree. The id of the
>addressbar appears to be 'urlbar', so you can add a CSS rule for it in
>userChrome.css:
>
>#urlbar {
> height: 75px !important;
>}
>
>In CSS, rules that apply to an id must start with # (like the #urlbar
>and #searchbar rules), rules applying to an element's class must start
>with . (like the .searchbar-engine-image rule).

Fantastic! Thank you so much for your help! I'll play with DOM inspector
in case any other customizations come to mind.

FF is great! Usenet is great too :-)

DK