Customizing Search Module and Search Component using Joomla! 1.5

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Templates Cookbook

Joomla! 1.5 Templates Cookbook — Save 50%

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

£14.99    £7.50
by Richard Carter | June 2010 | Joomla! Open Source

With the widespread empowering of website owners being able to manage their own website's content, there are a huge number of content management systems available. Joomla! is one of the most popular of these content management systems with a large user base and active community who are constantly working to improve Joomla! for new and future users.

In the first article of the three part article series by Richard Carter, author of Joomla! 1.5 Templates Cookbook we will learn:

  • Styling the search module
  • Styling the search component

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:

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."
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 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;
    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:

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

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

Joomla! 1.5 Templates Cookbook Over 60 simple but incredibly effective recipes for taking control of Joomla! templates
Published: July 2010
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

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 http://example.com/index.php?option=com_search, assuming that you have Joomla! installed at example.com:

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' );?>
    </button>

  • Replace this line with:

    <input type="image" name="Search" onclick="this.form.submit()"
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this->baseurl ?>templates/rhuk_milkyway/
    images/search.png"
    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

Summary

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

 

Joomla! 1.5 Templates Cookbook Over 60 simple but incredibly effective recipes for taking control of Joomla! templates
Published: July 2010
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North-east of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the Northeast of England. He graduated from the University of Durham in Software Engineering. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter.

Magento 1.8 Theme Development is Richard's seventh book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, Magento Responsive Theme Design, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt


Mastering Joomla! 1.5 Extension and Framework Development
Mastering Joomla! 1.5 Extension and Framework Development

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

Joomla! 1.5 Site Blueprints
Joomla! 1.5 Site Blueprints

Joomla! 1.5 Templates Cookbook
Joomla! 1.5 Templates Cookbook

Amazon SimpleDB Developer Guide
Amazon SimpleDB Developer Guide

Spring Python 1.1
Spring Python 1.1

Spring Security 3
Spring Security 3

Drupal 6 Panels Cookbook
Drupal 6 Panels Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software