Other Hướng dẫn tạo footer giống tech24h.vn hiện tại

Thảo luận trong 'Community Chat' bắt đầu bởi vandieutot, 12/12/14.

1votes
5/5, 1 vote

  1. vandieutot

    vandieutot Well-Known Member

    Bài viết:
    1,582
    Likes :
    482
    [​IMG]
    Bước 1: Vào template footer thay thế toàn bộ bằng code sau:

    Mã:
    <xen:edithint template="footer.css" />
    
    <xen:hook name="footer">
    <div class="footer">
        <div class="pageWidth">
            <div class="pageContent">
                <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
                <dl class="choosers">
                    <xen:if is="{$canChangeStyle}">
                        <dt>{xen:phrase style}</dt>
                        <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                    </xen:if>
                    <xen:if is="{$canChangeLanguage}">
                        <dt>{xen:phrase language}</dt>
                        <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
                    </xen:if>
                </dl>
                </xen:if>
           
                <ul class="footerLinks">
                <xen:hook name="footer_links">
                    <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                        <li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
                    <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                        <li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
                    </xen:if>
                    <li><a href="{xen:link help}">{xen:phrase help}</a></li>
                    <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
                    <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
                    <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                        title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
                </xen:hook>
                </ul>
           
                <span class="helper"></span>
            </div>
        </div>
    </div>
    
    <div class="footerLegal">
        <div class="pageWidth">
            <div class="pageContent">
                <ul id="legal">
                <xen:hook name="footer_links_legal">
                    <xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
                    <xen:if is="{$xenOptions.privacyPolicyUrl}"><li><a href="{$xenOptions.privacyPolicyUrl}">{xen:phrase privacy_policy}</a></li></xen:if>
                </xen:hook>
                </ul>
           
                <div id="copyright">{xen:phrase xenforo_copyright}</div>
                <xen:hook name="footer_after_copyright" />
       
                <xen:if is="{$debugMode}">
                    <xen:if hascontent="true">
                        <dl class="pairsInline debugInfo" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
                        <xen:contentcheck>
                            <xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}" rel="nofollow">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                            <xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                            <xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
                        </xen:contentcheck>
                        </dl>
                    </xen:if>
                </xen:if>
           
                <span class="helper"></span>
            </div>
        </div>
    </div>
    </xen:hook>
    Bước 2: vào tiếp template footer.css thay thế toàn bộ bằng code sau:
    Mã:
    .footer .pageContent
    {
        @property "footer";
        font-size: 11px;
        color: @primaryLighter;
        background-color: @primaryMedium;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        overflow: hidden;
        zoom: 1;
        @property "/footer";
    }
    
        .footer a,
        .footer a:visited
        {
            @property "footerLink";
            color: @primaryLighter;
            padding: 5px;
            display: block;
            @property "/footerLink";
        }
    
            .footer a:hover,
            .footer a:active
            {
                @property "footerLinkHover";
                color: @primaryLighterStill;
                @property "/footerLinkHover";
            }
    
        .footer .choosers
        {
            @property "footerLeftBlock";
            padding-left: 5px;
            float: left;
            overflow: hidden;
            zoom: 1;
            @property "/footerLeftBlock";
        }
    
            .footer .choosers dt
            {
                display: none;
            }
       
            .footer .choosers dd
            {
                float: left;
                <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
            }
       
        .footerLinks
        {
            @property "footerRightBlock";
            padding-right: 5px;
            float: right;
            overflow: hidden;
            zoom: 1;
            @property "/footerRightBlock";
        }
    
            .footerLinks li
            {
                float: left;
                <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
            }
       
                .footerLinks a.globalFeed
                {
                    width: 14px;
                    height: 14px;
                    display: block;
                    text-indent: -9999px;
                    white-space: nowrap;
                    background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
                    padding: 0;
                    margin: 5px;
                }
    
    .footerLegal .pageContent
    {
        font-size: 11px;
        overflow: hidden; zoom: 1;
        padding: 5px 5px 15px;
        text-align: center;
    }
    
        #copyright
        {
            color: @dimmedTextColor;
            float: left;
        }
    
        #legal
        {
            float: right;
        }
    
            #legal li
            {
                float: left;
                <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
                margin-left: 10px;
            }
    
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveMediumWidth)
    {
        .Responsive .footerLinks a.globalFeed,
        .Responsive .footerLinks a.topLink,
        .Responsive .footerLinks a.homeLink
        {
            display: none;
        }
    
        .Responsive .footerLegal .debugInfo
        {
            clear: both;
        }
    }
    
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .Responsive #copyright span
        {
            display: none;
        }
    }
    </xen:if>
    vậy là xong các bạn có thể tùy chỉnh 1 chút cho có nét riêng với forum của mình nhé. Chúc thành công !

    Nguồn: sccn.vn
     
    Đang tải...
  2. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
  3. dev.xf

    dev.xf Member

    Bài viết:
    480
    Likes :
    203
  4. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
  5. vandieutot

    vandieutot Well-Known Member

    Bài viết:
    1,582
    Likes :
    482
    mấy hôm nay google nó thay đổi thuật toán gì vậy các bác để ý không
     
  6. dev.xf

    dev.xf Member

    Bài viết:
    480
    Likes :
    203
    vandieutot thích bài này.
  7. vandieutot

    vandieutot Well-Known Member

    Bài viết:
    1,582
    Likes :
    482
    Ý bạn là sao mình vẫn chưa hiểu cho lắm bạn à.
     
  8. Coolboyhn

    Coolboyhn Member

    Bài viết:
    503
    Likes :
    138
    Xenforo hỗ trợ link iframe để nhúng site khác nữa sao bạn.
    Bạn cho demo để anh em xem phát.
     
  9. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
  10. Zanag

    Zanag Member

    Bài viết:
    274
    Likes :
    159
  11. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    chưa, a đang về phép, 7 tháng nữa :D
     
    Zanag thích bài này.
  12. dev.xf

    dev.xf Member

    Bài viết:
    480
    Likes :
    203
    hèn chi lâu nay ko thấy chú online lắm
     
  13. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    hehe, quá khen
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...