Knowledgebase

How to change the size of the search field in MediaWiki

The Search block is in most cases displayed in the sidebar of the site, usually in the left column. This depends on the skin. Some skins may display it in the header or footer, and some may have more than one search block on the site.

With most skins the Search block consists of a search field for typing the search word(s) and under it there are Go and Search buttons. In some cases there isn't a whole block but just a search field without any buttons (e.g. Vector skin).

If for some reason you want to change the size of the search field, you can do that with simple CSS modifications. You can change its width and height. It doesn't matter whether you want to make it bigger or smaller; you can do both things. In this article we'll show you how to do that.

The code for changing the width has the form:

element { width: 150px; }

And for the height it's respectively:

element { height: 16px; }

If you want to change both dimensions you can also combine them (produces the same result as when adding them separately):

element { width: 150px; height: 16px; }

You have to replace element with the actual tag and/or ID with which the search field is defined in the particular skin. Some skins may have the same ID, but in others it may be different. So one modification may work with one skin, but not with another. In the code you can set the size to whatever number you want. You can experiment to see what works best for you and the skin that you use. Making the field too big or small may overlap other elements on the site or change the layout. In the above examples we have set the size in pixels, but you can also use em. It's the recommended way to do it but most people are not that used to it and prefer to use pixels. Both ways work. 1em equals 16px.

In MediaWiki CSS modifications are made by adding them to the content of the page MediaWiki:Common.css on your site (e.g. yourdomain.com/index.php/MediaWiki:Common.css). If you want only a particular skin to be affected, you can add the modification to the CSS page of that skin instead (e.g. MediaWiki:Vector.css for the Vector skin). For more information on this check out the article on how to make CSS modifications in MediaWiki. There you'll also find helpful information on how to find out what the ID or class of the search field is in the skin that you use.

As we mentioned, the way the search field is defined (in the HTML of the pages) depends on the skin. The ID or class that's used to identify it is then used for the CSS modification for changing its size. Here we'll give examples with skins that come prepackaged with MediaWiki: Vector, MonoBook, Modern, Cologne Blue. Of course, in any of the examples you can change the number for the width and height with the one you want.


Vector

By default, the height is set to 1.4em and the width to 12.6.

div#simpleSearch { width: 15em; } - changes the width of the search field to 15em. If you prefer it, you can use pixels (e.g. div#simpleSearch { width: 240px; } ).

div#simpleSearch { height: 1.6em; } - changes the height of the search field.



MonoBook and Modern

#searchInput { height: 1.6em; } - changes the height of the search field.

#searchInput { width: 12.5em; } - changes the width of the search field.

In these two skins the search field is defined with the same ID (#searchInput). If you add the modification to MediaWiki:Common.css, this ID may also affect the Vector skin. This refers to the height in particular; it won't change the height of the search field in the Vector skin, but it will alter its layout a bit. To avoid this, instead of adding the modifications in MediaWik:Common.css, you can add the modifications for the MonoBook and Modern skins to the pages MediaWiki:MonoBook.css and MediaWiki:Modern.css respectively. An alternative is to add in front of the code an additional ID that's used in the MonoBook and Modern skins but not in Vector. You can use the ID #searchBody (e.g. #searchBody #searchInput { height: 1.6em; }).



Cologne Blue

In this skin there are two search fields. One is in the left column and another one in the footer. The following examples will affect both:

input.mw-searchInput { width: 10em; } - changes the width of the search fields (in the sidebar and in the footer).

input.mw-searchInput { height: 1.6em; } - changes the height of the search fields.

If you want to change the size only of the search field in the sidebar, you can do this by adding #p-search in front of the above example codes. For instance:

#p-search input.mw-searchInput { width: 10em; }

#p-search input.mw-searchInput { height: 1.6em; }

In case you want to change the size only of the search field in the footer, you can do this by adding #searchform-footer in front of the code that affects both fields. For example:

#searchform-footer input.mw-searchInput { width: 10em; }

#searchform-footer input.mw-searchInput { height: 1.6em; }

In our knowledge base you can find other articles with CSS modifications that you may find useful:

Was this answer helpful?

 Print this Article

Also Read