Fancy Login screenshot

Overview

Fancy Login adds javascript based, lightbox-style login functionality to your site. When the user clicks on any link that links to /user/login, they screen dims and a login box is created in the center of the screen.

Development status

The Drupal 7 version is actively maintained, and new features will be added if/when requested. Version 7.x-3.0 will receive new features, and is the recommended branch. Version 7.x-2.0 will receive bug fixes, however this version will become unsupported as soon as version 7.x-3.0 receives a full (non-beta) release.

Version 6.x-2.0 has been released as a backport of version 7.x-3.0. Version 6.x-1.x is no longer supported, and will not receive any updates.

Installation

Installation is as simple as installing the module. After it is installed, any anchor tag (<a>) that goes to the URL user/login will automatically be enabled with the Fancy Login functionality. A block is also provided (though disabled upon installation) that contains such a link. This can be used to replace the current login block that ships with Drupal. This block will not appear when a user is signed in. You can also add links to anywhere on your page, using any method, as as long as the destination is user/login, the link will be ajaxified.

Progressive Enhancement

Because Fancy Login is set up to target any anchor tag that goes to user/login, if the user either doesn't have javascript enabled, or is on a browser that doesn't support javascript, they be taken to the user/login page, meaning that no functionality is lost, as they can sign in on this page.

Demonstration Video

A short demonstration video showing how the module works (version 1.2 - a little outdated) can be downloaded here.

Integration with Other Modules

Version 7.x-2.0 (and above) of this module should integrate normally with any module that alters the user_login_block form (the form provided in the normal user_login_block). Modules that force a redirect upon login may or may not work, so if you have specific examples where it is not, please open an issue in the issue queue.

Inclusion and Exclusion classes

Beginning with version 7.x-3.0-beta4 and 6.x-2.0-beta4, inclusion and exclusion classes have been added:

  • Inclusion: Any element on the page with a class of .fancy_login_show_popup will show the popup when clicked.
  • Exclusion: Any element that would normally show the popup that has a class of .fancy_login_disable will now not show the popup.

Please note that exclusion takes precedence over inclusion, so if an element has both classes, the popup will not show when that element is clicked.

Hotkey

The login window can be brought up using ctrl + . (period). Theoretically this means that all login links could be removed from the page altogether, and users would use this hotkey when visiting the site in order to login. However, this would result in a loss of the progressive enhancement mentioned earlier. Although they could still log in at user/login, so no users would be locked out.

Customization

Some of the Fancy Login CSS is inserted inline using javascript. As a result, these settings cannot be overridden in your theme directory (inline CSS always takes precedence over stylesheets). In order to be able to style the login page, I have created an administration page at:

  • D6: admin/settings/fancy_login.
  • D7: admin/config/people/fancy_login

Various CSS settings can be set here in order to customize the display of the fancy login to match your site.

The close button styling however cannot be set on the administration page. The styling for the close button is all set in in an external stylesheet and if I were to make it styleable through the administration page, it would add to the javascript footprint of the module, making it a little heavier. If you wish to change the styling of the close button, add the following to CSS selectors to the style.css stylesheet in your theme (note: some themes may name their stylesheet something other than style.css), and make the necessary changes:

  • #fancy_login_close_button
  • #fancy_login_close_button:hover

SSL (Secure Login)

This module supports secure login. Please check the settings page for the relevant settings. Sites must have SSL enabled to be able to use this feature. An optional themeable icon can be added to the HTML above or below the form. The html for the form can be overridden by creating the file ssl-icon.tpl.php in your theme directory, and inserting whatever HTML you want there.

Tested Browsers

This module has been tested on the following browsers:

  • IE6*
  • IE7 - 9 (should work in 10 and 11 as well, but not tested)
  • FF 2+
  • Safari 3+
  • Chrome 2+
  • Opera 9+

If you find it does not work on any browsers I have not tested, please let me know.

* Fancy Login doesn't actually work with IE6 - it just gracefully degrades, letting the link act as a normal link bringing the user to the login page. This module uses position:fixed which is not supported by IE6. There are ways around this, but to be honest, I can't be bothered taking the time to make it happen for a broken browser. But, if anyone else wants to take the time, then please feel free and I will happy to examine and include your changes if they work.

Troubleshooting

D6: If you find that you click a link and either nothing happens, or that the screen fades out but the login box doesn't appear, it's very possible that your theme isn't outputting it's closure tag. To fix this, do the following:

  1. Find your theme directory
  2. Open the file named page.tpl.php
  3. Directly before the closing body tag (</body>), paste the following code:
    • <?php print $closure; ?>

D7: This issue does not exist in D7, due to the method of inserting the block into the page

Development

Fancy Login was built by Jaypan. We are a development agency specializing in AJAX heavy applications.

Project Information

Downloads