Hướng Dẫn Tạo Popup Login đẹp như xFTeam.Net

6,236 21 3
hardcore

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
Xin chào các bạn, hôm nay mình xin góp chút công sức cho diễn đàn VNXF.Sản phẩm ngày hôm nay đó là cái Popup Login này.Cái Login popup này mình nhờ một bác rip bên CongngheAZ.
Image

WlDQQs.png
​
Đầu tiên, đăng nhập vào AdminCP -> Apppearance ->Templates ->login_bar thêm đoạn code sau dưới dòng này : <xen:require css="login_bar.css" /> và trên dòng này : <div id="loginBar">

Mã: 
<script>[/COLOR][/COLOR][/FONT][/SIZE]
[COLOR=rgb(0, 0, 0)][SIZE=13px][FONT=Georgia][COLOR=rgb(20, 20, 20)]
XenForo.LoginBar = function(a){};
</script>

Nhấn Save lại.

Tiếp theo,vào Appearance => Templates => sidebar_visitor_panel tìm đoạn này :
Mã: 
<label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
Thay bằng đoạn này :
Mã: 
<label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
Nhấn Save lại.
Thay toàn bộ những template sau đây nhé.
Temp helper_login_form :

Mã: 
<xen:if is="!{$visitor.user_id}">

<xen:container var="$hideLoginBar">1</xen:container>

<form action="{xen:link 'login/login'}" method="post" class="xenForm" id="pageLogin">

    <xen:if hascontent="true">
        <div class="errorPanel"><span class="errors">
            <xen:contentcheck>{xen:raw $text}</xen:contentcheck>
        </span></div>
    </xen:if>
    <span class="iconLogin"></span>
    <h2 class="textHeading">{xen:phrase log_in_or_sign_up}</h2>


    <dl class="ctrlUnit">

        <dd><input type="text" name="login" value="{$defaultLogin}" placeholder="Tên tài khoản" id="ctrl_pageLogin_login" class="textCtrl" /></dd>


<xen:if is="{$xenOptions.registrationSetup.enabled}">

        <dd><label for="ctrl_pageLogin_password">{xen:phrase do_you_already_have_account}</label></dd>
        <dd>
            <ul style="margin-right: -15px;">
                <li><label for="ctrl_pageLogin_not_registered"><input type="radio" name="register" value="1" id="ctrl_pageLogin_not_registered" tabindex="5" />
                    {xen:phrase no_create_account_now}</label></li>
                <li><label for="ctrl_pageLogin_registered"><input type="radio" name="register" value="0" id="ctrl_pageLogin_registered" checked="checked" class="Disabler" tabindex="5" />
                    {xen:phrase yes_my_password_is}:</label></li>
                <li id="ctrl_pageLogin_registered_Disabler">
                    <input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" placeholder="* * * * * * * * * * *" />                


                            <label class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_pageLogin_remember" tabindex="3" /> {xen:phrase stay_logged_in}</label>
                </li>
            </ul>
        </dd>
        <dd></dd>

<xen:else />
    <dl class="ctrlUnit">
        <dt><label for="ctrl_pageLogin_password">{xen:phrase password}:</label></dt>
        <dd>
            <input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" />
            <div><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="6">{xen:phrase forgot_your_password}</a></div>
        </dd>
    </dl>
</xen:if>

    <xen:if is="{$captcha}">
        <dl class="ctrlUnit">
            <dt>{xen:phrase verification}:</dt>
            <dd>{xen:raw $captcha}</dd>
        </dl>
    </xen:if>


        <dd>
            <input type="submit" class="button submit primary" value="{xen:phrase log_in}" data-loginPhrase="{xen:phrase log_in}" data-signupPhrase="{xen:phrase sign_up}" tabindex="4" />
<a class="button primary close OverlayCloser">Hủy thao tác</a>
        </dd>
        <dd style="text-align:center"><a href="lost-password/" class="OverlayTrigger lostpassword OverlayCloser">Bạn đã quên mật khẩu?</a></dd>
    </dl>
    <ul id="eAuthUnit">

    <xen:if is="{$xenOptions.facebookAppId}">
        <xen:require css="facebook.css" />
        <li class="fb">
    
<a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin" tabindex="10"><span>{xen:phrase login_with_facebook}</span></a>
        </li>
    </xen:if>

    <xen:if is="{$xenOptions.twitterAppKey}">
        <xen:require css="twitter.css" />
        <li style="margin: -1px 0;">
        <a href="{xen:link register/twitter, '', 'reg=1'}" class="twitterLogin" tabindex="10"><span>{xen:phrase login_with_twitter}</span></a>
        </li>
    </xen:if>
    <xen:if is="{$xenOptions.googleClientId}">
    <li class="goo">
        <xen:require css="google.css" />
    
    <span class="googleLogin GoogleLogin JsOnly" tabindex="10" data-client-id="{$xenOptions.googleClientId}" data-redirect-url="{xen:link register/google, '', 'code=__CODE__', 'csrf={$session.sessionCsrf}'}"><span>{xen:phrase login_with_google}</span></span>
        </li>
    </xen:if>
    </ul>

    <input type="hidden" name="cookie_check" value="1" />
    <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    <input type="hidden" name="redirect" value="{xen:if $redirect, $redirect, $requestPaths.requestUri}" />
    <xen:if is="{$postData}">
        <input type="hidden" name="postData" value="{xen:escape {xen:helper json, $postData}}" />
    </xen:if>

</form>

<script>
    $(function()
    {
        var $button = $('#pageLogin input.button.primary');
        $('#pageLogin input[name="register"]').click(function()
        {
            $button.val(
                $('#pageLogin input[name="register"]:checked').val() == '1'
                ? $button.data('signupphrase')
                : $button.data('loginphrase')
            );
        });
    });
</script>
</xen:if>
Temp twitter.css :

Mã: 
a.twitterLogin,
#loginBar a.twitterLogin
{
    width: 279px;
height: 60px;
-webkit-border-radius: 0px; -moz-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;
background-image: url("styles/default/xenforo/twitter.png");
background-position: 0 0px;
text-indent: -9999px;
display: block;
}

    a.twitterLogin span
    {
        display: block;
        background-position: left 0;
        padding-left: 22px;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        white-space: nowrap;
        overflow: hidden;
    }

a.twitterLogin:hover,
#loginBar a.twitterLogin:hover,
a.twitterLogin:active,
#loginBar a.twitterLogin:active
{
    text-decoration: none;
}

Temp facebook.css :

Mã: 
a.fbLogin,
#loginBar a.fbLogin
{
    display: inline-block;
    width: 180px;
    height: 22px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
    cursor: pointer;

    background-repeat: no-repeat;
    -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
    background-position: left -188px;
    padding: 0px 0px 0px 1px;
    outline: none;

    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 11px;
    line-height: 14px;
}

a.fbLogin:active,
#loginBar a.fbLogin:active
{
}

a.fbLogin:hover,
#loginBar a.fbLogin:hover
{
    text-decoration: none;
}

    a.fbLogin span
    {
        display: block;
        padding: 2px 4px 3px;
        margin: 1px 1px 0px 21px;
        text-shadow: none;
        white-space: nowrap;
        overflow: hidden;
    }

    a.fbLogin:active span
    {

        text-shadow: none;
    }

Temp google.css :

Mã: 
.googleLogin,
#loginBar .googleLogin
{
    display: inline-block;
    width: 180px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
    cursor: pointer;
    
    color: white;
    font-weight: bold;
    font-size: 11px;
    line-height: 14px;
}

.googleLogin:active,
#loginBar .googleLogin:active
{
    background-color: #be3e2e;
}

Cuối cùng thêm đoạn sau vào Extra.css :

Mã: 
/******Login_popup********/
.xenOverlay #pageLogin {color: #505050;font-size: 14px;width:270px;height:360px;padding: 20px 30px;padding-top:80px;background:#ececec;position: relative;font-family: "utmavo";}
.xenOverlay #pageLogin input.textCtrl {border: none;-webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px;background:#d3d3d3;width:270px;height:40px;font-family: Myriad Pro Regular;text-align:center;color:#505050;font-weight: bold;font-size: 14px;}
.xenOverlay #pageLogin .rememberPassword {display:block;text-align:center;padding-top: 10px;}
.xenOverlay #pageLogin #ctrl_pageLogin_password {font-size:24px}
.xenForm#pageLogin .ctrlUnit > dd {width:100%;padding-right:0}
.xenOverlay #pageLogin .ctrl_pageLogin_registered,.xenOverlay #pageLogin .ctrl_pageLogin_not_registered {margin-left: 10px;font-size:12px}
.xenOverlay #pageLogin .textCtrl::-moz-input-placeholder{color:#505050}
.xenOverlay #pageLogin .textCtrl::-webkit-input-placeholder{color:#505050}
.xenOverlay #pageLogin .textCtrl::-ms-input-placeholder {color:#505050}
.xenOverlay #pageLogin .lostpassword {line-height: 70px;text-align: center;color: #f5683d;font-size: 18px;}
.xenOverlay #pageLogin .iconLogin {background:url(http://xfteam.net/styles/default/xenforo/loginicon.png)no-repeat;display:block;position:absolute;top: -50px;width: 145px;height: 149px;left: 115px;}
.xenOverlay #pageLogin a.close {position:static;width:133px;float:right;height: 50px;line-height: 50px;margin-top:-4px;background-image:none;background: #2ba1f3;height:auto}
.xenOverlay #pageLogin .button.submit.primary {width:133px;float:left;height: 50px;}
#AjaxProgress.xenOverlay {background:none}
.xenOverlay #pageLogin a.close, .xenOverlay #pageLogin .button.submit.primary {font-family:"utmavo";font-size:14px;text-transform:uppercase;font-weight: normal;}
.xenOverlay #pageLogin .textHeading{border:none;color: #333333;text-align: center;font-size: 20px;font-weight: normal;}
.xenOverlay h2.heading, .watch_thread .secondRow, .watch_thread .stats, .watch_thread .lastPost {
    display: none!important;
}
.xenOverlay #pageLogin .lostpassword {
    line-height: 70px;
    text-align: center;
    color: #f5683d;
    font-size: 18px;
}
#logo .icon_fA {margin-right: 12px;}
.xenForm fieldset + .ctrlUnit, .xenForm .formGroup + .ctrlUnit, .xenForm .submitUnit {border-top: none;}
.larger.textHeading,
.xenForm .sectionHeader,
.larger.textHeading a,
.xenForm .sectionHeader a {color: #2c3e50; }

.googleLogin, #loginBar .googleLogin {
width: 279px !important;
height: 60px;
-webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -khtml-border-radius: 0px !important; border-radius: 0px !important;
background-image: url(http://xfteam.net/styles/default/xenforo/google+.png);
text-indent: -9999px;
display:block;
cursor:pointer;
}
a.fbLogin,#loginBar a.fbLogin {
width: 279px !important;
height: 60px !important;
-webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -khtml-border-radius: 0px !important; border-radius: 0px !important;
background-image: url(http://xfteam.net/styles/default/xenforo/faceb.png);
background-position: 1px 0px !important;
text-indent: -9999px;
display:block !important;
}
#pageLogin #eAuthUnit{position:absolute;right:100%;top:140px}
#pageLogin #eAuthUnit li {margin:0}
.login #eAuthUnit{margin-left:258px!important}
.xenOverlay h2.heading, .watch_thread .secondRow, .watch_thread .stats, .watch_thread .lastPost {
display: none !important;
}
/******Login_popup********/
Chúc các bạn thành công :D
Nguồn: xFTeam.Net
​
 
Bài viết liên quan
Mong các AE giúp đỡ em tạo Custom thread fields bởi nguyendinhnham,
làm như thế này như thế nào ạ bởi phamnguyen,
Make collapsible sub-forums of a forum with no parent in forum list - Tạo sub-forum thu gọn của diễn đàn không có parent trong forum list XenForo 2 bởi PVS,
Bị lỗi không login & đăng kí được bởi JinkyS,
làm sao để fix cái danh hiệu forum to lên được ta bởi Phatdz123,
Định dạng lại ngày giờ Xenforo 2 bởi mthaihien,
Bài viết mới
Trường "url" bị thiếu (nằm trong "author") bởi muabandalat,
Xin hỏi làm sao đưa tất cả tin ghim ra ngoài trang chủ XF2 bởi muabandalat,
Addon Donations by Siropu 1.5.1 bởi redbull,
cấu trúc Diễn đàn -Trường "comment" bị thiếu googleconsole bởi muabandalat,
Cần hỗ trợ sửa giao diện có phí bởi dichvutele,
Mong các AE giúp đỡ em tạo Custom thread fields bởi nguyendinhnham,
hardcore

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
Mai mình tv cho bạn nha h mình bận rồi
 
  • Like
Reactions: THB
Blue

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
917
Được Like
1,535
Nạn nhân @dev.xf hướng dẫn thêm cho anh em, hoàn thiện nó đi =))
 
  • Like
Reactions: THB
RY NGUYEN

RY NGUYEN

Private
Tham gia
01/12/2015
Bài viết
27
Được Like
10
ảnh chi tiết fix 1 hồi nó ra thế này nè
 

Đính kèm

  • Chưa có tên.png
    Chưa có tên.png
    442.4 KB · Lượt xem: 36
dev.xf

dev.xf

Sergeant
Tham gia
28/02/2015
Bài viết
450
Được Like
519
mcjury nói:
admin congngheaz đây rồi. có style nào đẹp share em cái hay cái trang củ của bác kìa
Nhấn để mở rộng...
mình chỉ là người quản lý thôi bạn à. còn dev thì có người khác làm
 
mcjury

mcjury

Corporal
Tham gia
02/01/2016
Bài viết
170
Được Like
49
dev.xf nói:
để phù hợp theo ý bạn thì chỉ có thể là thuê thôi.
Nhấn để mở rộng...
bác cho em hỏi sao em thay đổi style trang chủ của xenpota sao không đk vậy. thay code thế nào cũng như vậy
 
daohongduong

daohongduong

Private
Tham gia
27/01/2016
Bài viết
12
Được Like
8
Bác nào cho em hỏi phát. em làm y như hướng dẫn rồi mà nó hiện ra cả cái cũ lẫn cái mới là sao nhỉ.
em đang dùng style WIND GOLD
 
Jindo_Katori

Jindo_Katori

FirstSergeant
Tham gia
01/03/2015
Bài viết
1,454
Được Like
1,193
Đọc lại bài này
Click vào tất cả các link website của các bác
Kết quả đều die hết
Thật đáng buồn
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
longruoi Hướng dẫn tạo trang Drive Google to Direclink cho Xenforo Template Modifications 8
abchhj Help Newbie cần hỗ trợ hướng dẫn tạo và phần quyền cho MOD theo từng forum Template Modifications 14
K Help Giúp hướng dẫn đặt banner cho website !!! em thử tạo widgets để đặt mà ko đc ? ? Template Modifications 2
dcstylexf Hướng dẫn Tạo slide giống MamCongNghe.Com Template Modifications 28
ismartcom005 [Help] cần hướng dẫn tạo template cho [bd] Widget framework Template Modifications 13

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Hoặc gửi Liên hệ

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom