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 http://example.com/index.php?option=com_search, assuming that your Joomla! installation is installed in the root directory of the example.com domain. With the rhuk_milkyway template as your currently enabled template, you should see that the search component looks like this:
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<form> element identified with an id of searchForm.
How to do it...
1. In your template's CSS file (
template.css), begin by styling the overall form first:form#searchForm...
