Help Làm background cho footer sao vậy

nghiapro

Thượng Đế
Tham gia
23/06/2015
Bài viết
221
Được Like
101
Làm background cho footer sao vậy ?
Giống như hình bên dưới
upload_2015-9-7_10-24-31.png
 

CNTT01

Snow Flower ✔
Tham gia
06/07/2015
Bài viết
803
Được Like
686
làm footer giống http://vxf.vn/
Vào template footer thay toàn bộ thành

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="Rao vặt miễn phí" src="http://muare5s.com/styles/default/xenforo/muare5s.jpg" height="60px" style="float: left" />
                                                               <a href="http://movie.buidoi.vn" title="Xem phim online, phim hd online"><img src="http://img407.imageshack.us/img407/4163/buidoinet15052013.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/buidoifc"><img alt="Facebook" src="http://muare5s.com/data/images/face.png" title="FaceBook"></a></li>
<li><a href="http://youtube.com/user/synam135"><img alt="Social" src="http://muare5s.com/data/images/youtube.png" title="Youtube"></a></li>
<li><a href="http://twitter.com/buidoinet"><img alt="Twitter" src="http://muare5s.com/data/images/twitter.png" title="Twitter"></a></li>
<li><a href="https://plus.google.com/103596386203292835277"><img alt="Google" src="http://muare5s.com/data/images/google.png" title="Google"></a></li>
<li><a href="#"><img alt="Social" src="http://muare5s.com/data/images/pinterest.png" title="Pinterest"></a></li>
<li><a href="forums/-/index.rss"><img alt="Rss Feed" src="http://muare5s.com/data/images/rss.png" title="Rss Feed"></a></li>
</ul>
</div>
</div>
<div class="fotter-contact">
<h3>Our Links</h3>
<ul>
<li><a href="http://buidoi.net/" target="_blank">Wapmaster Việt</a></li>
<li><a href="http://movie.buidoi.vn/" target="_blank">Xem Phim Online</a></li>
<li><a href="http://tutviet.com" 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="http://hosting.lesynam.info" target="_blank">Host giá rẻ</a></li>
<li><a href="http://cntt4u.com" 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="http://muare5s.com/forums/2/">Thông báo chung</a></li>
<li><a href="http://muare5s.com/forums/3/">Thắc mắc, góp ý</a></li>
<li><a href="http://muare5s.com/categories/5/">Thị trường mua bán</a></li>
<li><a href="http://muare5s.com/categories/34/">Việc làm, Tuyển sinh</a></li>
<li><a href="http://muare5s.com/categories/45/">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 css footer.css thay toàn bộ thành

Mã:
#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;
        }
nhớ sửa lại những thứ cần sửa nhé !
save lại, done
 

nghiapro

Thượng Đế
Tham gia
23/06/2015
Bài viết
221
Được Like
101
làm footer giống http://vxf.vn/
Vào template footer thay toàn bộ thành

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="Rao vặt miễn phí" src="http://muare5s.com/styles/default/xenforo/muare5s.jpg" height="60px" style="float: left" />
                                                               <a href="http://movie.buidoi.vn" title="Xem phim online, phim hd online"><img src="http://img407.imageshack.us/img407/4163/buidoinet15052013.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/buidoifc"><img alt="Facebook" src="http://muare5s.com/data/images/face.png" title="FaceBook"></a></li>
<li><a href="http://youtube.com/user/synam135"><img alt="Social" src="http://muare5s.com/data/images/youtube.png" title="Youtube"></a></li>
<li><a href="http://twitter.com/buidoinet"><img alt="Twitter" src="http://muare5s.com/data/images/twitter.png" title="Twitter"></a></li>
<li><a href="https://plus.google.com/103596386203292835277"><img alt="Google" src="http://muare5s.com/data/images/google.png" title="Google"></a></li>
<li><a href="#"><img alt="Social" src="http://muare5s.com/data/images/pinterest.png" title="Pinterest"></a></li>
<li><a href="forums/-/index.rss"><img alt="Rss Feed" src="http://muare5s.com/data/images/rss.png" title="Rss Feed"></a></li>
</ul>
</div>
</div>
<div class="fotter-contact">
<h3>Our Links</h3>
<ul>
<li><a href="http://buidoi.net/" target="_blank">Wapmaster Việt</a></li>
<li><a href="http://movie.buidoi.vn/" target="_blank">Xem Phim Online</a></li>
<li><a href="http://tutviet.com" 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="http://hosting.lesynam.info" target="_blank">Host giá rẻ</a></li>
<li><a href="http://cntt4u.com" 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="http://muare5s.com/forums/2/">Thông báo chung</a></li>
<li><a href="http://muare5s.com/forums/3/">Thắc mắc, góp ý</a></li>
<li><a href="http://muare5s.com/categories/5/">Thị trường mua bán</a></li>
<li><a href="http://muare5s.com/categories/34/">Việc làm, Tuyển sinh</a></li>
<li><a href="http://muare5s.com/categories/45/">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 css footer.css thay toàn bộ thành

Mã:
#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;
        }
nhớ sửa lại những thứ cần sửa nhé !
save lại, done
minh cần thay cái background mà :D
 

SangNTP

Thượng Đế
Tham gia
04/11/2015
Bài viết
156
Được Like
62
@AkinaSana làm sao vậy bạn, mình muốn chỉ riêng cái background thôi, không cần mấy cái khác :D
 

AkinaSana

Thượng Đế
Tham gia
04/02/2016
Bài viết
40
Được Like
29
hình như là bỏ vào chỗ nào mình thích ở footer.css
Mã:
footer
{
    background: url('link ảnh') repeat;
}
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom