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.

Fast Log In on every page

Go down

Tutorial Fast Log In on every page

Post by Nemo November 30th 2016, 10:46 pm

Fast Log In on every page


This tutorial will give you the possibility to create a pop-up window every time someone clicks on the Log In button. The form is available without being redirected to another page.

Fast Log In on every page  QiW264C

Fast Log In on every page  09615110Create the script


In order to create the script, you need to go to your ACP(Admin Control Panel) > Modules > HTML & JAVASCRIPT > Javascript codes management and create a new script which will be available in every page:

Code:
$(function() {
    if (_userdata["session_logged_in"] == "0") {
        /* PERSONNALISATION DES TEXTES */
        var txt_username = "Username",
            txt_password = "Password",
            txt_login = "Log In",
            txt_remember = "Log in automatically",
            txt_guest = "Have you not registered yet ?",
            txt_create = "Register",
            txt_lost = "Have you forgotten your password ?",
            txt_recover = "Retrieve it";
        /* END OF PERSONALISATION - Do not modify the code below */
 
        $('body').prepend('<div id="quickloginform_overlay" style="display:none;z-index:2147483647"></div><div id="quickloginform" style="display:none;z-index:2147483647"><form id="fa-login-form" class="login-form" name="form_login" method="post" action="/login"><input type="text" maxlength="40" name="username" placeholder="' + txt_username + '" required=""><input type="password" maxlength="32" name="password" placeholder="' + txt_password + '" required=""><button name="login">' + txt_login + '</button><label><p>' + txt_remember + ' <input type="checkbox" style="vertical-align: middle;" name="autologin"></p></label><p style="float:left; text-align:left;">' + txt_guest + '<br><a href="/register">' + txt_create + '</a></p><p style="float:right; text-align:right;">' + txt_lost + '<br><a href="/profile?mode=sendpassword">' + txt_recover + '</a></p><div style="clear:both;"></div><input name="redirect" value="' + window.location.pathname + '" type="hidden"></form></div>');
 
        $('a[href*="/login"]').click(function() {
            $('#quickloginform, #quickloginform_overlay').fadeIn();
            $('#quickloginform input[name="username"]').focus();
            return false;
        });
 
        $(document).click(function(e) {
            if ($(e.target).closest('#quickloginform form').length === 0) {
                $('#quickloginform, #quickloginform_overlay').fadeOut();
            }
        });
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                $('#quickloginform, #quickloginform_overlay').fadeOut();
            }
        });
    }
});


Exclamation The Javascript code management should be enabled.

Fast Log In on every page  09615110Personalise the script


The first part of the script can be personalised in order to meet your needs :

Code:
var txt_username = "Username",
            txt_password = "Password",
            txt_login = "Log In",
            txt_remember = "Log in automatically",
            txt_guest = "Have you not registered yet ?",
            txt_create = "Register",
            txt_lost = "Have you forgotten your password ?",
            txt_recover = "Retrieve it";

Exclamation Do not forget to add the quotes after you have modified the text.

Fast Log In on every page  09615110Add the CSS


If you want to have the same appearance with the example above, you need to add this CSS.

Go to your ACP(Admin Control Panel) > Display > Pictures and Colors > Colors > CSS and add the following code:

Code:
#quickloginform_overlay {
  background-color:#333;
  height:100%;
  left:0;
  opacity:0.7;
  position:fixed;
  top:0;
  width:100%;
}
#quickloginform {
  height:100%;
  position:fixed;
  top:20%;
  width:100%;
}
#quickloginform>form {
  background-color:#fff;
  box-sizing:border-box;
  margin:auto;
  padding:20px 30px;
  width:360px;
  border-radius:3px;
}
#quickloginform input[type="password"],#quickloginform input[type="text"] {
  background:#f2f2f2 none repeat scroll 0 0;
  border:0 none;
  box-sizing:border-box;
  font-family:"Helvetica";
  font-size:14px;
  margin:0 0 15px;
  outline:0 none;
  padding:15px;
  width:100%;
}
#quickloginform button {
  background-color:#369fcf;
  border:0 none;
  color:#ffffff;
  cursor:pointer;
  font-family:"Helvetica";
  font-size:14px;
  outline:0 none;
  padding:15px;
  text-transform:uppercase;
  width:100%;
}
#quickloginform p:nth-child(n) {
  margin-bottom:0;
  margin-top:20px;
  text-align:center;
}
#quickloginform form p {
  color:#b3b3b3;
  font-size:11px;
}
#quickloginform form a {
  color:#2b86b3;
  text-decoration: none;
}

You can modify the appearance of the pop-up window as you wish. By default, the color of the Log In button is this one : #369fcf
You can modify it in 38th line of the code.

You can test this script by logging out and then by clicking on the Log In button.

Exclamation The toolbar must be enabled.

Technical Notes:
  • The pop-up window opens by clicking on any Log In link whether it is on the navigation bar or not,
  • The pop-up window closes by clicking outside of it or by clicking on the Escape button (ESC) on your keyboard,
  • After you log in, you will be redirected to the page you were before you logged in.


Nemo
Nemo
Active Poster

Male Posts : 1203
Reputation : 119
Language : Greek, English, French

http://www.helpgr.forumgreek.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum