Cập nhật Icon FontAwesome trong Visitor Tab & Account Wrapper

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Cập nhật Icon FontAwesome trong Visitor Tab & Account Wrapper

Trang chủ FontAwesome: http://fortawesome.github.io/Font-Awesome/]font awesome site
Danh sách các icon: http://fortawesome.github.io/Font-Awesome/icons/]Font awesome icons

font_awesomepane.png

1. Vào template PAGE_CONTAINER và thêm code này trong <head>
Mã:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

2. Đến template navigation_visitor_tab và thay thế tất cả mọi thứ giữa
Mã:
<ul class="col1 blockLinksList">
</ul>

Mã:
<xen:hook name="navigation_visitor_tab_links1">
                    <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}"><i class="fa fa-user fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase personal_details}</a></li></xen:if>
                    <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}"><i class="fa fa-pencil fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase signature}</a></li></xen:if>
                    <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/contact-details}"><i class="fa fa-book fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase contact_details}</a></li></xen:if>
                    <li><a href="{xen:link account/privacy}"><i class="fa fa-lock fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase privacy}</a></li>
                    <li><a href="{xen:link account/preferences}" class="OverlayTrigger"><i class="fa fa-cog fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase preferences}</a></li>
                    <li><a href="{xen:link account/alert-preferences}"><i class="fa fa-bell-o fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase alert_preferences}</a></li>
                    <xen:if is="{$canUploadAvatar}"><li><a href="{xen:link account/avatar}" class="OverlayTrigger" data-cacheOverlay="true"><i class="fa fa-picture-o fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase avatar}</a></li></xen:if>
                    <xen:if is="{$xenOptions.facebookAppId}"><li><a href="{xen:link account/facebook}"><i class="fa fa-facebook fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase facebook_integration}</a></li></xen:if>
                    <li><a href="{xen:link account/security}"><i class="fa fa-key fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase password}</a></li>
                </xen:hook>
                </ul>
                <ul class="col2 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links2">
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}"><i class="fa fa-rss fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase your_news_feed}</a></li></xen:if>
                    <li><a href="{xen:link conversations}"><i class="fa fa-inbox fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase conversations}
                        <strong class="itemCount {xen:if $visitor.conversations_unread, '', 'Zero'}"
                            id="VisitorExtraMenu_ConversationsCounter">
                            <span class="Total">{xen:number $visitor.conversations_unread}</span>
                        </strong></a></li>
                    <li><a href="{xen:link account/alerts}"><i class="fa fa-exclamation-circle icon-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase alerts}
                        <strong class="itemCount {xen:if $visitor.alerts_unread, '', 'Zero'}"
                            id="VisitorExtraMenu_AlertsCounter">
                            <span class="Total">{xen:number $visitor.alerts_unread}</span>
                        </strong></a></li>
                    <li><a href="{xen:link account/likes}"><i class="fa fa-thumbs-up fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase likes_youve_received}</a></li>
                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}"><i class="fa fa-comments icon-large  icon-fixed-width" style="padding-right:7px;"></i>{xen:phrase your_content}</a></li>
                    <li><a href="{xen:link account/following}"><i class="fa fa-group fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase people_you_follow}</a></li>
                    <li><a href="{xen:link account/ignored}"><i class="fa fa-ban fa-large  fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase people_you_ignore}</a></li>
                    <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}"><i class="fa fa-arrow-circle-up fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase account_upgrades}</a></li></xen:if>
                </xen:hook>
                </ul>
            </div>
            <div class="menuColumns secondaryContent">
                <ul class="col1 blockLinksList">
                    <li>    
                        <form action="{xen:link account/toggle-visibility}" method="post" class="AutoValidator visibilityForm">
                            <label><input type="checkbox" name="visible" value="1" class="SubmitOnChange" {xen:checked $visitor.visible} />
                                {xen:phrase show_online_status}</label>
                            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
                        </form>
                    </li>
                </ul>
                <ul class="col2 blockLinksList">
                    <li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut"><i class="fa fa-sign-out fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase log_out}</a></li>

Bạn có thể phải thêm "color: #;" trong style= cho phù hợp với nhu cầu của bạn.

3. Vào template account_wrapper và thay thế tất cả giữa
Mã:
<li class="section">

</li>

Bằng
Mã:
<ul>
                    <xen:hook name="account_wrapper_sidebar_your_account">
                    <li><a
                        class="{xen:if "{$selectedKey} == 'alerts/latest'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/alerts}"><i class="fa fa-exclamation-circle fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase your_alerts}</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a
                        class="{xen:if "{$selectedKey} == 'alerts/newsFeed'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/news-feed}"><i class="fa fa-rss fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase your_news_feed}</a></li></xen:if>
                    <li><a
                        class="{xen:if "{$selectedKey} == 'alerts/likes'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/likes}"><i class="fa fa-thumbs-o-up fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase likes_youve_received}</a></li>
                    <li><a
                        class="primaryContent"
                        href="{xen:link watched/threads}"><i class="fa fa-comment fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase watched_threads}</a></li>
                    <li><a
                        class="primaryContent"
                        href="{xen:link watched/forums}"><i class="fa fa-comments fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase watched_forums}</a></li>
                    </xen:hook>
                </ul>
            </li>
        
            <!-- slot: pre_conversations -->
        
            <li class="section"><h4 class="subHeading">{xen:phrase conversations}</h4>
                <ul>
                    <xen:hook name="account_wrapper_sidebar_conversations">
                    <li><a
                        class="{xen:if "{$selectedKey} == 'conversations/view'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link conversations}"><i class="fa fa-inbox fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase view_conversations}</a></li>
                    <xen:if is="{$canStartConversation}"><li><a
                        class="{xen:if "{$selectedKey} == 'conversations/add'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link conversations/add}"><i class="fa fa-envelope fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase start_new_conversation}</a></li></xen:if>
                    </xen:hook>
                </ul>
            </li>
        
            <!-- slot: pre_settings -->
        
            <li class="section"><h4 class="subHeading">{xen:phrase settings}</h4>
                <ul>
                    <xen:hook name="account_wrapper_sidebar_settings">
                    <xen:if is="{$canEditProfile}"><li><a
                        class="{xen:if "{$selectedKey} == 'account/personalDetails'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/personal-details}"><i class="fa fa-user fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase personal_details}</a></li></xen:if>
                    <xen:if is="{$canEditSignature}"><li><a
                        class="{xen:if "{$selectedKey} == 'account/signature'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/signature}"><i class="fa fa-pencil fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase signature}</a></li></xen:if>
                    <li><a
                        class="{xen:if "{$selectedKey} == 'account/contactDetails'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/contact-details}"><i class="fa fa-book fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase contact_details}</a></li>
                    <li><a
                        class="{xen:if "{$selectedKey} == 'account/privacy'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/privacy}"><i class="fa fa-lock fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase privacy}</a></li>
                    <li><a
                        class="{xen:if "{$selectedKey} == 'account/preferences'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/preferences}"><i class="fa fa-cog fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase preferences}</a></li>
                    <li><a
                        class="{xen:if "{$selectedKey} == 'account/alertPreferences'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/alert-preferences}"><i class="fa fa-bell fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase alert_preferences}</a></li>
                    <li><a
                        class="{xen:if "{$selectedKey} == 'account/following'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/following}"><i class="fa fa-group fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase people_you_follow}</a></li>
                    <li><a
                        class="{xen:if "{$selectedKey} == 'account/ignored'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/ignored}"><i class="fa fa-ban fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase people_you_ignore}</a></li>
                    <xen:if is="{$xenCache.userUpgradeCount}"><li><a
                        class="{xen:if "{$selectedKey} == 'account/upgrades'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/upgrades}"><i class="fa fa-arrow-circle-up fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase account_upgrades}</a></li></xen:if>
                    <xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.twitterAppKey} OR {$xenOptions.googleClientId}"><li><a
                        class="{xen:if "{$selectedKey} == 'account/externalAccounts'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/external-accounts}"><i class="fa fa-chain-broken fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase external_accounts}</a></li></xen:if>
                    <li><a
                        class="{xen:if "{$selectedKey} == 'account/security'", 'secondaryContent', 'primaryContent'}"
                        href="{xen:link account/security}"><i class="fa fa-key fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase password}</a></li>
                    </xen:hook>
                </ul>

Và thay thế bằng:
Mã:
<li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}"
                        class="LogOut primaryContent"><i class="fa fa-sign-out fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase log_out}</a></li>

Bạn có thể phải thêm "color: #;" trong style= cho phù hợp với nhu cầu của bạn.

panel.png

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


Nguồn: xenforo.com​
 
Back
Top