Footer giống Vxf

1,475 0 2
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
Footer giống Vxf

Vào template footer 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 class="footercolumns" id="footer">
                <div class="blockFooter footer-top-left">
                        <div class="boxInner">
                    <div class="block-top"><img width="170" height="35" src="http://vxf.vn/styles/vxf/xenforo/logo-footer.png" alt="VXF Logo" class="footerLogo"></div>
                    <div class="block-bottom">
                    <p>Cộng đồng XenForo Việt Nam được thành lập từ 5/2012 với mục đích giao lưu, học hỏi, chia sẻ và thảo luận về mọi vấn đề liên quan đến mã nguồn XenForo. </p>
<p>Chúng tôi sẽ không chịu trách nhiệm với các thông tin do thành viên đưa lên trừ thông tin nội bộ.
</p>
<p>Website đang hoạt động thử nghiệm, chờ giấy phép </p>
                    </div>
                    </div>
                </div>
                 <div class="blockFooter fotter-contact">
                        <div class="boxInner">
                            <h3>Our Links</h3>
                            <div class="boxContent">
                                <ul class="itemsList hasIcon">
                                    <li><a target="_blank" href="http://hkda.vn"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>HKDA Việt Nam</a></li>
                                    <li><a target="_blank" href="http://mga.vn"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Email Google Apps</a></li>
                                    <li><a target="_blank" href="http://mailexpress.vn"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Email Marketing</a></li>
                                    <li><a target="_blank" href="http://cer.vn"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Chứng chỉ SSL</a></li>
                                    <li><a target="_blank" href="http://nhattao.biz"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Nhật Tảo</a></li>
                                    <li><a target="_blank" href="http://emailtenmienrieng.com"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Email tên miền riêng</a></li>
                                    <li><a target="_blank" href="http://dvddohoa.com"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>DVD Đồ họa</a></li>
                                </ul>
                            </div>
                        </div>
             
                    </div>
                <div class="blockFooter three columns column">
                    <div class="boxInner">
                        <h3>Thông tin</h3>
                 
                        <div class="boxContent">
                            <ul class="itemsList hasIcon">
                                <li><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Text Link</a></li>
                                <li><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Text Link</a></li>
                                <li><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Text Link</a></li>
                                <li><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Text Link</a></li>
                                <li><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Text Link</a></li>
                                <li><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Text Link</a></li>
                                <li><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Text Link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="blockFooter four columns column">
                    <div class="boxInner">
                        <h3>From our blog</h3>
                 
                        <div class="boxContent">
                            <ul class="itemsList">
                                <li><span class="green">W4U</span><a href="/">Lorem ipsum dolor sit amet</a></li>
                                <li><span class="blue">VXF</span><a href="/">Consectetuer adipiscing elit</a></li>
                                <li><span class="yellow">VJL</span><a href="/">Sed diam nonummy nibh euismod</a></li>
                                <li><span class="skyblue">VOP</span><a href="/">Tincidunt ut laoreet dolore magna</a></li>
                                <li><span class="orange">MAG</span><a href="/">Aliquam erat volutpat</a></li>
                                <li><span class="skyblue">VWP</span><a href="/">Ut wisi enim ad minim veniam</a></li>
                                <li><span class="green">W4U</span><a href="/">Aliquip ex ea commodo consequat</a></li>                     
                         
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
     

     
 
        </div>
    </div>
</div>


<div class="footerLegal">
<div class="pageWidth">
<div class="pageContent">
<div id="copyright"><font color=green>Diễn đàn sử dụng XenForo&trade; &copy;2011 XenForo Ltd.</font>

            </div>
<ul id="legal">



<li class="choosers">

<xen:if is="{$canChangeLanguage}">
                    <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
                </xen:if>

</li>

<li class="choosers">

</li>

<li><a href="help/terms">Quy định và Nội quy</a></li>

<li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>

</ul>
<xen:if is="{$debugMode}">
                <xen:if hascontent="true">
                    <dl class="pairsInline debugInfo" 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}" rel="nofollow">{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>

Qua template footer.css thay toàn bộ bằng code sau:
Mã: 
#footer {
    clear: both;
    min-height: 100px;
    padding: 20px 0 25px;
}
.footer {
    background: none repeat scroll 0 0 #090c15;
    clear: both;
}
.footercolumns {
    display: inline;
    margin-left: 0;
    margin-right: 0;
}
.footer-top-left .block-top {
    margin-bottom: 10px;
}
.footer-top-left .block-bottom {
    float: left;
    margin-bottom: 5px;
    margin-right: 15px;
    padding-bottom: 5px;
}
.footer-top-left .block-bottom span {
    color: #fff;
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.footer-top-left .block-bottom p {
    font-size: 12px;
    margin-bottom: 0;
    padding: 10px 0;
}
.footer-top-left .connect-face {
    clear: both;
}
.footer-top-left .connect-face p {
    color: #95a1bc;
    float: left;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}
.connect-face ul li {
    display: inline;
    float: left;
    padding-left: 10px;
}
.fotter-contact {
    min-height: 174px;
}
.footer h3 {
    background: none repeat scroll 0 0 #10131c;
    border-bottom: 1px solid #090c15;
    border-radius: 3px 3px 0 0;
    color: rgb(56, 68, 91);
    font-family: "Roboto",sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    text-transform: uppercase;
}
.footer .boxInner {
    padding: 0 10px;
}
.footer .four span {
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    width: 30px;
}
.footer .four .blue {
    color: #1175a7;
}
.footer .four .yellow {
    color: #eb8400;
}
.footer .four .skyblue {
    color: #0ea7c6;
}
.footer .four .orange {
    color: #dd3b0d;
}
.footer .four .green {
    color: #5ea618;
}
.footer .boxContent {
    background: none repeat scroll 0 0 #0d1019;
    border-radius: 0 0 3px 3px;
    padding: 0 10px;
}
.footer .boxContent ul.itemsList li {
    border-top: 1px solid #10131c;
    padding: 5px 0;
    position: relative;
}
.footer .boxContent ul.itemsList li:first-child {
    border-top: 0 none;
}
.fotter-contact p {
    font-size: 12px;
    margin-bottom: 0;
    padding-bottom: 5px;
}
.fotter-contact a {
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
}
#footer .four.columns.column {
    min-height: 174px;
}
#footer .column a {
    font-size: 14px;
    text-decoration: none;
}
#footer .column a:hover {
    color: #bbb;
}
#footer .three.columns.column {
    min-height: 174px;
}
.footer .pageContent {
    color: rgb(51, 56, 72);
    font-size: 14px;
    overflow: hidden;
    padding: 50px 0 40px;
}
.footer a, .footer a:visited {
    color: rgb(51, 56, 72);
}
.footer a:hover, .footer a:active {
    color: rgb(200, 200, 200);
    text-decoration: none;
}
.footer .choosers {
    float: left;
    overflow: hidden;
    padding-left: 5px;
}
.footer .choosers dt {
    display: none;
}
.footer .choosers dd {
    float: left;
}
.footerLinks {
    float: right;
    overflow: hidden;
    padding-right: 5px;
}
.footerLinks li {
    float: left;
}
.footerLinks a.globalFeed {
    background: url("http://vxf.vn/styles/vxf/xenforo/xenforo-ui-sprite.png") no-repeat scroll -112px -16px rgba(0, 0, 0, 0);
    display: block;
    height: 14px;
    margin: 5px;
    padding: 0;
    text-indent: -9999px;
    white-space: nowrap;
    width: 14px;
}
.footerLegal {
    background: none repeat scroll 0 0 #080a13;
}
.footerLegal .pageContent {
    font-size: 14px;
    overflow: hidden;
    padding: 30px 0;
    text-align: center;
}
.footerLegal .pageContent a:link {
    color: rgb(56, 68, 91);
}
#copyright {
    float: left;
}
#legal {
    float: right;
}
#legal li {
    display: inline-block;
    margin-left: 10px;
}
.tweets .follow {
    background: url("http://vxf.vn/styles/vxf/extra/tweets-logo-01.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    float: right;
    padding-left: 18px;
    text-transform: none;
}
.var-narrow .timeline-header {
    background: none repeat scroll 0 0 #10131c !important;
    border-bottom: 1px solid #090c15 !important;
    border-radius: 3px 3px 0 0 !important;
    color: #68738c !important;
    font-family: "Roboto",sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px !important;
    text-transform: uppercase !important;
}
.descImage {
    float: left;
    margin-right: 10px;
}
.boxFooter {
    border: 5px solid #10131c;
    color: #4f5c77;
    padding: 5px 10px 7px;
}
@media (max-width: 800px) {
}
@media (max-width: 610px) {
.pageWidth {
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
}
#copyright, #legal {
    float: none;
}
}
@media (max-width: 480px) {
#copyright, #legal {
    float: none !important;
}
#termsRule, #toTop {
    display: none !important;
}
}
#footer .footerLogo {
    height: auto;
    max-width: 100%;
    width: auto;
}
#footer .boxContent ul.itemsList.hasIcon li a .fa-lg {
    margin-right: 5px;
}
.footer .blockFooter {
    float: left;
    width: 25%;
}

1.png

​
Chúc các bạn thành công.


Nguồn: kicode.us​
 
Bài viết liên quan
Hỏi cách thêm footer vào theme bởi bloghocpiano,
Giúp em cách sửa giao diện trong forum giống voz và otosaigon bởi Onlezy,
Xóa dòng bản quyền ở footer bởi boynetbom,
Thêm Footer cho Xenforo 2.0.1 với Style Royal bởi minhmin,
Tạo thống kê Xenforo ở Footer với phong cách màu mè xì teen bởi NDK,
Xóa footer trong theme Material bởi tungaqhd,
Bài viết mới
Mong các AE giúp đỡ em tạo Custom thread fields bởi nguyendinhnham,
Hiện bài viết trên thống kê. bởi maichi111,
làm như thế này như thế nào ạ bởi phamnguyen,
Sao profile post của mình k hiện bởi sanhpv,
Hỏi về rank bị dài bởi boyngheo21,
Xenforo modification bởi urkyfight,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
bloghocpiano Other 2x Hỏi cách thêm footer vào theme Template Modifications 10
boynetbom Help Xóa dòng bản quyền ở footer Template Modifications 15
PVS Other Cách làm Footer giống VJL.VN (VXF.VN) đầy đủ Responsive Template Modifications 3
PVS Footer giống Tinh Tế (cũ) Template Modifications 0
L share footer giống vxf.vn Template Modifications 0

Chủ đề tương tự


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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom