The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Fast Log In on every page

View previous topic View next topic Go down

Fast Log In on every page

Post by Nemo on 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.


Create 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.

Personalise 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.

Add 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.


avatar
Nemo
Support Moderator
Support Moderator

Male Posts : 1152
Reputation : 117
Language : Greek, English, French

http://www.helpgr.forumgreek.com

Back to top Go down

View previous topic View next topic Back to top


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