Graphic Motion Video Art, Website, IT Network, Culture

Expand Click Search Box on Joomla

Joomla is the Content Management System (CMS) to build your website that was equipped by the system for searching of the content database of you website. In other words it doesn't require an additional scripts or any extensions, if you want to make search box and search results. You just need to make the style of your search box as you like. Joomla already have the searching system inside. Let's get started about the implementation expand click search box on  Joomla website.

There is rather difference to implementing expand click search box on the blog. Joomla Expand Click Search Box connected to the internal database joomla system as the CMS. You have to integrate the style of your search box with the system searching on your joomla website. Especially when you making the html script code that will inserted to the index.php of your template that signed by the tag of <form...>...</form>. form tag contain with css id that will integrated with the searching system, so that the search box styles that will created related to the searching system that connected to the database of the content.

1. Inserting the form tag of search box to the index.php of your template that used. Login to Joomla backend (administrator). Select Extensions> Template Manager. Let's take a look the pictures below! On the Customise Template click on Edit Mainpage Template. You will find index.php of your template.

Once you find the index.php of your template try to find the form tag as shown like the picture below. But if your template does't have search box yet, you must define of your search box positions as a wrapper of the new expand click search box. In this case I just use the position that was existing on my template and replace the form tag with the new one that have been integrated the searching system of the joomla as shown like the picture below, look at on the area that i marked with red color.

art-object989822972 : css class to define the position of expand click search box on the template
<form …>…</form> : form tag of the search box

Actually the above picture just a illustration for the placing of form tag, when i am with the script code script there are any mistake that make when the keyword was typed, can't searching anymore, it is unable to connected the input to the system searching to the database of  joomla. I have fix that for  the scripts code of the form tag that should be like the script code below.
<form id="search" name="Search" action="<?php echo $document->baseurl; ?>/index.php" method="post">
<input placeholder="Search..." size="40" type="text" value="" name="searchword">
<input type="hidden" name="option" value="com_search">
The red color is the name of css id expand click search box that makes the effect expand click when the user type any keywords on the search box.
The blue color is a php url path of the system search of joomla content databas.
The green color is the text on the search box when the expand click search box does not activate or not used.

Next you need to change on the red mark, that must be adjusted with the name of the css id of expand click search box style that will created.

2. Defining the CSS id of expand click search box. Same as the first step, login to the Joomla backend (administrator). Select Extensions>Template Manager.  On Customise Template click on Edit Template css/css template, then you have to select the template css.

Look at the right picture above, this is how you put the css script code for expand click search box as the additional css script. The complete css scripts code for the expand click search box like the script code below!
#search {
#search input[type="text"] {
    background: url('') no-repeat 10px 6px #ffffff;
    border: 1px solid #000000;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #000000;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 1px rgb(26, 56, 103) inset;
  transition: all 0.5s ease-in-out 0s;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;

#search input[type="text"]:focus {
    background: url('') no-repeat 10px 6px #fcfcfc;
    width: 230px;

I think you can must do a little change, adjust it on your template. Actually the css script code might be a little bit different when you apply in different template. If you can adjust the color, direction of the expand depending on your template and search box position, etc.

3. Adjust the position of expand click search box on your Joomla template. Still on the template.css,  Next you adjust the css class or id that you use of your search box wrapper. Just for example for the wrapper of the form tag of the search box, I used the css class of "art-object989822972" I was adjust the position of the search box. The css class that used for the wrapper like this!
  position: absolute;
  top: 110px;
  height: 24px;
If something still any confusing, let's see this above article video, good luck!

Share This Article :
Related Articles


Back to Top