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.

How to make this type of login pop up?

View previous topic View next topic Go down

How to make this type of login pop up?

Post by The Singer on December 21st 2016, 7:19 am

See the screenshot bellow:
how to make this one?

The Singer
Forumember

Male Posts : 193
Reputation : 2
Language : english

http://avacschat.yforum.biz

Back to top Go down

Re: How to make this type of login pop up?

Post by skouliki on December 21st 2016, 8:04 am

hello

delete link / mistake


Last edited by skouliki on December 21st 2016, 11:17 am; edited 1 time in total

skouliki
Graphic Designer
Graphic Designer

Female Posts : 1849
Reputation : 279
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: How to make this type of login pop up?

Post by ChanelW on December 21st 2016, 11:15 am

Hello @Skouliki,

The article you have provided is for users granted with special permissions Sad

Thanks,
ChanelW :rose:

ChanelW
Trial Reviewer
Trial Reviewer

Female Posts : 319
Reputation : 43
Language : English
Location : Merry Christmas!

Back to top Go down

Re: How to make this type of login pop up?

Post by skouliki on December 21st 2016, 11:19 am


skouliki
Graphic Designer
Graphic Designer

Female Posts : 1849
Reputation : 279
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: How to make this type of login pop up?

Post by amghidh on December 21st 2016, 11:30 am

Hi,

JavaScript:
"All Pages"
Code:
$(function() {
    if (_userdata["session_logged_in"] == "0") {
        /* PERSONNALISATION DES TEXTES */
      var txt_username = "Username:",
          txt_password = "Password:",
            txt_login = "Login",
            txt_remember = "Auto-Login next time",
            txt_guest = "Not registred?",
            txt_create = "Sign Up",
            txt_lost = "Forgot password?",
            txt_recover = "Recover";
        /* 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();
            }
        });
    }
});

CSS:
Code:

/** 24. Quick Login**/
#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;
}

King Regards,
Good Luck

amghidh
Forumember

Posts : 40
Reputation : 5
Language : EN FR AR TM
Location : Algeria

http://odros.yoo7.com

Back to top Go down

Re: How to make this type of login pop up?

Post by ChanelW on December 21st 2016, 11:33 am

Hello @The Singer,

Is that forum hosted by forumotion?

Thanks,
ChanelW :rose:

ChanelW
Trial Reviewer
Trial Reviewer

Female Posts : 319
Reputation : 43
Language : English
Location : Merry Christmas!

Back to top Go down

Re: How to make this type of login pop up?

Post by The Singer on December 21st 2016, 11:59 am

@amghidh wrote:Hi,

JavaScript:
"All Pages"
Code:
$(function() {
    if (_userdata["session_logged_in"] == "0") {
        /* PERSONNALISATION DES TEXTES */
      var txt_username = "Username:",
          txt_password = "Password:",
            txt_login = "Login",
            txt_remember = "Auto-Login next time",
            txt_guest = "Not registred?",
            txt_create = "Sign Up",
            txt_lost = "Forgot password?",
            txt_recover = "Recover";
        /* 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();
            }
        });
    }
});

CSS:
Code:

/** 24. Quick Login**/
#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;
}

King Regards,
Good Luck
wow! Just wow, thanks man for help

The Singer
Forumember

Male Posts : 193
Reputation : 2
Language : english

http://avacschat.yforum.biz

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