[TUT] - A simple responsive login

[TUT] - A simple responsive login

ie:





firstly, for testing purposes we need to comment out the min-widths in the following:

global.css

find:

#container {
	color: #333;
	text-align: left;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	min-width: 990px;
}

.wrapper {
	width: 85%;
	min-width: 970px;
	max-width: 1500px;
	margin: auto auto;
}

comment out like so:

#container {
	color: #333;
	text-align: left;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	/*min-width: 990px;*/
}

.wrapper {
	width: 85%;
	/*min-width: 970px;*/
	max-width: 1500px;
	margin: auto auto;
}

add to your .css file:

/*** Simple Respo Login TUT by: V ***/

@media screen and (max-width: 900px) {

 /* modal */

 .modal {
 max-width: 300px;
 }

 /* textbox */

 .login-wrapper form .login-row input.textbox {
 width: 70% !important;
 }
 .login-wrapper form .login-row input {
 padding-left: 70px !important;
 }
}

/* modal */

.modal {
 width: 440px !important;
}

.modal a.close-modal {
 z-index: 999999;
}

::selection {
 background: rgba(125, 173, 217, 0.3);
}

.login-container {
 position: relative;
 text-align: center;
 z-index: 999999 !important;
}

.login-wrapper {
 width: 100%;
 background: #fff;
 border-radius: 5px;
 box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
}

.login-wrapper .title {
 height: 90px;
 background: #007FD0;
 /*background: #393D3F;*/
 border-radius: 5px 5px 0 0;
 color: #fff;
 font-size: 30px;
 font-weight: 600;
 display: flex;
 align-items: center;
 justify-content: center;
}

.login-wrapper .title .logo img {
 height: 60px;
}

.login-wrapper form {
 padding: 30px 25px 25px 25px;
}

/* textbox */

.login-wrapper form .login-row input.textbox {
 width: 84%;
}

/* login row */

.login-wrapper form .login-row {
 height: 45px;
 margin-bottom: 15px;
 position: relative;
}

/* login input */

.login-wrapper form .login-row input {
 height: 100%;
 width: 100%;
 outline: none;
 padding-left: 60px;
 border-radius: 5px;
 border: 1px solid lightgrey;
 font-size: 16px;
 transition: all 0.3s ease;
}

.login-wrapper form .login-row input:focus {
 border-color: #007FD0;
 box-shadow: inset 0px 0px 2px 2px rgba(125, 173, 217, 0.25);
}

.login-wrapper form .login-row input::placeholder {
 color: #999;
}

/* login row icon */

.login-wrapper form .login-row i {
 position: absolute;
 width: 47px;
 height: 51px;
 color: #fff;
 font-size: 18px;
 background: #007FD0;
 border: 1px solid #007FD0;
 border-radius: 5px 0 0 5px;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* login row  password */

.login-wrapper form .login-password {
 margin: -4px 0 20px 0;
 text-align: left;
}

.login-wrapper form .login-password a {
 color: #007FD0;
 font-size: 17px;
 text-decoration: none;
}

.login-wrapper form .login-password a:active,
.login-wrapper form .login-password a:hover {
 text-decoration: underline;
 color: #FF7500;
}

/* login button */

.login-wrapper form .button input {
 color: #fff;
 font-size: 20px;
 font-weight: 500;
 padding-left: 0px !important;
 background: #007FD0;
 border: 1px solid #007FD0;
 cursor: pointer;
}

.login-wrapper form .button input:active,
.login-wrapper form .button input:hover {
 background: #198bd4;
}

/* login register */

.login-wrapper form .signup-link {
 text-align: center;
 margin-top: 20px;
 font-size: 17px;
}

.login-wrapper form .signup-link a {
 color: #FF7500;
 text-decoration: none;
}

.login-wrapper form .signup-link a:active,
.login-wrapper form .signup-link a:hover {
 text-decoration: underline;
 color: #007FD0;
}

Edit Template: headerinclude

find:

<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />

add before:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

find:

{$stylesheets}

add before:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

Edit Template: header_welcomeblock_guest

find:

 <div class="modal" id="quick_login" style="display: none;">
 <form method="post" action="{$mybb->settings['bburl']}/member.php">
 <input name="action" type="hidden" value="do_login" />
 <input name="url" type="hidden" value="" />
 <input name="quick_login" type="hidden" value="1" />
 <input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
 <table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
 <tr>
 <td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
 </tr>
 {$loginform}
 </table>
 </form>

replace with:

  <div class="modal" id="quick_login" style="display: none;">
      <!-- login start --> 
      <div class="login-container">
        <div class="login-wrapper">
            <div class="title">
              <!-- logo start -->        
              <span>
                  <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
                  <!-- logo end -->  
                  <!--  {$lang->login} -->
              </span>
            </div>
            <form method="post" action="{$mybb->settings['bburl']}/member.php">
              <input name="action" type="hidden" value="do_login" />
              <input name="url" type="hidden" value="" />
              <input name="quick_login" type="hidden" value="1" />
              <input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
       {$loginform}
            </form>
        </div>
      </div>
      <!-- login end -->

Edit Template: header_welcomeblock_guest_login_modal

replace with:

              <div class="login-row">
                  <i class="fas fa-user"></i>
                  <input name="quick_username" id="quick_login_username" type="text" value="" class="textbox" placeholder="{$lang->username}" required>
              </div>
              <div class="login-row">
                  <i class="fas fa-lock"></i>
                  <input name="quick_password" id="quick_login_password" type="password" value="" class="textbox" placeholder="{$lang->password}" required>
              </div>
              <div class="login-password"><a href="{$mybb->settings['bburl']}/member.php?action=lostpw" class="">{$lang->lost_password}</a></div>
              <div class="login-password"><input name="remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" />
                  <label for="quick_login_remember">{$lang->remember_me}</label>
              </div>
              <div class="login-row button">
                  <input name="submit" type="submit" class="button" value="{$lang->login}">
              </div>
              <div class="signup-link">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a></div>

Edit Template: header_welcomeblock_guest_login_modal_lockout

replace with:

<div class="login-row">{$lang->failed_login_wait}</div>

& then you can continue editing further for your usages as this tutorial is meant as a starting point to the reader to then expand upon, edit and improve...)

Best of luck!   ~ V