Footer đẹp cho diễn đàn Xenforo

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,854
Được Like
8,566
Footer đẹp cho diễn đàn Xenforo

1.png

Đầu tiên download file đính kèm và giải nén ra. Sau đó upload các file trong đó lên host, up vào folder images trên host (nếu trên host chưa có thì tạo folder mới tên images nha).
Tiếp theo vào ACP > Appearance > Template:
Vào template footer và 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">
<div id="footer" class="footercolumns">
<div id="footer-top">
<div class="footer-top-left">
<div class="block-top"><img alt="Cnm24h.tk" src="styles/soft_responsive_green/xenforo/logo.png" height="60px" style="float: left" />
                                                               <a href="http://bophim.com" title="Xem phim online, phim hd online"><img src="images/Untitled.png" alt="xem phim nhanh, xem phim online" style="float: right" width="280px" /></a>
                                        </div>
<div class="block-bottom"><span>RAO VẶT MIỄN PHÍ</span>
<p>Diễn đàn Rao Vặt - Quảng Cáo miễn phí, nơi đăng tin tìm việc, tìm người, rao bán các loại sản phẩm hiệu quả và nhanh chóng.</p>
</div>
<div class="connect-face">
<p>Follow us</p>
<ul>
<li><a href="http://facebook.com/vnxf.vn"><img alt="Facebook" src="images/facebook-variation.png" title="FaceBook"></a></li>
<li><a href="http://youtube.com/"><img alt="Social" src="images/youtube-variation.png" title="Youtube"></a></li>
<li><a href="http://twitter.com/"><img alt="Twitter" src="images/twitter-variation.png" title="Twitter"></a></li>
<li><a href="https://plus.google.com/"><img alt="Google" src="images/googleplus.png" title="Google"></a></li>
<li><a href="#"><img alt="Social" src="images/pinterest.png" title="Pinterest"></a></li>
<li><a href="forums/-/index.rss"><img alt="Rss Feed" src="images/rss-variation.png" title="Rss Feed"></a></li>
</ul>
</div>
</div>
<div class="fotter-contact">
<h3>Our Links</h3>
<ul>
<li><a href="#" target="_blank">Wapmaster Việt</a></li>
<li><a href="#" target="_blank">Xem Phim Online</a></li>
<li><a href="#" target="_blank">Thủ Thuật PC</a></li>
<li><a href="#" target="_blank">Game Online</a></li>
<li><a href="#" target="_blank">Webmaster Việt</a></li>
<li><a href="#" target="_blank">Host giá rẻ</a></li>
<li><a href="#" target="_blank">Tạp Chí Design</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™ ©2015 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>

Vào template footer.css thay thế toàn bộ bằng code sau:
Mã:
#footer {
    clear: both;
    min-height: 100px;
    padding: 20px 0 25px;
}
.footer {
    background: #1d1e22 url(http://upanh.cnm24h.tk/images/2015/07/15/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úc các bạn thành công.


PVS - Vnxf.vn
 

Đính kèm

  • images.zip
    156.4 KB · Lượt xem: 228

kieudai91

Thượng Đế
Tham gia
14/12/2015
Bài viết
22
Được Like
15
Hi bác chủ top, sao mình làm giống như bạn mà nó lại không ra giống hình ảnh demo nhỉ, nó toàn bị lỗi icom mạng xã hội thôi.
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,854
Được Like
8,566
do bạn chưa upload file đính kèm lên host :)
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,854
Được Like
8,566
trong code có khá nhiều link, bạn xem rồi thay lại thử xem
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,854
Được Like
8,566
Footer trên Xen 2 ở trong template Page_container nhé, nó nằm trong cặp thẻ <footer>...</footer>
 

phuongtrang87

Thượng Đế
Tham gia
11/08/2019
Bài viết
3
Được Like
1
Của mình đưa code lên sau đó lưu lại thì lỗi data là sao nhỉ. Bình thường thì không sao mà!
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,854
Được Like
8,566
Xen2 không có template footer.css nha bạn.
 

phuvuong

Thượng Đế
Tham gia
27/10/2020
Bài viết
3
Được Like
0
mình làm theo nhưng lỗi dàn cột vs dòng có bác nào làm thành công cho 2.2.1 chưa
 

Top Bottom