- Tham gia
- 28/02/2015
- Bài viết
- 17,149
- Được Like
- 12,745
Footer đẹp cho diễn đàn Xenforo
Đầ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:
Vào template footer.css thay thế toàn bộ bằng code sau:
Chúc các bạn thành công.
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}->{$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
Bài viết liên quan
Bài viết mới
