In the past a few people have asked how to do the login like the one in the devel theme hence the reason for this tutorial.
In headerinclude add:
In global.css find:
Replace with:
In global.css find and remove:
Add to global.css:
Replace header_welcomeblock_guest with:
Replace header_welcomeblock_guest_login_modal with:
Replace header_welcomeblock_member with:
Replace header_welcomeblock_member_admin with:
Replace header_welcomeblock_member_moderator with:
![.png]( "PNG Image")
Screenshot_20180930-210137.png (Size: 73.85 KB / Downloads: 4)
In headerinclude add:
Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">In global.css find:
Code:
#panel .upper a.logout {
font-weight: bold;
background: url(images/headerlinks_sprite.png) right -80px no-repeat;
padding-right: 20px;
margin-left: 10px;
}
#panel .upper a.login,
#panel .upper a.lost_password {
background: url(images/headerlinks_sprite.png) 0 -100px no-repeat;
padding-left: 20px;
margin-left: 10px;
font-weight: bold;
}
#panel .upper a.register {
background: url(images/headerlinks_sprite.png) right -80px no-repeat;
padding-right: 20px;
margin-left: 10px;
font-weight: bold;
}Replace with:
Code:
#panel .upper a.logout {
font-weight: bold;
padding-right: 20px;
margin-left: 10px;
}
#panel .upper a.login, #panel .upper a.lost_password {
margin-left: 10px;
font-weight: bold;
}
#panel .upper a.register {
margin-left: 10px;
font-weight: bold;
}In global.css find and remove:
Code:
#panel .lower ul.panel_links a.usercp {
background-position: 0 -120px;
}
#panel .lower ul.panel_links a.modcp {
background-position: 0 -140px;
}
#panel .lower ul.panel_links a.admincp {
background-position: 0 -160px;
}Add to global.css:
Code:
i.panel-login {
padding-right: 5px;
color: #C49A38;
font-size: 14px;
}
i.panel-register {
padding-right: 5px;
color: #98C78B;
font-size: 14px;
}
i.panel-logout {
padding-right: 5px;
color: #98C78B;
font-size: 14px;
}
i.panel-usercp {
padding-right: 2px;
padding-left: 10px;
color: #2C2C2C;
font-size: 14px;
}
i.panel-modcp {
padding-right: 2px;
padding-left: 10px;
color: #2C2C2C;
font-size: 14px;
}
i.panel-admincp {
padding-right: 2px;
padding-left: 10px;
color: #2C2C2C;
font-size: 14px;
}
/** Login **/
input#quick_login_password {
margin-left: -6px;
}
td.quick_password a.lost_password {
margin-left: -20px;
}
input#quick_login_username, input#quick_login_password {
vertical-align: middle;
height: 30px;
width: 200px;
border-radius: 0px 3px 3px 0px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
input#quick_login_username:focus, input#quick_login_password:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
i.quick_username, i.quick_password, i.reg_username, i.reg_password, i.reg_email {
background-color: #CCCCCC;
color: #666666;
border: 1px solid #cccccc;
white-space: nowrap;
vertical-align: middle;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
i.quick_username, i.quick_password {
font-size: 30px;
padding: 3px 5px;
}
i.quick_password {
margin-left: -6px;
}
.remember_me label {
color: #000;
}
input.login {
background: #00C2EF;
width: 60px;
height: 60px;
color: #000;
cursor: pointer;
border: 5px solid #005C91;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
font-weight: bold;
outline: 0;
text-align: center;
border-radius: 60px;
margin-right: 5px;
transition: all 0.8s ease;
}
input.login:hover {
background: #005C91;
border: 5px solid #00C2EF;
color: #FFF;
}
i.login, i.register {
margin-right: 5px;
}
i.logout {
margin-left: 5px;
}Replace header_welcomeblock_guest with:
Code:
<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login"><i class="fa fa-sign-in panel-login"></i>{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fa fa-user-plus panel-register"></i>{$lang->welcome_register}</a></span>
</div>
</div>
<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="quick_login">
{$loginform}
</table>
</form>
</div>
<script type="text/javascript">
$("#quick_login input[name='url']").val($(location).attr('href'));
</script>Replace header_welcomeblock_guest_login_modal with:
Code:
<tr>
<td class="login_form quick_username">
<i class="fa fa-user quick_username"></i><input value="" name="quick_username" type="text" placeholder="{$login_username}" id="quick_login_username" class="textbox">
</td>
<td class="login_form submit" rowspan="2" vertical-align="middle">
<input name="submit" type="submit" class="login" value="{$lang->login}" />
</td>
<tr>
<td class="login_form quick_password">
<i class="fa fa-key quick_password"></i><input value="" name="quick_password" type="password" placeholder="{$lang->password}" id="quick_login_password" class="textbox">
<a href="{$mybb->settings['bburl']}/member.php?action=lostpw" class="lost_password"><i class="fa fa-lightbulb-o fa-lg" style="color: #0085D3;" title="{$lang->lost_password}"></i></a>
</td>
</tr>
<tr>
<td class="login_form remember_me">
<input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" />
<label for="quick_login_remember">{$lang->remember_me}</label>
</td>
</tr>Replace header_welcomeblock_member with:
Code:
<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&logoutkey={$mybb->user['logoutkey']}" class="logout"><i class="fa fa-sign-out panel-logout"></i> {$lang->welcome_logout}</a></span>
</div>
</div>
<div class="lower">
<div class="wrapper">
<ul class="menu panel_links">
<li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><i class="fa fa-user panel-usercp"></i> {$lang->welcome_usercp}</a></li>
{$modcplink}
{$admincplink}
</ul>
<ul class="menu user_links">
<li><a href="javascript:void(0)" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}</a></li>
{$searchlink}
{$pmslink}
</ul>
</div>
<br class="clear" />
</div>Replace header_welcomeblock_member_admin with:
Code:
<li><a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php" class="admincp"><i class="fa fa-cog panel-admincp"></i> {$lang->welcome_admin}</a></liReplace header_welcomeblock_member_moderator with:
Code:
<li><a href="{$mybb->settings['bburl']}/modcp.php" class="modcp"><i class="fa fa-file-text panel-modcp"></i> {$lang->welcome_modcp}</a></li>
Screenshot_20180930-210137.png (Size: 73.85 KB / Downloads: 4)
