Hướng dẫn tạo thêm header bar cho Xenforo để cảnh báo cho thành viên

Cái header bar này là ngày xưa mình dùng style Aurora nó có sẵn, tuy nhiên sau này chuyển qua dùng style mặc định của Xenforo nó không có nên mình đã tìm cách rip lại từ Aurora.

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 giống như mình đang áp dụng cho diễn đàn Việt Designer.

Và thể theo yêu cầu của bạn ducthienict2007 muốn mình làm hướng dẫn này cho nên 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​

Demo online các bạn có thể xem trên chính forum này nha, nếu chưa reg nick thì cứ thử reg để xem sau khi login bạn có thấy đúng như hình demo không nha

OKAY!!! Bây giờ mình sẽ bắt đầu hướng dẫn các bạn.

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

Code:

<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="http://forum.vietdesigner.net/threads/90/" target="_blank">Nội quy</a> | <a href="http://forum.vietdesigner.net/forums/cach-dung-dien-dan/" target="_blank">Hướng dẫn sử dụng diễn đàn</a> | <a href="http://forum.vietdesigner.net/threads/43113/" target="_blank">Sơ đồ box</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 đồ họa.</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:

Code:

/* Vietdesigner.net 
	
Header Bar */
.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:

Code:

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

Code:

<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