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:


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


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

Code:

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

Code:

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


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

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

Code:

</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: VNXF.VN​