Introduction

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:

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.”
onblur=”if(this.value==”)this.value=’search…’;”
onfocus=”if(this.value==’search…’) this.value=”;” />
</div>
<input type=”hidden” name=”task” value=”search” />
<input type=”hidden” name=”option” value=”com_search” />
<input type=”hidden” name=”Itemid” value=1 />
</form>

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 templatesrhuk_milkywaycss directory of your Joomla! installation. The rhuk_milkyway template already defines the style for the form as follows:

  #search {
  float: right;
  width:320px;
  margin-top: -20px;
  margin-right: 30px;
  height: 40px;
  overflow: hidden;
  text-align:right;
  }

• 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:

  

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 http://james.padolsey.com/javascript/fixing-focus-in-internet-explorer/.

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 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 templatesrhuk_milkywaycsstemplate.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:

  

• 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:

  

• 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!