Tạo footer đẹp responsive cho Xenforo

Thảo luận trong 'Thủ thuật Xenforo' bắt đầu bởi Admin, 1/7/14.

Đọc: 2,983

  1. Admin Administrator

    Responsive design đang là xu hướng thiết kế web hiện nay. Một trang web thân thiện phải hiển thị tốt trên mọi thiết bị, và website Xenforo cũng không là ngoại lệ. Mình xin chia sẻ với các bạn cách tạo footer đẹp responsive cho diễn đàn Xenforo.

    Demo: http://kyniem.org

    Một số hình ảnh:

    [​IMG]

    [​IMG]

    Footer tự động co giãn để phù hợp với mọi kích cỡ màn hình...
    Cách thực hiện:
    Thay toàn bộ template footer bằng code sau:
    Mã:
    <xen:edithint template="footer.css" />
    
    <xen:hook name="footer">
    
    <div class="footerQuickLinks">
        <div class="pageWidth">
            <div class="pageContent">
                <div class="box-left">
                    <h3>Xenforo</h3>
                    <ul>
                        <li><a href="http://kyniem.org/dien-dan/code-xenforo.35.html">Code Xenforo</a></li>
                        <li><a href="http://kyniem.org/dien-dan/style-xenforo.34.html">Style Xenforo</a></li>
                        <li><a href="http://kyniem.org/dien-dan/addon-xenforo.37.html">Addon XenForo</a></li>
                    </ul>
                </div>
                <div class="box-middle">
                    <h3>Webmaster</h3>
                    <ul>
                        <li><a href="http://kyniem.org/dien-dan/wordpress.19.html">Wordpress</a></li>
                        <li><a href="http://kyniem.org/dien-dan/php-scripts.30.html">PHP Scripts</a></li>
                        <li><a href="http://kyniem.org/dien-dan/code-html-css-js.36.html">HTML/CSS/JS</a></li>
                    </ul>
                </div>
                <div class="box-middle">
                    <h3>Membership</h3>
                    <ul>
                        <li><a href="" >Updating</a></li>
                        <li><a href="" >Updating</a></li>
                        <li><a href="" >Updating</a></li>
                       
                    </ul>
                </div>
                <div class="box-middle">
                    <h3>Thư giản</h3>
                    <ul>
                        <li><a href="http://kyniem.org/dien-dan/clip-nong.33.html">Clip nóng</a></li>
                        <li><a href="">Updating</a></li>
                        <li><a href="">Updating</a></li>
                    </ul>
                </div>
                <div class="box-middle">
                    <h3>Liên kết</h3>
                    <ul>
                        <li><a href="http://www.dmca.com/Protection/Status.aspx?ID=9c86fdab-d4a2-4a17-8ef7-19233fcf2790" target="_blank">DMCA</a></li>
                        <li><a href="">Updating</a></li>
                        <li><a href="">Updating</a></li>
                    </ul>
                </div>
                <div class="box-right">
                    <h3>Quick Links</h3>
                    <ul>
                    <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
                        <dl class="choosers">
                            <xen:if is="{$canChangeStyle}">
                                <li><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></li>
                            </xen:if>
                            <xen:if is="{$canChangeLanguage}">
                                <li><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger" title="{$visitorLanguage.title}" rel="nofollow">Language</a></li>
                            </xen:if>
                        </dl>
                    </xen:if>
                        <li><a href="misc/contact" class="OverlayTrigger" data-overlayoptions="{&quot;fixed&quot;:false}">Contact Us</a></li>
                        <li><a href="{xen:link forums/-/index.rss}" rel="alternate" target="_blank" title="RSS feed">RSS feed</a></li>
                    </ul>
                </div>
            </div>
        </div>
    <div class="clearBoth"> </div>
    </div>
    
    </xen:hook>
    Thay toàn bộ template footer.css bằng code sau:
    Mã:
    .footerQuickLinks {
        background: url('styles/VanNgoc/img/bg-div.png') repeat scroll 0% 0% #494949;
        padding-bottom: 20px;
        min-width: 100%;
    }
    .footerQuickLinks h3 {
        color: #888888;
        font-size: 18px;
        font-weight: normal;
        line-height: 21px;
        margin-bottom: 20px;
    }
    .footerQuickLinks .pageContent .box-left
    {
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
        float: left;
        width: 16.5%;
        padding-right: 20px;
        text-align: left;
    }
    .footerQuickLinks .pageContent .box-middle
    {
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
        float: left;
        width: 16.5%;
        padding-right: 20px;
        padding-left: 20px;
        text-align: left;
    }
    .footerQuickLinks .pageContent .box-right
    {
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
        float: left;
        width: 16.5%;
        padding-left: 20px;
        text-align: left;
    }
    .footerQuickLinks ul
    {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    .footerQuickLinks li
    {
        line-height: 26px;
        list-style-type: none;
        list-style-position: outside;
    }
    .footerQuickLinks li:first-child
    {
        border-top: none;
    }
    .footerQuickLinks .pageContent
    {
        font-size: 12px;
        color: #A6A6A6;
        padding-top: 30px;
        overflow: hidden;
        zoom: 1;
        text-align: center;
    }
    
    .footerQuickLinks a, .footerQuickLinks a:visited
    {
        -moz-transition: color 0.2s linear 0s;
        -o-transition: color 0.2s linear 0s;
        -webkit-transition: color 0.2s linear 0s;
        transition: color 0.2s linear 0s;
        color: #A6A6A6;
        display: block;
        text-decoration: none;
    }
    .footerQuickLinks a:hover, .footerQuickLinks a:focus, .footerQuickLinks a:active
    {
        -moz-transition: color 0.2s linear 0s;
        -o-transition: color 0.2s linear 0s;
        -webkit-transition: color 0.2s linear 0s;
        transition: color 0.2s linear 0s;
        color: #690;
        text-decoration: none;
    }
    .clearBoth
    {
        clear: both;
    }
    
    <xen:if is="@enableResponsive">
    @media (max-width: 860px)
    {
        .Responsive .footerQuickLinks .pageContent .box-middle
        {
            display: none;
        }
       
        .Responsive .footerQuickLinks .pageContent .box-left
        {
            width: 45%;
            float: left;
            text-align: left;
            padding-left: 28px;
        }
       
        .Responsive .footerQuickLinks .pageContent .box-right
        {
            width: 45%;
            float: left;
            text-align: right;
        }
    }
    
    @media (max-width:@maxResponsiveMediumWidth)
    {
        .socialicons
        {
            float: left;
            margin-left: 35%;
        }
    
        .footerLegal .debugInfo
        {
            clear: both;
        }
       
        #copyright
        {
            display: none;
        }
    }
    
    @media (max-width:@maxResponsiveNarrowWidth)
    {       
        .footerLinks
        {
            display: none;
        }
    }
    </xen:if>
    Thế là xong! Chúc các bạn thành công!
    P/S: footer này được lấy từ style XenFitter
    thb2014 and moitruongdgp like this.
  2. thb2014

    thb2014 New Member

    sao ko responsive dc?
  3. thb2014

    thb2014 New Member

    ol dt thay xenforo và quick links. lẽ ra là thấy hết chứ?
    thay cai màu nền thành cái màu xanh của styles default xenforo thi làm sao?
  4. moitruongdgp

    moitruongdgp New Member

    Hehe cuối cùng cũng làm được rồi thanks admin nhiều nhé
    thb2014 thích bài này.
  5. Úp cho Bác mua nhanh bán đắt

Chia sẻ trang này