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">
</form>
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiwB-3J9EDXtqjo-kZysFBqkITiinAbGSTS5nXAgKRdCk6lG9vioqBzPCRrs2XhCc8x9exmJZnwiIypQ8QzOzJ2WCpMig6IFAYTu1_0ROm3hPNGFvk_AnUX3rHytSMuEjPFmOdjFRnlAE/s2048/searchicon.png') 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;
float:right;
}
#search input[type="text"]:focus {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiwB-3J9EDXtqjo-kZysFBqkITiinAbGSTS5nXAgKRdCk6lG9vioqBzPCRrs2XhCc8x9exmJZnwiIypQ8QzOzJ2WCpMig6IFAYTu1_0ROm3hPNGFvk_AnUX3rHytSMuEjPFmOdjFRnlAE/s2048/searchicon.png') no-repeat 10px 6px #fcfcfc;
width: 230px;
float:right;
}
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!
.art-object989822972
{
position: absolute;
top: 110px;
right:10px;
width:300px;
height: 24px;
}
Related Articles
/Web Design
- Build Web Hosting Server On Mikrotik Double Router Port Forwarding and Script Automatic Update Dynamic IP
- Build Web Hosting Server by self Using Dynamic IP, Wamp Server with Router Port Forwarding
- Basic GitHub & Migrating All GoogleCode SVN Projects
- Remove the Url Link on Blog Comments
- Quick Search JSON on Blog Posts Own Search Box
- Joomla Image Lightbox Evolution All Images
- Jquery Image Items Slider Caroufredsel for Blogger
/Joomla
Wow great information and this is what I was looking for. Thanks for this great help. Website Development Company Bangalore | Web Design Company Bangalore
ReplyDeleteThanks for sharing such informative post
ReplyDeleteWeb Design Company in Belgaum | web development company in Belgaum | IT companies in Belgaum | Web Design Companies in Belgaum | Software Companies in Belgaum
I just glad reading your post, thanks for updating and sharing great article
ReplyDeletewebsite security certificate | ssl certificate price | Dedicated Servers in India | cheap dedicated hosting india
Your comment was great it’s really helpful for me a lot,Thank you so much for share my blog.
ReplyDeleteJeans Manufacturers in Delhi
Great this blog was really helped me, Thank you for share my blog.
ReplyDeleteweb design company in delhi
Awesome blog, I got a lot of valuable information by this. Thank you so much for share my blog.
ReplyDeleteLifestyle Magazine
Superb blog comment, thanks for this valuable information.
ReplyDeleteShipping Company in India
These contents are very valuable to all readers and I gain my knowledge after visiting your post. Really thank you & Keep it up...
ReplyDeleteTableau Training in Chennai
Tableau Certification in Chennai
Pega Training in Chennai
Primavera Training in Chennai
Unix Training in Chennai
Power BI Training in Chennai
Job Openings in Chennai
Excel Training in Chennai
Tableau Training in Thiruvanmiyur
Tableau Training in Porur
This comment has been removed by the author.
ReplyDeleteVery Informative and interesting blog! Primavera P6 training online | Primavera online course
ReplyDeleteWonderful blog.Thanks for sharing such a worthy information...
ReplyDeleteDigital Marketing Courses in Bangalore
Digital Marketing Course in Pune
Digital Marketing Course in Hyderabad
Digital Marketing Course in Gurgaon
Great post. keep sharing such a worthy information.
ReplyDeleteGraphic Design courses in Chennai
Online Graphic Design Course
Graphic Design Courses In Bangalore
Great post. Thanks for sharing such a useful blog.
ReplyDeleteselenium training in t nagar
Selenium training in chennai