Bài viết này hướng dẫn các bạn chuyển khu vực thông tin thành viên (Visitor Tabs) lên thanh Moderator Bar.
Demo:
Cách thực hiện:
– Tìm đọan code sau:
<xen:hook name="moderator_bar" />
Thay thế bằng:
<xen:if is="{$visitor.user_id}"> <xen:include template="navigation_visitor_tab" /> </xen:if> <xen:hook name="moderator_bar" />
– Tìm và mở template navigation_visitor_tab, thay thế đoạn code này:
<xen:if is="{$tabs.account.selected}"> <li class="navTab selected PopupClosed"> <div class="tabLinks"> <div class="primaryContent menuHeader"> <h3>{$tabs.account.title}</h3> <div class="muted">{xen:phrase quick_links}</div> </div> <ul class="secondaryContent blockLinksList"> <xen:hook name="navigation_tabs_account"> <li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li> <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li> <li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li> <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li> <!--<li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>--> </xen:hook> </ul> </div> </li> </xen:if>
Bằng đoạn này:
<xen:comment> <xen:if is="{$tabs.account.selected}"> <li class="navTab selected PopupClosed"> <div class="tabLinks"> <div class="primaryContent menuHeader"> <h3>{$tabs.account.title}</h3> <div class="muted">{xen:phrase quick_links}</div> </div> <ul class="secondaryContent blockLinksList"> <xen:hook name="navigation_tabs_account"> <li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li> <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li> <li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li> <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li> <!--<li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>--> </xen:hook> </ul> </div> </li> </xen:if> </xen:comment>
– Tìm và mở template navigation, thay thế đoạn code này:
<xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
Bằng đoạn code này:
<xen:if is="{$tabs.account.selected}"> <li class="navTab selected blankTab PopupClosed"> <div class="tabLinks"> <div class="primaryContent menuHeader"> <h3>{$tabs.account.title}</h3> <div class="muted">{xen:phrase quick_links}</div> </div> <ul class="secondaryContent blockLinksList"> <xen:hook name="navigation_tabs_account"> <li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li> <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li> <li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li> <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li> <!--<li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>--> </xen:hook> </ul> </div> </li> </xen:if> </ul> <xen:comment> <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if> </xen:comment>
– Tìm và mở template PAGE_CONTAINER, thay thế đoạn code này:
<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>
Bằng đoạn code này:
<xen:if is="{$visitor.user_id}"> <xen:include template="moderator_bar" /> <xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" /> <xen:include template="login_bar" /> </xen:if>
– Tìm và mở template extra.css, thêm vào cuối:
#moderatorBar .adminLink { float:left; } #moderatorBar .visitorTabs { float: right; } #moderatorBar .visitorTabs li { float:left; } #moderatorBar .visitorTabs .navLink { line-height: 16px; } #moderatorBar .visitorTabs .navLink:hover { } #moderatorBar .visitorTabs .navLink .itemCount { line-height: 16px; } #moderatorBar .visitorTabs .navLink .itemCount:hover { }
Chúc các bạn thành công.