Drupal login modal window solution

Posted on January 10th, 2010 at 3:48 pm

This is a solution for creating a pop-out lightbox login area on any Drupal v6 site.

Modules used for this are:
Lightbox2 (I used the Dev version 6.x-1.x-dev dated 2009-NOV-23)

Go to the Lightbox2 settings and make sure ‘enable login support’ is selected.

Then create a custom block (blocks/add block), lets call it ‘login box’

Give the block a title of ‘test’ and add a line of text. Make sure the page specific visibility settings are set to only show on one page, i.e. ‘About Us’. This is purely due to testing but will save your life if you come up against the WSOD (White Screen Of Death) caused by some broken code. Save the block and then on the Blocks page move it to a region that you know is in your template. Before you do anything else please just check that the block you’ve created is appearing on the correct page and no other.

Once that’s done it’s time to enter the working Login Modal Window code in our new block. Edit the block and put this in the Block Body field. I have FCKeditor working on my Drupal build (I’ve no idea if it’s a default Drupal module – let me know) which lets you enter code by selecting ‘Source’ before you put this in:
<?php global $user;
if ($user->uid) {
print '<p><a href="/logout">Logout</a></p>';
} else {
print '<p><a rel="lightmodal" href="/user/login">Login</a></p>';
}
?>

Then below the body text area I have some Input Format settings. Please choose ‘PHP code’ (again, I’m not sure if this is a native Drupal option). If anybody apart from yourself will be editing the site make sure that their ability to post PHP code is turned off.

Now save the block again and look at the page it appears on. You should get ‘logout’ appearing if logged in and ‘login’ if you’re logged out. When you click ‘Login’ a modal window should appear allowing you to enter your login information. This should then close when you hit return, or take you to a normal login page should you enter any wrong details. Now go ahead and style that login link however you want!

Please leave comments if you think I’ve done this wrong, left out huge parts of the process or think there’s a better way to do this. This is my first post about Drupal and I really want to keep it as ‘layman’ as possible. Thank you.

This entry was posted on Sunday, January 10th, 2010 at 3:48 pm and is filed under Drupal. You can follow any responses to this entry through the RSS 2.0 feed.

11 comments so far.

Please add a comment