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.
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.
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
This module should integrate with other modules that deal with the login form. Tested modules include the Persistent Login module, and the No Request New Password module. In some circumstances this module does not integrate well with Login Toboggan. If you find that there is an integration issue with another module out there, please let me know and I will look into it.
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
The fancy login display CSS is all 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 admin/settings/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 - 8
- FF 2 - 3.6
- Safari 3 - 5
- Chrome 2 65
- Opera 9.64 - 11
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
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:
- Find your theme directory
- Open the file named page.tpl.php
- Directly before the closing body tag (
</body>), paste the following code:<?php print $closure; ?>
Version
January 27/2011: Version 7.x-1.0-BETA2 released. BETA1 was missing a required file and as such will not work. BETA2 contains this file.
January 25/2011: Version 7.x-1.0-BETA1 released. The code required a fair bit of re-writing for Drupal 7, and as such has been released as a beta version. If there are no reported issues in the next few weeks, I will release a release candidate.
January 25/2011: Version 1.7 release. Added feature to have the 'Request new password' link open up in the modal window rather than redirecting the user to the RNP page. Re-wrote the javascript to run smoother and have less chance of conflict with other modules. Minor bug fix for a bug some users were seeing.
Sept 22/2010: Version 1.6 release. Added feature allowing fade speeds to be customized. Added HTML ID to login form to enable easier styling and javascript targeting.
August 25/2010: Version 1.5 release. Minor bug fix for users not using clean URLs. JavaScript cleaned up to run a little faster/smoother.
June 18/2010: Version 1.4 release. I strongly recommend upgrading from version 1.3 as soon as possible, as the 'request new password' and 'create account' links don't work in version 1.3 due to a bug in the javascript.
Developer
Fancy Login was built by Jaypan.
Project Information
- Maintenance status: Actively maintained
- Development status: Under active development
- Reported installs: 2168 sites currently report using this module. View usage statistics.
- Last modified: January 27, 2011
