Fancy Login screenshot


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.


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.

Integration with Other Modules

Version 7.x-3.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). However modules that use drupal_goto() as a redirect in hook_user_login() are not compatible with this module, as this method of redirection disrupts the login form process by redirecting before the form submission is complete.

Known incompatibilities

  • Rules module - a redirect performed upon user login is incompatible with Fancy Login
  • Core Trigger module - a redirect performed on the 'After a user has logged in' trigger is incompatible with Fancy Login
  • Legal module - this module will not work with Fancy Login

Inclusion and Exclusion classes

Beginning with version 7.x-3.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.


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.


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:

  • 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. Servers 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:

  • IE7+
  • 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 was built by Jaypan. We are a development agency specializing in AJAX heavy applications.

Project Information