Fancy Login
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.
Graceful Degradation
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.
Demostration Video
A short demonstration video showing how the module looks can be downloaded here.
Hotkey
As of 6.x-1.1-Beta2, the login window can be brought up using ctrl + . (period). I don't know if this works on a Mac - if someone could let me know I would be appreciative. 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 graceful degradation mentioned in the last point. 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 stylable 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
Tested Browsers
This module has been tested on the following browsers:
- IE6*
- IE7
- IE8
- FF 2
- FF 3.0.1.2
- FF 3.5
- Safari 3
- Safari 4
- Chrome 2
- Opera 9.64
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
I am releasing this module as a beta, as it has had very little testing so far. It should however be safe enough to use on production sites, because of the nature of the graceful degradation. But, use at your own risk until it has had some more testing.
Releases
| Official releases | Date | Size | Links | Status | |
|---|---|---|---|---|---|
| 6.x-1.1-beta6 | 2009-Aug-25 | 19.19 KB | Download · Release notes | Recommended for 6.x |  |
