hot Tham gia nhóm thảo luận SEOVN trên Facebook hot

Tạo footer cho xenforo thật đơn giản

Thảo luận trong 'Xenforo' bắt đầu bởi tuanraymond, 22/11/15.

  1. tuanraymond

    tuanraymond Công ty truyền thông Tuanraymond

    Bài viết:
    839
    Đã được thích:
    61
    Tạo footer cho xenforo thật đơn giản - Bài này hướng dẫn tạo footer giống vxf.vn.
    Đầu tiên các bạn vào template footer thay toàn bộ code thành:
    Giống thế này :
    [​IMG]
    HTML:
    <xen:edithint template="footer.css" />
    <xen:hook name="footer">
    <div class="footer">
    <div class="pageWidth">
    <div class="pageContent">
    <div id="footer" class="footercolumns">
    <div id="footer-top">
    <div class="footer-top-left">
    <div class="block-top"><img alt="Rao vặt vé máy bay" src="http://letuandesign.com/wp-content/uploads/2015/11/raovatvemaybay.jpg" height="60px" />
    </div>
    <div class="block-bottom"><span>RAO VẶT MIỄN PHÍ</span>
    <div class="connect-face">
    <p>Follow us</p>
    <ul>
    <li><a href=""><img alt="Facebook" src="http://letuandesign.com/wp-content/uploads/2015/11/facebook.png" title="FaceBook"></a></li>
    <li><a href=""><img alt="Social" src="http://letuandesign.com/wp-content/uploads/2015/11/youtube.png" title="Youtube"></a></li>
    <li><a href=""><img alt="Twitter" src="http://letuandesign.com/wp-content/uploads/2015/11/twitter.png" title="Twitter"></a></li>
    </ul>
    </div>
    <p>Diễn đàn vé máy bay là nơi rao vặt vé máy bay và các lĩnh vực khác</p> </div> </div> <div class="fotter-contact"> <h3>Internal links</h3> <ul> <li><a href="http://raovatvemaybay.edu.vn/forums/ve-may-bay-ve-tau-du-lich.28/" target="_blank">Vé máy bay</a></li> <li><a href="http://raovatvemaybay.edu.vn/forums/nha-hang-khach-san.77/" target="_blank">Nhà Hàng - Khách Sạn</a></li> <li><a href="http://raovatvemaybay.edu.vn/forums/nha-xuong-di-doi-nha-xuong.82/" target="_blank">Di Dời Nhà Xưởng</a></li> <li><a href="http://raovatvemaybay.edu.vn/forums/cho-thue-van-phong-mua-ban-nha-dat-phong-thuy.122/" target="_blank">Cho Thuê văn phòng</a></li> <li><a href="http://raovatvemaybay.edu.vn/forums/noi-ngoai-that.123/" target="_blank">Nội Ngoại Thất</a></li> <li><a href="http://raovatvemaybay.edu.vn/forums/noi-rao-vat-tong-hop.36/" target="_blank">Nơi Rao Vặt Tổng Hợp</a></li> <li><a href="http://raovatvemaybay.edu.vn/forums/xe-dap-xe-may-o-to.54/" target="_blank">Xe Máy - Ô Tô</a></li>
    <li><a href="http://raovatvemaybay.edu.vn/forums/suc-khoe-lam-dep.67/" target="_blank">Sức Khỏe - Làm Đẹp</a></li>
    </ul> </div> </div> <div class="four columns column"> <h3>Thông tin</h3> <ul> <li><a href="">Thông báo chung</a></li> <li><a href="">Thắc mắc, góp ý</a></li> <li><a href="">Thị trường mua bán</a></li> <li><a href="">Việc làm, Tuyển sinh</a></li> <li><a href="">Giải Trí</a></li> <li><a href="help/">Trợ giúp</a></li> <li><a href="misc/contact">Liên hệ BQT</a></li> </ul> </div> <div class="three columns column"> <h3>Liên kết bạn bè</h3> <ul> <li><a href="#">Contact Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> </div> </div> </div> <div class="footerLegal"> <div class="pageWidth"> <div class="pageContent"> <div id="copyright">Diễn đàn sử dụng XenForo™ ©2011 XenForo Ltd. </div> <ul id="legal"> <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}"> <li class="choosers"> <xen:if is="{$canChangeLanguage}"> <a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a> </xen:if> </li> <li class="choosers"> <xen:if is="{$canChangeStyle}"> <a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a> </xen:if> </li> </xen:if> <li><a href="help/terms">Quy định và Nội quy</a></li> </ul> <xen:if is="{$debugMode}"> <xen:if hascontent="true"> <dl class="pairsInline" 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}">{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>
    
    Tiếp tục vào footer.css thay toàn bộ thành
    HTML:
    #footer {
    clear: both;
    min-height: 100px;
    padding: 20px 0 25px;
    }
    .footer {
    background: #1d1e22 url(http://muare5s.com/data/images/footer_bg.png) repeat-x top center;
    clear: both;
    margin-top: 10px;
    }
    .footercolumns {
    display: inline;
    margin-left: 0;
    margin-right: 0;
    }
    .footer-top-left {
    float: left;
    width: 440px;
    margin-top: 18px;
    padding-left: 10px;
    }
    .footer-top-left .block-top {
    padding-bottom: 8px;
    }
    .footer-top-left .block-bottom {
    float: left;
    margin-right: 15px;
    border-bottom: 1px dotted #c8c8c8;
    padding-bottom: 10px;
    margin-bottom: 8px;
    }
    .footer-top-left .block-bottom span {
    color: #fff;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 9px;
    }
    .footer-top-left .block-bottom p {
    color: #646464;
    font-size: 12px;
    margin-bottom: 0px;
    }
    .footer-top-left .connect-face p {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    float: left;
    margin-top: 9px;
    }
    .connect-face ul li {
    float: left;
    padding-left: 10px;
    display: inline;
    }
    .fotter-contact {
    float: left;
    width: 120px;
    min-height: 174px;
    border-left: 1px dotted #c8c8c8;
    margin-top: 20px;
    padding-left: 21px;
    padding-right: 16px;
    }
    #footer h3 {
    color: #fff;
    font-family: 'MyriadProRegular';
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 11px;
    }
    .fotter-contact p {
    color: #646464;
    font-size: 12px;
    padding-bottom: 5px;
    margin-bottom: 0px;
    }
    .fotter-contact a {
    font-size: 11px;
    color: #0daaac;
    text-decoration: none;
    padding-bottom: 8px;
    display: inline-block;
    }
    #footer .four.columns.column {
    float: left;
    width: 135px;
    min-height: 174px;
    border-left: 1px dotted #c8c8c8;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 15px;
    }
    #footer .column ul li {
    }
    #footer .column a {
    color: #646464;
    font-size: 12px;
    text-decoration: none;
    }
    #footer .three.columns.column {
    float: left;
    width: 165px;
    min-height: 174px;
    border-left: 1px dotted #c8c8c8;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 15px;
    }
    .footer .pageContent
    {
    font-size: 11px;
    color: #a5cae4;
    overflow: hidden;
    zoom: 1;
    }
    .footer a,
    .footer a:visited
    {
    color: #a5cae4;
    padding: 5px;
    display: block;
    }
    .footer a:hover,
    .footer a:active
    {
    color: #d7edfc;
    }
    .footer .choosers
    {
    padding-left: 5px;
    float: left;
    overflow: hidden;
    zoom: 1;
    }
    .footer .choosers dt
    {
    display: none;
    }
    .footer .choosers dd
    {
    float: left;
    
    }
    .footerLinks
    {
    padding-right: 5px;
    float: right;
    overflow: hidden;
    zoom: 1;
    }
    .footerLinks li
    {
    float: left;
    
    }
    .footerLinks a.globalFeed
    {
    width: 14px;
    height: 14px;
    display: block;
    text-indent: -9999px;
    white-space: nowrap;
    background: url('styles/default/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
    padding: 0;
    margin: 5px;
    }
    .footerLegal {
    background: #1d1e22;
    }
    .footerLegal .pageContent
    {
    font-size: 12px;
    overflow: hidden; zoom: 1;
    padding: 10px 0 10px;
    text-align: center;
    }
    .footerLegal .pageContent a:link {
    color: #d7edfc;
    }
    #copyright
    {
    color: rgb(100,100,100);
    float: left;
    }
    #legal
    {
    float: right;
    }
    #legal li
    {
    float: left;
    
    margin-left: 10px;
    }
    
     
    Chỉnh sửa cuối: 22/11/15
    namvietluat thích bài này.
  2. namvietluat

    namvietluat Member

    Bài viết:
    8
    Đã được thích:
    0
    cám ơn ad nhiều ahihi mình đang học làm 4rum bằng xenforo những chia sẽ thật hữu ích. để copy về hoc hỏi chỉnh sửa thêm ạ :D
     

Chia sẻ trang này