We are going to use some Joomla! extensions to help us add some spice to our site. In keeping with the last example, we are first going to try to show our latest news in an article position.
For this example, I would like to show you a simple, but very interesting extension. It is called jTabs, and although it works in a different way, it will help us show news in tabs. First, search for it in the JED; searching for the name should work, and if not, here's the link:
http://extensions.joomla.org/extensions/style-a-design/tabs-a-slides/8265
Once the extension has been downloaded, navigate to Extensions | Install/Uninstall. Then select the file and click on the Upload File and Install button. Once installed, you can navigate to Extensions | Module Manager and find our newly installed module listed as jQuery tabs module. Let's open it to see the parameters provided (as shown in the following screenshot):
Tip
Before publishing this module, don't forget to unpublish the other modules that occupy the module_2 module position. Then publish this module in position module_2. This will ensure that only our new module occupies this position.
- tabs_type—is used to select Horizontal(Tabs) or Vertical(Tabs). For the first demo we are going to use the Horizontal(Tabs) option.
- Accordion Options—is used when we select Vertical(Tabs) in the previous parameter. Here you can select whether you want the tabs to be triggered when you click on them, or mouse over them.
- Tabs Options—works in the same way as the previous option, but for Horizontal(Tabs). Therefore, we will be using this option in our example. Leaving the default option will work OK; so let's leave it as it is and continue to the next parameter.
- tab lable—is an option that lets us place the label or title that will appear on the tab.
- HTML, text—is used to place the text or HTML code that will go on the tab. We can place almost anything here, such as HTML code, JavaScript, and a lot more.
These last two parameters are repeated a number of times, letting us have nine tabs to use and giving us a lot of freedom of usage. Are you wondering how the module will look on our site? Check the following screenshot:
Looks interesting, but we can work on it a bit more with just two basic
modifications to make it look better with the aesthetics of our site. First, we
are going to remove the white box surrounding our module. This is very easy to
achieve, just open the templates/jj15/css/styles.css file of
our template. Look for the #module_2 style and change the
following code:
#module_2{
background-image: url('../images/back_module_2.gif'),
background-repeat: no-repeat;
float: right;
width: 360px;
height: 280px;
overflow: hidden;
}
The modified code should look as follows:
#module_2{
/*
background-image: url('../images/back_module_2.gif'),
background-repeat: no-repeat;
*/
float: right;
width: 360px;
height: 280px;
overflow: hidden;
margin-top: -22px;
}
Just one more step. Now, open the index.php file of the
template and search for "<div id="module_2">". The code
should be as follows:
<div id="module_2">
<div class="pad">
<jdoc:include type="modules" name="module_2" />
</div>
</div><!-- End module 2 -->
Modify the code as follows:
<div id="module_2">
<jdoc:include type="modules" name="module_2" />
</div><!-- End module 2 -->
In this way we are removing the padding that we were using before. Now our tabs module will use the entire space and will look a bit better. Imagine that we want to change the colors of the tabs, for example we want to make them white over a red background. Well, this can be very easy to achieve.
Just go to our site's modules folder, and there you
will see the mod_jtabs folder and inside that a
jquery folder. Here there are two important things to
change:
-
jquery-ui.css—isthe CSS file where we can change the styles for the tabs -
images—isa folder that keeps the images used for this module
Note
We can take a shortcut by downloading a
theme from the
http://jqueryui.com/ site. Check it under the
themes page, and select one of your liking—there
are lots of them. Just for this example I'm going to use
the one called "Blitzer". After downloading the
theme, uncompress the ZIP file. Inside the
css folder you will see a folder
called Blitzer with a CSS file and
another folder called images. This CSS
file needs to be renamed to
jquery-ui.css. Then, replace the CSS file and
the images folder of our module with
these new ones and there it is! Our changes are
finished.
Now our tabs module will look more like the following screenshot:
I think it's better now, hope you like it too! But anyway, why don't you try to change it to your liking? It's easy.
While working with this module I found some other interesting ones as well. Take a look at the following modules. As always you can search for them on the JED:
- Simple jQuery Tabs—may look similar, but this one will let us place modules in the tabs, instead of text or HTML code—it is very useful, don't miss it.
- SlipTabs—works with neither contents, nor modules, nor text. As you may be thinking, this module can be very interesting. It doesn't seem to be using jQuery, but anyway it's a very good choice.
- RokTabs—is a module that you shouldn't miss. It has some nice JavaScript effects and also uses MooTools. Therefore, it can work OK with any Joomla! installation.
The article slideshow is one of my favorites. Like the tabs in the previous section, the article slideshow will help us in trying to show a large quantity of articles using minimum space possible. In the next example, we will see an interesting module that will show articles in a graceful slideshow and in an infinite loop.
First, as always, we need to download the extension we are going to use. This time we are going to work with the Content Slider Module. We can find it on the JED, or at the following link:
http://extensions.joomla.org/extensions/news-display/articles-showcase/10444
After downloading the module, install it through the Extensions | Install/Uninstall screen. When the module is installed we can navigate to Extensions | Module Manager, and find it listed as Content Slider Module. We will now open the module (as shown in the following screenshot) and see the options provided:
There are not many options this time, but enough for what we need. Let's take a look at them:
- Module Class Suffix—will let us write a suffix for the module, in case we need more power when styling our site. Adding a suffix will help us target this module better with our CSS classes.
- Category—is used to select the category from which the module will take the articles that will be shown on the front page.
- Unique ID—is required if we are going to use more than one instance of this module. We will need to assign a unique ID for each one.
- Interval—will establish the time interval between slides. The greater the number, the more time each slide will stay until the next one is loaded. If we don't want our visitors to hurry while trying to read the content inside each slide, we will need to place an appropriate number here.
- Width and Height—not much to say about these two. Here we can define the width and height of our module. For now, we can start with 280 px as the width and 315 px as the height.
- Randomize items—is an interesting option, but for now I will select No. However, you can modify it to see if it suits your needs.
- Display content item titles—is self-explanatory. For now, we will leave it as Yes.
- Assume jQuery already loaded—is a very useful option, and we will select Yes as we know that we already have another instance of jQuery loaded.
And that's all, but don't forget to enable the module before trying to see it on the frontend.
Note
For this example I'm using the module_4 module position, but you can use any other. Also, this is the only module that I've enabled in that position.
The previous image shows us how the module looks on the frontend. I've tried to capture the moment of change between slides. However, I encourage you to try it on your own to make it a bit more interesting. I have some images mixed along with some icons that my friends at Fairhead Creative prepared for me. You can find those images inside the folder for Chapter 2 in the code download. Do you want to see a preview? See the following screenshot:
When we have all of the images placed we will have made a very neat effect. We may think that it is very similar to the image slideshow that we created in Chapter 1. However, this module has a very strong point; while keeping the interesting dynamic look and movement, we can have text in it. So our module will help us with SEO, as text is always better than images—for SEO I mean.
Although the Content Slider Module extension suits our needs perfectly, there are other extensions that can help us in other occasions. Take a look at the following examples in the JED:
- SlideShow—has some nice features, like arrows that will let our visitors to move between slides.
- YOOcarousel—is a must, though it works with the MooTools JavaScript library. MooTools is the library that comes with Joomla! by default. You can check it out at http://mootools.net/; I really advise you to check it.
- ChiBinhCMS - News Module—is the perfect mix of images and text, though I think it requires a bit more space, it can be useful in certain templates.
It won't make much sense to have the best content in the world if our visitors couldn't search them. For small sites, a good menu structure could be OK. However, for medium or large sites, offering our visitors a search feature is a must, as many visitors will directly search for what they are looking for.
By default, Joomla! has a very powerful search feature that will search through all our site articles. We are going to take a look at this first. In the administrator screen go to Extensions | Module Manager and click on the New button. In the screen that will appear, click on Search (as we are creating a search module). We are going to name it Basic Search and we are going to place it in the search position of our template. After enabling it we can check how it looks on our frontend:
Though it doesn't look bad we can make some tweaks to make it look better.
Let's return to the module admin screen. We are going to add _basicsearch as the Module Class Suffix; this will help us with the styling of the module.
Once we have created the suffix we need to use it. For this we are going to
open a CSS file in our editor. The file is located inside our
template's css folder, and it's called (in a very
original fashion) styles.css. Just add the following code to
the end of the file:
/**
* Basic search styles
*/
.inputbox_basicsearch{
border: 0;
margin-top: 5px;
}
And then, if we reload the frontend, we will see something similar to the following screenshot:
Better now, isn't it? Now when our visitors perform a search (for example, let's imagine that some of them are looking for an interesting topic on our site, like lorem ipsum—that's just a hot topic) they will be redirected to a screen that is similar to the following screenshot:
It will show our visitors all articles on our site that match this criteria. As you can see, it has only taken us a few minutes to prepare a fully working site search. However, there are ways in which we can make it better; just keep reading.
Imagine that our previous sample search gave no results. Our visitors will have to wait for the page to load, just to see that there are no results. Wouldn't it be better if we can show the results without redirecting? Much better I think, and that's exactly what we are going to do with AJAX search.
This time we are going to use the ajaxSearch module. Just search for it in the JED, or download it from the following link:
http://extensions.joomla.org/extensions/search-a-indexing/site-search/8607
After the typical installation process, we will find the module in the Extensions | Module Manager screen. It will be called ajaxSearch. Open its admin screen, and we will take a look at its parameters.
Note
It appears that, by default, the module has the Menu Assignment set to None. We should change this to All, or a selection of menu options according to our needs.
Most parameters are self-explanatory, but let's take a look at them:
- Search box text—here we will place the text that will appear in the search input box on the frontend.
- Bottom text—is a bit confusing, as it says "Nothing found?...". Well, in fact this has nothing to do with "No results found...". It only means that of all the results found, none match our needs. So we are allowed to go to the search page and see the full list of results, as the AJAX search serves us a limited list only.
- No results text—is what appears when nothing is found.
- Category—lets us decide if the category title is to be shown or not.
- Amount of results—relates to the limited list that we commented on before, and indicates the number of results that will be shown. If visitors find a useful link, they will click on it, and if not, they will be able to go to the full search page and see the full list.
- Order by—is the last parameter that gives us the possibility to select the ordering criteria. For now, we will use alphabetical ordering.
Don't forget to enable the module, and select search as its module position.
Note
It would also be a good idea to disable our previous Basic Search module.
If we refresh the frontend, we will see something similar to the following screenshot:
It's evident that we need to make some CSS adjustments, and it will be more evident when we try to perform a search. For example, on performing another "Lorem ipsum" search, we will see something like the next screenshot:
One of our previous modules—the tabs one—is appearing
over our new module. This has to be a problem with CSS styles, most surely
with the z-indexes. So we will need to search the problem, and try to
correct it. It's time to do a little CSS magic! Look for the
modules/mod_ajaxsearch/css/search.css file inside our Joomla!
installation. Open it in your desired editor and look for the following
piece of code:
#suggestions{
width:290px;
position: absolute;
left: 0;
top: 25px;
display:none;
}
We will modify it a bit by adding a z-index clause as follows:
#suggestions{
width:290px;
position: absolute;
left: 0;
top: 25px;
display:none;
z-index: 5000;
}
That will solve the problem. However, as we are already here, we are going to make some more modifications. Search for the following code:
.ajaxsearch .inputbox {
width: 156px;
height:15px;
padding: 3px 0 3px 20px;
margin: 0;
border: 1px solid #999999;
font-size: 10px;
background-image: url(modules/mod_ajaxsearch/img/search_loop.gif);
background-repeat: no-repeat;
background-position: 3px 5px;
float: left;
}
We are going to change the border to 0px, add a
negative margin on the left, add a top margin, and make it's width a bit
smaller as follows:
.ajaxsearch .inputbox {
width: 136px;
height:15px;
padding: 3px 0 3px 20px;
margin: 0;
margin-left: -20px; margin-top: 5px;
border: 0px; font-size: 10px;
background-image: url(modules/mod_ajaxsearch/img/search_loop.gif);
background-repeat: no-repeat;
background-position: 3px 5px;
float: left;
}
Now only one small change remains to be made—the small closing image that appears to the right-hand side of the input box that is controlled by this code:
#loading-not{
position: absolute;
top: 6px;
left: 155px;
We will change it to:
#loading-not{
position: absolute;
top: 6px;
left: 135px;
With all those changes made our AJAX search will look similar to the following screenshot:
This time it looks much better and we are offering a nice feature to our site visitors, who will be able to find what they are looking for without the need to reload the page. Well, with that, we are done with our AJAX search feature.
Note
If enabling this module seems to cause
problems with other modules, it may again be that the
module load of the jQuery library again interferes with
that of the other modules' own loads. This module
loads the jQuery library at the following line in
the
modulesmod_ajaxsearchmod_ajaxsearch.php
file:
$document->addscript(JURI::root(true).'modules'.
DS.'mod_ajaxsearch'.DS.'js'.DS.'jquery-
1.3.2.min.js');
Commenting this line will solve some problems, but then, what happens if no other library is loading the jQuery library? Our module won't work. How can we solve this problem? Keep reading and we will find a solution together.
To see this example, first we need to load a file from this module. The
file is placed in modules/mod_ajaxsearch and is
called mod_ajaxsearch.php. Open it in your desired
editor and look for the following code:
$document->addscript(JURI::root(true).'modules'. DS.'mod_ajaxsearch'.DS.'js'.DS.'jquery-1.3.2.min.js'),
$document->addscript(JURI::root(true).'modules'. DS.'mod_ajaxsearch'.DS.'js'.DS.'script.js'),
As you can see in the module code,
$document->addscript is being used to add scripts to our
site header. So, first we need to know if jQuery is loaded in order to
decide whether or not it should be loaded again. First, comment the previous
lines and then look at the following code:
$custom = '<script type="text/javascript">' ."
"; $custom .= 'if (typeof jQuery == "undefined") {' ."
"; $custom .= 'var script = document.createElement("script");' ."
"; $custom .= 'script.setAttribute("type","text/javascript");' ."
"; $custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ jquery-1.3.2.min.js");' ."
"; $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
"; $custom .= 'var script = document.createElement("script");' ."
"; $custom .= 'script.setAttribute("type","text/javascript");' ."
"; $custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ script.js");' ."
"; $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
"; $custom .= '}else{ ' ."
"; $custom .= 'var script = document.createElement("script");' ."
"; $custom .= 'script.setAttribute("type","text/javascript");' ."
";
$custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ script.js");' ."
"; $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
"; $custom .= '}' ."
"; $custom .= '</script>' ."
"; $document->addCustomTag($custom);
First we will create a $custom variable and place some
JavaScript code inside it. In the following code we are checking if jQuery
is undefined:
$custom .= 'if (typeof jQuery == "undefined") {' ."
";
If jQuery is undefined, it would mean that the jQuery library has not been loaded. So if we want to use it, we will need to load it as follows:
$custom .= 'var script = document.createElement("script");' ."
"; $custom .= 'script.setAttribute("type","text/javascript");' ."
"; $custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ jquery-1.3.2.min.js");' ."
"; $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
";
We create a script element and then we add a
type attribute to it with the value
text/javascript. In a similar fashion we add a
src attribute, which has the path to the jQuery library as its
value. Later we append it to the head section of our
site. After this is done, we do the same for the module's own JavaScript
code as follows:
$custom .= 'var script = document.createElement("script");' ."
"; $custom .= 'script.setAttribute("type","text/javascript");' ."
"; $custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ script.js");' ."
"; $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
";
The important part here comes in the following line:
$custom .= '}else{ ' ."
";
If the jQuery library is loaded, the else part will be
executed and only the module's own JavaScript code will be
loaded:
$custom .= 'var script = document.createElement("script");' ."
"; $custom .= 'script.setAttribute("type","text/javascript");' ."
"; $custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ script.js");' ."
"; $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
";
Lastly, we need to put in the following line:
$document->addCustomTag($custom);
It works in a similar fashion to
$document->addscript, but instead of creating a script tag,
it will load our own code. And that's it, the module is now prepared to
decide if it needs to load the jQuery library or not.
I've placed this code in a file called
ajax_search.txt in the code bundle, so you don't need to
write it all on your own.
Then, we need to make another tiny modification—I promise you
this one is very tiny. Just open the file
modules/mod_ajaxsearch/js/script.js and change the following
line:
$(document).ready(function()
Modify it as follows:
jQuery(document).ready(function()
Also, change all the $ in the document to
jQuery. This last change is needed if you were previously
using MooTools so that jQuery doesn't conflict with it. And that's
all, but you can also check the other extensions.
The following are some other interesting Joomla! extensions: