Most of the time we place login modules on our home page, where people can see them. This is OK, but what about the rest of the pages of our site? Maybe we don't need to have the login form in all of the pages on our site as it takes up space that can be used for other interesting things.
Then what can we do? It would be nice to have a small button that, when pressed, shows us the login form.
That's just what we are going to create next. We will use the c7DialogMOD Module. This module allows us to show another module inside a dialog box.
So why don't we explore this module as we always do? First, search for "c7DialogMOD Module" in the JED or use the following link:
http://extensions.joomla.org/extensions/style-a-design/popups-a-iframes/9173
Download the module and install it. Go to Extensions | Module Manager. But before going into the newly installed module, we have something to do.
On the Module Manager screen click on the New button. Here we are going to create a new Login form:
We are going to call it "Login form", just to be a bit creative. Also, we don't need to enable the module, so we can keep it disabled. Save it, and now to the interesting part. Once you are back on the Module Manager screen, look for c7dialogmod, and click on it.
This will open the module's admin screen. Let's take a look at the following screenshot:
Most of these parameters are quite easy to configure. Well, in fact, all of them are easy to configure, but anyway, why don't we spend a few minutes going through them?
Just don't forget to enable the module. But in which position are we going to
place it? There's no position defined yet. Therefore, we are going to create
one. But this is going to be extremely easy, just open the
templates/jj15/index.php
file.
Once there, look for the following:
<div id="header">
Add the following code snippet just below that:
<div id="login"> <jdoc:include type="modules" name="login" /> </div>
We are done with the index.php
file. The next stop is
the templates/jj15/templateDetails.xml
file. Here we need to
find the following code:
<positions>
Add a new module position, so we can use it later. For example, add the following code, (only the highlighted part):
. . . <position>login</position> </positions>
We are almost done. Only some minor CSS modifications are needed; open
the templates/jj15/css/styles.css
file and search for the
following code:
#header{ height: 58px; }
Modify it as follows:
#header{ height: 58px; position: relative; }
Add the following code below it:
#login{ position: absolute; right: 0; z-index: 1; }
Go to the administrator screen, then to Extensions | Module Manager, and open the c7dialogmod module. We are going to configure some more details of the module, as shown in the following screenshot:
Here we need to check two things. First, we need to check if the module is Enabled, and next, the Position. Next we are going to select our newly created position, that is, login. We are done now, so let's save the settings and go to the frontend of our site.
It's possible that in our frontend you will see something similar to the following screenshot:
This means that we are having some JavaScript problems. But don't worry, we are here to learn how to solve such problems.
When working with different extensions, each extension makes use of the same or different JavaScript libraries and it's very hard not to come upon errors.
This time, as on other occasions, the problem we are facing is that our module is trying to load the jQuery library again. This is, therefore, conflicting with other modules that have already loaded the library.
But this problem is easy to solve—we have already done that in the past
with the help of the SC jQuery plugin and the parameter this plugin sets. We will
now put our hands to work; open the
modules/mod_c7dialogmod/mod_c7dialogmod.php
file. In this file we are
going to search for a line similar to the following:
$document->addScript($burl.'modules/mod_c7dialogmod/jquery /jquery-1.3.2.js'),
Here the module is loading the jQuery library, but, as this has already been done, problems arise. So how do we solve this? Modify the previous line to:
$app =& Jfactory::getApplication(); if( !$app->get('jquery') ){ $document->addScript($burl.'modules/mod_c7dialogmod /jquery/jquery-1.3.2.js'), }
With two easy steps we have solved our problem; first we create an instance
of getApplication
and then use the get
method to check if the jquery
variable is set. If this parameter
doesn't exist, we will load the jQuery library, if not, we don't.
After we have done so, we may find another error, depending on the module version. If you are using the same version as me, Firebug will display something like this:
Remember the admin zone of the c7dialogmod module? There we defined the module Position parameter, and as we wanted the module to appear centered, we selected Center in that parameter.
Let's work to solve this. Open the
modules/mod_c7dialogmod/tmpl/default.php
file and search for the
following code:
$("#c7dialogmod").dialog({ autoOpen: false, position:<?php echo $c7dialogmod_position ?>, height:<?php echo $c7dialogmod_height ?>, width:<?php echo c7dialogmod_width ?>});
Here we need to change two things, so this line will be changed to the following:
$("#c7dialogmod").dialog({ autoOpen: false, position:'<?php echo $c7dialogmod_position ?>', height:<?php echo $c7dialogmod_height ?>, width:<?php echo $c7dialogmod_width ?>});
We have only added the quotes around <?php echo $c7dialogmod_position
?>
, as the position needs to be quoted when making the dialog call.
Also, we have added a $
to the
c7dialogmod_width
variable. And that's it, now our module will
work. Our login button will look as follows:
If we click on the button, we will see the following dialog, containing our login module:
Nice isn't it? This way we can have our login module accessible all over our site without taking the space required for other things.
This is one of those extensions that help us in making our site look better and also be useful at the same time. Throughout the next chapters, we will be creating extensions just like this one—useful and good looking.
Of course, there are many other extensions we could be using, and searching the JED we can come across the following extensions:
However, there are many other extensions. Just visit the JED and you will find lots of useful extensions.
The c7DialogMOD module can be used in some quite creative ways. For example, it can be used to show the login module on the home page, in a module position, and on the rest of the site it will show the dialog button that will open the dialog with the login module.
This way, visitors will see the full login form on the home page, but only the button on other pages, saving us some nice space.
52.15.129.90