Those of us who use Joomla are accustomed to having a Search or News Flash module in our website’s header.

In a recent conversation, Artisteer said that placing a search module in the header was on their “to do list”. That being said, you can assign Joomla’s search module to an existing template position (see below) or create your own position and styling.

There has been much interest on this site for a flexible search module, so this update includes screen shots along with easy document edits.

Decide where you would like your search module. If an existing template position is best for your web site, then use it. In my case, I only need a search module on my “Tips” page, not in an available template position.

We’ll now modify index.php, set up the search module in Joomla’s Administrator, and add CSS classes for styling.

Because I want the search module on the menu bar, I’ll place the following within the “art-Sheet” <div> tag of index.php:

<div class="art-Sheet">
<div class="module_search"><jdoc:include type="modules" name="search" /></div>

Next, set up the search module in your Joomla Administrator. Type in “search” for the module position, and for the Module Class Suffix, type in “_search” (both without quotes).

Refer to the screen shot for the settings.

Open your current template’s style sheet, template.css, and create a new class name, “div.module_search”. We’ll adjust the search module's position and then add personal styling for the search module’s input box.

You can open and edit both index.php and template.css in Joomla. If you use an FTP client, as I do, and want to edit them directly, index.php is located in templates/your_template_name/index.php. And template.css is located in templates/your_template_name/css/template.css.

My search is on the menu bar as shown in this screen shot.

The CSS will look something like this:

div.module_search
{
position: absolute;
top: 245px; /* position */
left: 745px; /*position*/
z-index: 2;
}

Now we’ll style the search input field, so create a new class name, “.inputbox_search”. We’ll define it's height, width, and background image.

.inputbox_search
{
width: 120px;
height: 20px;
background: #8bbbdd url('../images/search.png') no-repeat right center;
border: solid 1px #6b9c6d;
color: #333;
}

We’re done, so remember that when a visitor requests a document, well formatted and readable copy is the goal.

Aavailable Joomla positions follow.

ShareClose