Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] Add simple css and fontawesome 4 custom login (reposted)
#1
Information 
[Tutorial] Add simple css and fontawesome 4 custom login ** ( re-posted due to numerous user requests and complaints after I deleted my old tutorials. ) 

Note: if you are looking for it in fontawesome 5 it is included in this tutorial https://community.mybb.com/thread-226257.html


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.


This is for fontawesome 4.7

In headerinclude add:


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



In global.css find:


#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:

#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:


#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:


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:


                    <!-- 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:


                        <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:

<!-- 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&amp;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:


<li><a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php" class="admincp"><i class="fa fa-cog panel-admincp"></i> {$lang->welcome_admin}</a></li>

Replace header_welcomeblock_member_moderator with:

<li><a href="{$mybb->settings['bburl']}/modcp.php" class="modcp"><i class="fa fa-file-text panel-modcp"></i> {$lang->welcome_modcp}</a></li>
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)