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

Thảo luận trong 'Template Modifications' bắt đầu bởi hardcore, 14/02/2016.

  1. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    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


    [​IMG]
    Đầ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 :


    Mã:

    Nhấn Save lại.

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


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

    Mã:
    
    
    1
    
    
    
        
            
    {xen:raw $text}

    {xen:phrase log_in_or_sign_up}

    {xen:phrase verification}:
    {xen:raw $captcha}
    Hủy thao tác
    Bạn đã quên mật khẩu?
    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/bet365 có những phương thức nạ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 :

    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/bet365 có những phương thức nạ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 nạ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 nạ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 :D
    Nguồn: xFTeam.Net
     
    PVS, THB and datdaik000 like this.
  2. dev.xf

    dev.xf Thượng Đế

    Tham gia:
    28/02/2015
    Bài viết:
    449
    Đã được thích:
    499
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Nghề nghiệp:
    Coder - Xenforo Developer
    Nơi ở:
    Phan Thiết - Bình Thuận
    Web:
    THB thích bài này.
  3. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @dev.xf bác troll em hả em nhờ rip từ site bác mà
     
    dev.xf and THB like this.
  4. RY NGUYEN

    RY NGUYEN Thượng Đế

    Tham gia:
    01/12/2015
    Bài viết:
    27
    Đã được thích:
    8
    Điểm thành tích:
    3
    Giới tính:
    Nam
    ai giúp em với nó ko popup được
     
  5. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Mai mình tv cho bạn nha h mình bận rồi
     
    THB thích bài này.
  6. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    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.
     
  7. Blue

    Blue Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    796
    Đã được thích:
    1,246
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Nạn nhân @dev.xf hướng dẫn thêm cho anh em, hoàn thiện nó đi =))
     
    THB thích bài này.
  8. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
  9. RY NGUYEN

    RY NGUYEN Thượng Đế

    Tham gia:
    01/12/2015
    Bài viết:
    27
    Đã được thích:
    8
    Điểm thành tích:
    3
    Giới tính:
    Nam
    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/
     
  10. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @RY NGUYEN Hôm nào bạn rảnh mình fix thử cho
     
  11. RY NGUYEN

    RY NGUYEN Thượng Đế

    Tham gia:
    01/12/2015
    Bài viết:
    27
    Đã được thích:
    8
    Điểm thành tích:
    3
    Giới tính:
    Nam
  12. RY NGUYEN

    RY NGUYEN Thượng Đế

    Tham gia:
    01/12/2015
    Bài viết:
    27
    Đã được thích:
    8
    Điểm thành tích:
    3
    Giới tính:
    Nam
    ảnh chi tiết fix 1 hồi nó ra thế này nè
     

    Các file đính kèm:

  13. mcjury

    mcjury Thượng Đế

    Tham gia:
    02/01/2016
    Bài viết:
    170
    Đã được thích:
    45
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nơi ở:
    bmt
    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
     
  14. dev.xf

    dev.xf Thượng Đế

    Tham gia:
    28/02/2015
    Bài viết:
    449
    Đã được thích:
    499
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Nghề nghiệp:
    Coder - Xenforo Developer
    Nơi ở:
    Phan Thiết - Bình Thuận
    Web:
    mình chỉ là người quản lý thôi bạn à. còn dev thì có người khác làm
     
  15. AkinaSana

    AkinaSana Thượng Đế

    Tham gia:
    04/02/2016
    Bài viết:
    40
    Đã được thích:
    24
    Điểm thành tích:
    8
    xóa đấu X làm sao
     
  16. mcjury

    mcjury Thượng Đế

    Tham gia:
    02/01/2016
    Bài viết:
    170
    Đã được thích:
    45
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nơi ở:
    bmt
    đang làm chuyên mục như của bác. mà tìm style phù hợp khó quá
     
  17. dev.xf

    dev.xf Thượng Đế

    Tham gia:
    28/02/2015
    Bài viết:
    449
    Đã được thích:
    499
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Nghề nghiệp:
    Coder - Xenforo Developer
    Nơi ở:
    Phan Thiết - Bình Thuận
    Web:
    để phù hợp theo ý bạn thì chỉ có thể là thuê thôi.
     
  18. mcjury

    mcjury Thượng Đế

    Tham gia:
    02/01/2016
    Bài viết:
    170
    Đã được thích:
    45
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nơi ở:
    bmt
    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
     
  19. daohongduong

    daohongduong Thượng Đế

    Tham gia:
    27/01/2016
    Bài viết:
    12
    Đã được thích:
    7
    Điểm thành tích:
    3
    Giới tính:
    Nam
    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
     
  20. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Đọ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
     

Chia sẻ trang này