This plugin will allow you to add a quick login form to the toolbar, so you can quickly login from any page on your Forumotion forum.
Note : The toolbar must be activated to make use of this plugin. To activate the toolbar, go to Admin Panel > Modules > Toolbar > Config and activate the toolbar.
1. Installing the JavaScript To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.
Title : Quick Login (Toolbar) Placement : In all the pages
- Code:
(function() { var lang = { title : 'Please enter your username and password to log in.', username : 'Username : ', password : 'Password : ', automatic : 'Log in automatically : ', login : 'Log in', register : 'Register', forgot : 'I forgot my password', redirect : window.location.href // page the user is redirected to upon login }; // quick login theme document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arr10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333;background:#FFF;border:1px solid #CCC;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#FFF;background:#39C}#fa_quick_login input.mainoption:focus{color:#FFF;background:#8B5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');
$(function() { if (!_userdata.session_logged_in && _userdata.activate_toolbar) { var container = document.createElement('DIV'); container.id = 'fa_quick_login'; container.style.display = 'none'; container.innerHTML = '<form action="/login" method="post" name="form_login"><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><th colspan="3" class="thHead" nowrap="nowrap" height="25">' + lang.title + '</th></tr><tr><td width="100%" align="center" class="row1"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="row1 align_gauche"><table width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="align_droite" width="50%"><span class="gen">' + lang.username + '</span></td><td width="50%"><input type="text" name="username" value="" size="25" maxlength="40"></td></tr><tr><td class="align_droite"><span class="gen">' + lang.password + '</span></td><td><input type="password" name="password" size="25" maxlength="32"></td></tr><tr align="center"><td colspan="2"><span class="gen">' + lang.automatic + '<input type="checkbox" name="autologin" checked="checked"></span></td></tr><tr align="center"><td colspan="2"><input type="hidden" name="redirect" value="' + lang.redirect + '"><input type="hidden" name="query" value=""><input type="hidden" name="tt" value="1"><input class="mainoption" type="submit" name="login" value="' + lang.login + '"></td></tr><tr align="center"><td colspan="2"><br><span class="gensmall"><a class="gensmall" href="/register">' + lang.register + '</a> | <a class="gensmall" href="/profile?mode=sendpassword">' + lang.forgot + '</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></form>'; document.body.appendChild(container);
$(function() { var right = document.getElementById('fa_right'); if (right) { right.firstChild.onclick = function() { var login = document.getElementById('fa_quick_login'), offset = this.getBoundingClientRect(), loffset;
if (login) { if (/none/.test(login.style.display)) { login.style.display = ''; loffset = login.getBoundingClientRect(); login.style.top = offset.top + 30 + 'px'; login.style.left = offset.left - ((loffset.right - loffset.left) - (offset.right - offset.left)) + 'px'; login.getElementsByTagName('FORM')[0].username.focus(); this.className += ' fa_login_actif'; } else { login.style.display = 'none'; this.className = this.className.replace(/fa_login_actif/, ''); } } return false; }; } }); } }); }());
Save the script and you should now have a quick login display when you click the "login" button on your toolbar !
If you want to make any modifications, please see the next section.
2. Modifications Language : At the top of the script are some general settings for changing the language or wording of the texts. These are the options related to texts which you can change or translate to whatever you want :
- Code:
title : 'Please enter your username and password to log in.', username : 'Username : ', password : 'Password : ', automatic : 'Log in automatically : ', login : 'Log in', register : 'Register', forgot : 'I forgot my password', Note : When using single quotes inside the string, make sure to escape them with the escape character. ( \ ) So instead of 'Don't' you should write 'Don\'t'
However, the last option -- redirect -- allows you to change the page you're redirected to upon login. By default the value of this option is window.location.href which is the current page you're on. You can replace this with a string if you want to redirect people to a specific page ; the portal for example :
- Code:
redirect : '/portal' // page the user is redirected to upon login
Theme : The theme for the quick login is included in the script. If you have a dark theme for your forum and want to change the quick login theme, find this part of the script :
- Code:
// quick login theme document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arr10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333;background:#FFF;border:1px solid #CCC;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#FFF;background:#39C}#fa_quick_login input.mainoption:focus{color:#FFF;background:#8B5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');
and to make it dark, replace the above by the following :
- Code:
// quick login theme document.write('<style type="text/css">#fa_quick_login{color:#FFF;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#333;border:1px solid #111;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arrd10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#CCC}#fa_quick_login a.gensmall:hover{color:#FFF}#fa_quick_login input{color:#FFF;background:#111;border:1px solid #444;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#666}#fa_quick_login input:focus{border-color:#999;outline:0}#fa_quick_login input.mainoption{color:#999;border:1px solid #999;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#333;background:#999}#fa_quick_login input.mainoption:focus{color:#333;background:#FFF;border-color:#FFF}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#FFF;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>'); Which will give you this :
The themes in the script are minified, but you can find the unminified CSS for the themes here, denoted by "login_theme_xxx.css" so it's easier to edit. If you want, you can remove the document.write() portion and add the theme into your CSS. However, if you want to keep the theme in the script, you can minify the CSS with this tool : http://cssminifier.com/
|