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.