Tạo cảnh báo cho thành viên trên thanh header bar cho Xenforo

Header bar này khá thú vị ở chỗ là nó sẽ hiển khác khi là khách (tức chưa login), và khi login rồi nó sẽ hiển thị khác đi. Ví dụ khi chưa login bạn có thể để thông báo khuyến khích đăng ký, và khi login bạn có thể để những dòng cảnh báo nên chấp hành nội quy hay gì đó.

Hôm nay mình xin làm hướng dẫn chi tiết cho bạn nào có nhu cầu nhé

Trước khi login chỉ có 1 cột thông báo bên trái

​

Sau khi login sẽ có 2 cột, bên trái là cảnh báo thành viên, bên phải là 1 số menu khuyến khích thành viên nên click vào xem

Đầu tiên, các bạn vào Templates để tạo 1 template mới, có thể đặt tên là header_bar và dán đoạn code này vào:

Mã:

<div class="headerBar">
  <div class="headerBarNext">
  <!-- If the user is a member but not moderator or admin -->
  <xen:if is="{$visitor.user_id} && !{$visitor.is_moderator} && !{$visitor.is_admin}">
  <span class="headerBarText">
  <div style="float:left;margin-top:3px">Để đảm bảo không bị ban nick, hãy đọc kỹ và chấp hành nghiêm chỉnh nội quy của diễn đàn.</div>
  <div style="float:right;margin-top:3px"><a href="#" target="_blank">Nội quy</a> | <a href="http://danlamseo.edu.vn/thong-bao-tu-bqt.f2.html" target="_blank">Thông báo</a></div>
  </span>
  <!-- If the user is a guest-->
  <xen:elseif is="!{$visitor.user_id}" />
  <span class="headerBarText">Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức SEO.</span>
  </xen:if>
  <!-- If the user is a moderator or an admin-->
  <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
  <xen:include template="moderator_bar" />
  </xen:if>
  </div>
  </div>

Nội dung bên trong các bạn có thể thay đổi tùy ý của mình.

Tiếp theo, vào template EXTRA.css thêm dòng sau:

Mã:

.headerBarNext {
padding-right: 5px;
padding-left: 5px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
max-width: 1093px;
background: #000;
height: 20px;
}
.headerBar {
padding: 2px 0;
background: #000;
}
.headerBarText {
color: #DDD;
font-size: 11px;
padding: 2px 10px;
}
.headerBarText a {
color: #fff
}

CSS này các bạn lưu ý thay đổi tùy theo giao diện forum của mình nhé.

Và cuối cùng, các bạn vào template PAGE_CONTAINER tìm đoạn code sau:

Mã:

<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
    <xen:include template="moderator_bar" />
<xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
    <xen:include template="login_bar" />
</xen:if>

Và thay nó bằng đoạn code này:

Mã:

<xen:include template="header_bar" />
<xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
<xen:include template="login_bar" />
</xen:if>

Thế là xong rồi, Save lại và tận hưởng kết quả nhé!
Chúc thành công !