Hướng dẫn tạo khung đăng nhập bằng pop up trên diễn đàn Xenforo

by Unknown 12:31:00 PM 0 nhận xét

Giao diện mặc định khi muốn đăng nhập ở Xenforo là đổ xuống từ trên header, nhưng nếu bạn muốn thay đổi thành dạng pop up thì cũng không mấy khó khăn. Bạn chỉ cần làm theo các bước của bài hướng dẫn sau thì rất dễ dàng.

Bước 1: Đăng nhập Admin CP => Appearance => Templates => login_bar
 => Thêm đoạn code màu đỏ vào vị trí như bên dưới

<xen:require css="login_bar.css" />

<script>
XenForo.LoginBar = function(a){};
</script>

<div id="loginBar">
 <div class="pageWidth">
  <div class="pageContent"> 
   <h3 id="loginBarHandle">
    <label for="LoginControl"><a href="{xen:link login}" class="OverlayTrigger concealed noOutline">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
   </h3>
   
   <span class="helper"></span>

   <xen:edithint template="login_bar_form" />
  </div>
 </div>
</div>

=> Nhấn Save để lưu sửa đổi

 Bước 2: Vào Appearance => Templates => sidebar_visitor_panel
 => Thêm đoạn code màu đỏ vào vị trí như sau:

</div>
</div>

<xen:else />

<div class="section loginButton">  
 <div class="secondaryContent">
  <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>
 </div>
</div>

</xen:if>

<xen:include template="ad_sidebar_below_visitor_panel" />

=> Nhấn Save để lưu sửa đổi

 Bước 3: Vào Appearance => Templates => EXTRA.css
 Thêm đoạn css sau:

.xenOverlay #pageLogin
    {

        background: rgba(0, 0, 0, 0.75);

        color: #ffffff;

        padding: 20px;

        border: 20px solid rgba(0, 0, 0, 0.25);

        border-radius: 20px;

        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

    }

 => Nhấn Save để hoàn thành. Bây giờ bạn ra ngoài trang chủ, nhấn F5 để load lại trang và thử click đăng nhập xem kết quả nhé.
 

Chúc các bạn thành công!