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

hardcore · Jan 26, 2020 at 2:07 PM

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

Đầ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 : và trên dòng này :

Code:

Nhấn Save lại.

Tiếp theo,vào Appearance => Templates => sidebar_visitor_panel tìm đoạn này :

Code:

{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}

Thay bằng đoạn này :

Code:

{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}

Nhấn Save lại.
Thay toàn bộ những template sau đây nhé.
Temp helper_login_form :

Code:



1



    
        
            {xen:raw $text}
        
    
    
    {xen:phrase log_in_or_sign_up}

    

        



        {xen:phrase do_you_already_have_account}
        
            
                
                    {xen:phrase no_create_account_now}
                
                    {xen:phrase yes_my_password_is}:
                
                                    

                             {xen:phrase stay_logged_in}
                
            
        
        


    
        {xen:phrase password}:
        
            
            {xen:phrase forgot_your_password}
        
    


    
        
            {xen:phrase verification}:
            {xen:raw $captcha}
        
    

        
            
Hủy thao tác
        
        Bạn đã quên mật khẩu?
    
    

    
        
        

{xen:phrase login_with_facebook}
        
    

    
        
        
        {xen:phrase login_with_twitter}
        
    
    
    
        

    {xen:phrase login_with_google}

Temp twitter.css :

Code:

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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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 :

Code:

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 :

Code:

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

Code:

/******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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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

Nguồn: xFTeam.Net

dev.xf · Feb 14, 2016

cảm ơn nha. đã làm và thành công
http://congngheaz.com

hardcore · Feb 14, 2016

@dev.xf bác troll em hả em nhờ rip từ site bác mà

RY NGUYEN · Feb 14, 2016

ai giúp em với nó ko popup được

hardcore · Feb 14, 2016

Mai mình tv cho bạn nha h mình bận rồi

THB · Feb 14, 2016

dev.xf said: ↑

cảm ơn nha. đã làm và thành công
http://congngheaz.com
Click to expand...

bác @dev.xf dang troll nè.
uhm sẳn cho hỏi luôn. cnaz sao ko thấy gửi email kích hoạt? làm cái nick thbvnxf mà ko thấy gửi mail.

Blue · Feb 15, 2016

Nạn nhân @dev.xf hướng dẫn thêm cho anh em, hoàn thiện nó đi =))

hardcore · Feb 15, 2016

@RY NGUYEN cho mình xin link site bạn

RY NGUYEN · Feb 15, 2016

ai login fix hộ em với em làm giờ cái css của FB + Google mất chổ đăng nhập luôn rồi
http://raovatqnn.vn/

hardcore · Feb 15, 2016

@RY NGUYEN Hôm nào bạn rảnh mình fix thử cho

RY NGUYEN · Feb 15, 2016

hardcore said: ↑

@RY NGUYEN Hôm nào bạn rảnh mình fix thử cho
Click to expand...

https://www.facebook.com/MinhRy liên hệ fb mình nhé, lúc nào cũng online

RY NGUYEN · Feb 16, 2016

ảnh chi tiết fix 1 hồi nó ra thế này nè

mcjury · Feb 16, 2016

dev.xf said: ↑

cảm ơn nha. đã làm và thành công
http://congngheaz.com
Click to expand...

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

dev.xf · Feb 16, 2016

mcjury said: ↑

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
Click to expand...

mình chỉ là người quản lý thôi bạn à. còn dev thì có người khác làm

AkinaSana · Feb 17, 2016

xóa đấu X làm sao

mcjury · Feb 17, 2016

dev.xf said: ↑

mình chỉ là người quản lý thôi bạn à. còn dev thì có người khác làm
Click to expand...

đang làm chuyên mục như của bác. mà tìm style phù hợp khó quá

dev.xf · Feb 17, 2016

mcjury said: ↑

đang làm chuyên mục như của bác. mà tìm style phù hợp khó quá
Click to expand...

để phù hợp theo ý bạn thì chỉ có thể là thuê thôi.

mcjury · Feb 20, 2016

dev.xf said: ↑

để phù hợp theo ý bạn thì chỉ có thể là thuê thôi.
Click to expand...

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 · Apr 27, 2016

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 · Dec 22, 2017

Đọ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

Support	Quảng cáo
Mr. San (PVS)	Mr. Bình (THB)
Mr. Tuấn 0988 488 096	Mr. Bình 0981 06 08 08
kinhdoanh@vnxf.vn

Log in or Sign up

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

hardcore Thượng Đế

{xen:phrase log_in_or_sign_up}

dev.xf Thượng Đế

hardcore Thượng Đế

RY NGUYEN Thượng Đế

hardcore Thượng Đế

THB Admin - Founder Staff Member

Blue Admin - Founder Staff Member

hardcore Thượng Đế

RY NGUYEN Thượng Đế

hardcore Thượng Đế

RY NGUYEN Thượng Đế

RY NGUYEN Thượng Đế

Attached Files:

Chưa có tên.png

mcjury Thượng Đế

dev.xf Thượng Đế

AkinaSana Thượng Đế

mcjury Thượng Đế

dev.xf Thượng Đế

mcjury Thượng Đế

daohongduong Thượng Đế

Jindo_Katori Thượng Đế

Share This Page

Thông tin chung

VNXF OPEN

LIÊN KẾT

LIÊN KẾT

XenForo 1	XenForo 2
Translate by PVS

Log in or Sign up

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

hardcore Thượng Đế

{xen:phrase log_in_or_sign_up}

dev.xf Thượng Đế

hardcore Thượng Đế

RY NGUYEN Thượng Đế

hardcore Thượng Đế

THB Admin - Founder Staff Member

Blue Admin - Founder Staff Member

hardcore Thượng Đế

RY NGUYEN Thượng Đế

hardcore Thượng Đế

RY NGUYEN Thượng Đế

RY NGUYEN Thượng Đế

Attached Files:

Chưa có tên.png

mcjury Thượng Đế

dev.xf Thượng Đế

AkinaSana Thượng Đế

mcjury Thượng Đế

dev.xf Thượng Đế

mcjury Thượng Đế

daohongduong Thượng Đế

Jindo_Katori Thượng Đế

Share This Page

Useful Searches