toolbar - Add a quick login form to the toolbar Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    Add a quick login form to the toolbar

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    Tutorial Add a quick login form to the toolbar

    Post by Ange Tuteur October 16th 2015, 11:33 am

    Add a quick login form to the toolbar


    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.

    toolbar - Add a quick login form to the toolbar Login12

    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.


    toolbar - Add a quick login form to the toolbar 09615110 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>&nbsp;&nbsp;|&nbsp;&nbsp;<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 ! Smile

    If you want to make any modifications, please see the next section.


    toolbar - Add a quick login form to the toolbar 09615110 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 :
    toolbar - Add a quick login form to the toolbar Dark11


    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/


    This tutorial was written by Ange Tuteur.
    • Back to top