Styling the search module

Joomla! is a powerful content management system that 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:

If we now look at the page's HTML source, the HTML generated by Joomla! for the search...