Change login bar to an overlay - Thay đổi thanh đăng nhập thành overlay

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Change login bar to an overlay - Thay đổi thanh đăng nhập thành overlay

Thay vì menu này di chuyển từ trên xuống:

1.png

Thì bây giừ bạn sẽ nhận được một cửa sổ overlay ở giữa trang:

2.png

Vào Admin CP -> Appearance -> Templates -> login_bar

Thêm vào đoạn code màu đỏ (hai đoạn, bạn có thể phải di chuyển sang phải):

3.png

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

Ngoài ra, trong XenForo 1.2 overlay này không còn opaque. Bạn có thể sửa lỗi này với một số CSS styling bằng cách chỉnh sửa template:

Vào Admin CP -> Appearance -> Templates -> EXTRA.css

Thêm đoạn code sau:
Mã:
.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);
}

Bạn cũng có thể muốn thay đổi nút này thành overlay:

4.png

Vào Admin CP -> Appearance -> Templates -> sidebar_visitor_panel

Thêm vào đoạn code màu đỏ:

5.png

Mã:
    </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" />

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


Nguồn: xenforo.com​
 

Jindo_Katori

FirstSergeant
Tham gia
01/03/2015
Bài viết
1,462
Được Like
1,205
Rất đáng giá
Vậy còn link yêu cầu đăng nhập có overlay nốt luôn đc ko bác
 

singh

Sergeant
Tham gia
08/06/2015
Bài viết
470
Được Like
276
làm sao để hiện cái này ae
https://vnxf.vn/attachments/1-png.10533/
Cái nút bấm "đăng nhập" của mình gặp vấn đề không click được. Phải load lại page lần 2 mới click được
. Nên mình muốn hiện lại cái này lên web. vì style mình bị xóa mà mình không biết nó nằm ở đâu.
 
Sửa lần cuối:

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom