Customizing Search Module and Search Component using Joomla! 1.5

Over 60 simple but incredibly effective recipes for taking control of Joomla! templates


Although we've seen how to alter much of our Joomla! website, there's still much we can do to improve and polish our Joomla! template to perfection.

Styling the search module

Joomla! is a powerful content management system which is capable of supporting websites with hundreds and even thousands of pages. When websites become this large, it's often important to provide your website's visitors with a search feature as a means of locating the information on your website that they are looking for. One option that Joomla! provides for your visitors to search your website is the search module, which is a block displayed within your template.

Getting ready

Identify the class or id assigned to your Joomla! template's search form, which is assigned by a jdoc include statement within your template's index.php file. In the rhuk_milkyway template—the one that we've been working with—the search feature is assigned to the user4 block by default with this jdoc statement:

<jdoc:include type="modules" name="user4" />

It appears to the top-right of the template:

Customizing search Module and search Component

If we now look at the page's HTML source, the HTML generated by Joomla! for the search feature looks like this:

<div id="search">
<form action="index.php" method="post">
<div class="search">
<input name="searchword" id="mod_search_searchword"
maxlength="20" alt="Search" class="inputbox"
type="text" size="20" value="search."
onfocus="if(this.value=='search...') this.value='';" />
<input type="hidden" name="task" value="search" />
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="Itemid" value=1 />

This means that we can apply CSS to #search to style our template's search box.

How to do it...

  • Open your template's primary stylesheet file, which is usually called template.css, and is located in the templates\rhuk_milkyway\css\ directory of your Joomla! installation. The rhuk_milkyway template already defines the style for the form as follows:

    #search {
    float: right;
    margin-top: -20px;
    margin-right: 30px;
    height: 40px;
    overflow: hidden;

  • By adding CSS to change the search field's state when a visitor focuses within it, you can help improve your Joomla! template by orientating visitors to their whereabouts on the page:

    #search input[type='text']:focus {
    border-color: #09C /* blue */


  • Once you've uploaded the altered template.css file, you will now see a blue border surrounding the search field:

    Customizing search Module and search Component

How it works...

By using the CSS pseudo-class :focus, the browser changes the attributes we define to make it clearer to our website's visitors that their input device (for example, keyboard) is focused on the search input field.

Internet Explorer versions 7 and below do not support the :focus pseudo-class. You can provide support in Internet Explorer for this feature of CSS with the use of JavaScript; see

See also

  • Understanding Joomla! template positions
  • Styling the search component

Styling the search component

Along with providing the search module, which is embedded within your Joomla! template depending on the module position it is assigned to, there is the Joomla! search component.

Getting ready

Firstly, you need to access the search component on your Joomla! website. You can do this by visiting, assuming that your Joomla! installation is installed in the root directory of the domain. With the rhuk_milkyway template as your currently enabled template, you should see that the search component looks like this:

Customizing search Module and search Component

Open your template's primary CSS file; for our example, this is templates\rhuk_milkyway\css\template.css. It is also worth studying the source of the search component page; you'll find that the search form is contained within a &gt;form< element identified with an id of searchForm.

How to do it...

  • In your template's CSS file (template.css), begin by styling the overall form first:

    form#searchForm {
    background: #E5F1FD;
    border: 1px #0C3A6D solid;
    border-radius: 10px;
    padding: 10px

    Some browsers do not yet support the border-radius property in CSS, so you may just see the search form with squared corners.

    This changes the look of the search form as follows:

    Customizing search Module and search Component

  • Next, you'll style the search query field, which is identifiable by the #search_searchword id:

    #searchForm #search_searchword {
    border: 2px #0C3A6D solid;
    color: #0C3A6D

    This helps to distinguish the search field from the other fields in the form:

    Customizing search Module and search Component

  • Lastly, you'll add some padding to the table cells used to lay the search component form out to provide a little more space between inputs to prevent visitors accidentally clicking:

    #searchForm table td {
    padding: 5px

    That's the search form styled!

    Customizing search Module and search Component

How it works...

By applying CSS to the relevant elements generated by Joomla!, it's possible to redefine what the search form provided by Joomla!'s search component looks like.

See also

  • Styling the search module
  • Using template overrides in your Joomla! template

Using template overrides in your Joomla! template

You can use template overrides in your Joomla! template to redefine the output HTML that Joomla! creates for the modules and components on your installation. This can be useful when you are unable to achieve the style you want for your Joomla! template with the markup provided in the base template that you are using.

Getting ready

In this example, you'll be changing the search component's Search button, as displayed at, assuming that you have Joomla! installed at

Customizing search Module and search Component

One such thing that you may want to change is the Search button. In this example, we'll change it to a <input type= "image" /> so that we're able to use an image for the Search button rather than the browser's default rendering of the <button> element that we can see in the previous screenshot.

How to do it...

  • Save the search button graphic that you want to use in place of the Search button in the templates\rhuk_milkyway\images directory as search.png:

    Customizing search Module and search Component

  • Next, you need to copy the contents of the default_form.php file located in the components\com_search\views\search\tmpl directory of your Joomla! installation into the templates\rhuk_milkyway\html\com_search\views\search directory. You may need to create the I subdirectory and its child directories (view and search) if they do not already exist. Locate the line that reads:

    <button name="Search" onclick="this.form.submit()"
    class="button"><?php echo JText::_( 'Search' );?>

  • Replace this line with:

    <input type="image" name="Search" onclick="this.form.submit()"
    src="<?php echo $this->baseurl ?>templates/rhuk_milkyway/
    alt="<?php echo JText::_( 'Search' );?>" />

  • Your new search component form now looks like this:

    Customizing search Module and search Component

How it works...

By default, Joomla! looks in a component's own directory within the currently enabled Joomla! template for a custom template override. If Joomla! fails to find this file, it looks in the /components directory for the relevant file with which to generate the required HTML by the component.

See also

  • Styling the search module
  • Styling the search component


In this article we have learned:

  • Styling the search module
  • Styling the search component

In the next article we will learn: How to Customize your Template


Books to Consider

Learning Joomla! 1.5 Extension Development: Creating Modules, Components, and Plugins with PHP
$ 13.20
Building Websites with Joomla! 1.5
$ 16.20
Joomla! 1.5 Site Blueprints
$ 23.99
comments powered by Disqus

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free