Thêm một Footer đẹp cho diễn đàn Xenforo

NDK · 03/11/2015

Tiếp đây là hướng dẫn các bạn cách tạo Footer đẹp và cũng đơn giản như phần Tạo Footer với 6 cột

Các bạn cần tải file hình các icon Social vào thư mục Styles--Style của bạn:

extra

Trước tiên, các bạn vào template Footer, sửa toàn bộ code thành:

PHP:

<xen:edithint template="footer.css" />
<xen:hook name="footer">
<div class="footer">
    <div class="pageWidth">
        <div class="pageContent">
        <ul>
        <li class="footerBlock footerBlock1">
            <div>
                <h3>ABOUT US</h3>
            <p class="text">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
            <p class="social clearfix">
                <a href="#"><img src="@imagePath/extra/social-01.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-02.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-03.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-04.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-05.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-06.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-07.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-08.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-09.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-10.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-11.png" alt="image" /></a>
                <a href="#"><img src="@imagePath/extra/social-12.png" alt="image" /></a>
            </p>
            </div>
        </li>
        <li class="footerBlock footerBlock2">
            <div>
                <h3>RELATED LINK</h3>
            <ul>
                <li><a href="#">Related Link 1</a></li>
                <li><a href="#">Related Link 2</a></li>
                <li><a href="#">Related Link 3</a></li>
                <li><a href="#">Related Link 4</a></li>
                <li><a href="#">Related Link 5</a></li>
            </ul>
            </div>
        </li>
        <li class="footerBlock footerBlock2 footerBlock3">
            <div>
                <h3>RELATED LINK</h3>
            <ul>
                <li><a href="#">Related Link 1</a></li>
                <li><a href="#">Related Link 2</a></li>
                <li><a href="#">Related Link 3</a></li>
                <li><a href="#">Related Link 4</a></li>
                <li><a href="#">Related Link 5</a></li>
            </ul>
            </div>
        </li>
        <li class="footerBlock footerBlock4">
            <div>
                <h3>CONTACT US</h3>
<ul>
                <li><i class="fa fa-home"></i> 15 Str., 4844, Ipsum, State, UK</li>
                <li><i class="fa fa-phone"></i> +30-2106019311</li>
                <li><i class="fa fa-envelope-o"></i> [email protected]</li>
                <li><i class="fa fa-globe"></i> www.brivium.com</li>
            </ul>
            </div>
        </li>
        </ul>
        <xen:comment>
            <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
            <dl class="choosers">
                <xen:if is="{$canChangeStyle}">
                    <dt>{xen:phrase style}</dt>
                    <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                </xen:if>
                <xen:if is="{$canChangeLanguage}">
                    <dt>{xen:phrase language}</dt>
                    <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>
            </dl>
            </xen:if>
         
            <ul class="footerLinks">
            <xen:hook name="footer_links">
                <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                    <a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a>
                <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                    <a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a>
                </xen:if>
                <li><a href="{xen:link help}">{xen:phrase help}</a></li>
                <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
                <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
                <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
            </xen:hook>
            </ul>
            </xen:comment>
         
            <span class="helper"></span>
        </div>
    </div>
</div>

<div class="footerLegal">
    <div class="pageWidth">
        <div class="pageContent">
     
            <div id="copyright">{xen:helper copyright} {xen:phrase extra_copyright} Developed by <a href="http://share4web.net/" target="_blank">Share4Web Team</a></div>
            <xen:hook name="footer_after_copyright" />
     
            <ul id="legal">
            <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
                <xen:if is="{$canChangeStyle}">
                <li>
                    <a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a>
                </li>
                </xen:if>
                <xen:if is="{$canChangeLanguage}">
                <li>
                    <a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a>
                </li>
                </xen:if>
            </xen:if>
            <xen:hook name="footer_links_legal">
                <xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
                <xen:if is="{$xenOptions.privacyPolicyUrl}"><li><a href="{$xenOptions.privacyPolicyUrl}">{xen:phrase privacy_policy}</a></li></xen:if>
            </xen:hook>
            <li>
                <ul class="footerLinks">
            <xen:hook name="footer_links">
                <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                    <li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
                <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                    <li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
                </xen:if>
                <li><a href="{xen:link help}">{xen:phrase help}</a></li>
                <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
                <li><a href="{$requestPaths.requestUri}#navigation" class="topLink"><i class="fa fa-angle-up fa-lg"></i><xen:comment>{xen:phrase go_to_top}</xen:comment></a></li>
                <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
            </xen:hook>
            </ul>
            </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>

Kế đó, các bạn sửa toàn bộ nội dung trong template Footer.css bằng đoạn code:

PHP:

.footer .pageContent
{
    @property "footer";
    font-size: 12px;
    overflow: hidden;
    zoom: 1;
    @property "/footer";
}
    footer,
    .footer a,
    .footer a:visited
    {
        @property "footerLink";
        color: @textCtrlBackground;
        @property "/footerLink";
    }
 
    .footerLegal a
    {
        color: @contentBackground;
    }
     
        .footerLegal a:hover,
        .footerLegal a:active,
        .footer a:hover,
        .footer a:active
        {
            @property "footerLinkHover";

            @property "/footerLinkHover";
        }

    .footer .choosers
    {
        @property "footerLeftBlock";
        padding-left: 5px;
        float: left;
        overflow: hidden;
        zoom: 1;
        @property "/footerLeftBlock";
    }
 
        .footer .choosers dt
        {
            display: none;
        }
     
        .footer .choosers dd
        {
            float: left;
            <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
        }
     
    .footerLinks
    {
        @property "footerRightBlock";
        padding-right: 5px;
        float: right;
        overflow: hidden;
        zoom: 1;
        @property "/footerRightBlock";
    }
 
        .footerLinks li
        {
            float: left;
            <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
        }
     
            .footerLinks a.globalFeed
            {
                width: 14px;
                height: 14px;
                display: block;
                text-indent: -9999px;
                white-space: nowrap;
                background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
                padding: 0;
                /*margin: 5px;*/
            }

.footerLegal .pageContent
{
    font-size: 12px;
    overflow: hidden; zoom: 1;
    padding: 10px 5px;
    text-align: center;
}
 
    #copyright
    {
        float: left;
    }
 
    #legal
    {
        float: right;
    }
 
        #legal li
        {
            float: left;
            <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
        }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive .footerLinks a.globalFeed,
    .Responsive .footerLinks a.topLink,
    .Responsive .footerLinks a.homeLink
    {
        display: none;
    }

    .Responsive .footerLegal .debugInfo
    {
        clear: both;
    }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive #copyright span
    {
        display: none;
    }
}
</xen:if>

Bước cuối cùng, các bạn thêm vào template Extra.css đoạn code:

PHP:

/* Extra Footer */
footer
{
    background-color: @primaryMedium;
}

.footer
{
    line-height: 18px;
    border-top: 2px solid @pageBackground;
}

.footer .pageContent
{ 
    padding: 20px 10px;
}

.footer h3
{
    padding: 10px 0;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 600;
    color: @contentBackground;
}

.footerBlock
{
    font-size: 13px;
    float: left;
}

.footerBlock > div
{
    padding:0 10px; 
    box-sizing: border-box;
}

.footerBlock:first-child > div
{
    padding-left: 0;
}

.footerBlock:last-child > div
{
    padding-right: 0;
}

.footerBlock1
{
    width: 34%;
}

.footerBlock1 .social
{
    padding-top: 20px;
}

.footerBlock1 .social a
{
    margin-right: 3%;
    display: inline-block;
}

.footerBlock2,
.footerBlock4
{
    width: 22%;
}

.footerBlock4 ul li
{
    margin-bottom: 6px;
}

.footerBlock4 ul li .fa
{
    margin-right: 5px;
}

/********** FooterLegal ***********/

.footerLegal
{
    background-color: rgba(0,0,0,0.4);
}

.footerLegal .pageContent
{
    padding:10px;
}

.footerLegal .fa
{
    font-size: 18px;
}

.footerLegal #legal li  a
{
    margin-left: 10px;
}

.footerLinks a.globalFeed
{
    margin: 0;
}

.footerLegal #BRCopyright .muted .concealed
{
    color: @faintTextColor !important;
}

<xen:if is="@enableResponsive">
@media (max-width:@nonResponsiveMinWidth)
{
    .Responsive .pairsInline.debugInfo
    {
        display: none;
    }
}
@media (max-width:@maxResponsiveWideWidth)
{
    .Responsive #copyright
    {
        float: none;
    }
 
    .Responsive #legal
    {
        float: none;
        display: inline-block;
    }
 
    .Responsive #legal>li
    {
    }
 
    .Responsive .footerBlock1
    {
        width: 100%;
        float: none;
        display: inline-block;
        text-align: justify;
    }
 
    .Responsive .footerBlock2,
    .Responsive .footerBlock4
    {
        width: 33%;
    }
 
}
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive #BRCopyright
    {
        float: none !important;
    }
 
}
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .footerBlock2,
    .Responsive .footerBlock4
    {
        float: none;
        width: 90%;
        margin: auto; 
        text-align: center;
        margin-top: 10px;
    }
 
    .Responsive .footerBlock1 h3
    {
        text-align: center;
    }

    .Responsive #legal li
    {
        display: inline-block;
        float: none;
        vertical-align: middle;
    }
 
    .Responsive .footerBlock1 .social a
    {
        margin-right: 2%;
    }
 
}
</xen:if>

Lưu lại và tận hưởng thành quả.
Lưu ý, các bạn có thể chỉnh sửa lại màu sắc và nội dung Footer sao cho phù hợp với diễn đàn của các bạn.
Cám ơn mọi người đã theo dõi. Chúc thành công !

tuannt · 04/11/2015

cái này code responsive chưa bạn, vì một số code footer trên pc thì ok, còn mobile thì ko chuẩn

NDK · 04/11/2015

Thím đã cài đặt thử chưa ?

KenLilBoiz · 04/11/2015

tuannguyenseo nói:
cái này code responsive chưa bạn, vì một số code footer trên pc thì ok, còn mobile thì ko chuẩn

thím nhìn thế này mà thím còn hỏi đến bó chiêu

HTML:

<xen:if is="@enableResponsive">

tuannt · 04/11/2015

Mã:

Các bạn cần tải file hình các icon Social vào thư mục Styles--Style của bạn:

hi đã add thử rồi, nhưng cho mình hỏi đường dẫn icon up vào thư mục nào vậy bác, bên mình chỗ contact us chưa xuất hiện các icon

NDK · 04/11/2015

Up theo đường dẫn : Styles-->Styles đang dùng

NDK · 28/12/2015

@tuannguyenseo
Bác để lại câu châm ngôn thật tuyệt vời.
Đồng cảnh ngộ T_T

kamchatka · 28/12/2015

icon mxh thì up theo path thôi còn bên contact us thì là fort awesome mà

Kem · 10/01/2016

@PVS cho em hỏi muốn thêm Font Awesome vô cái Contact us thì thay css sao ạ?
____________________
Update: đã làm dc, sr đã tag PVS vô

tqhuy · 23/08/2017

Cái này đẹp quá bác. Đang cần. Thank bác @Ái Nhi

tqhuy · 23/08/2017

Up theo đường dẫn : Styles-->Styles đang dùng là thế nào bác @Ái Nhi ơi. Mình vào đến đấy nhưng ko biết up ảnh thế nào

NDK · 04/09/2017

tqhuy nói:
Up theo đường dẫn : Styles-->Styles đang dùng là thế nào bác @Ái Nhi ơi. Mình vào đến đấy nhưng ko biết up ảnh thế nào
View attachment 22282

Ý mình là up folder có tên extra vào thư mục chứa Style của bạn đang dùng đó. Ví dụ như bạn dùng syle Default thì đường dẫn là : /Styles--Default/extra

tqhuy · 13/09/2017

ok. Cám ơn bác @Ái Nhi nhiều

vudinhkhang2 · 26/05/2019

template footer ở đâu vậy a - em dùng xf2

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
L	Other 2x Hỏi về thêm icon sau node list	Template Modifications	1	14/04/2023
	Help Thêm điều kiện cho Auto-promote trên Xenporta 2?	Template Modifications	4	03/01/2017
	Add a random quote block to the sidebar - Thêm một block trích dẫn ngẫu nhiên vào sidebar 1.0	Template Modifications	0	08/04/2016
	Thêm một hình ảnh bên trái tiêu đề bình chọn thay thế dấu chấm hỏi 1.0	Template Modifications	0	08/04/2016
	Thêm một chuyển khung thành viên nằm ngang đẹp	Template Modifications	1	02/12/2015

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Thêm một Footer đẹp cho diễn đàn Xenforo

NDK

MasterSergeant

tuannt

MasterCorporal

NDK

MasterSergeant

KenLilBoiz

CEO DAWEBZ Chuyên Gia Dịch Vụ Trực Tuyến

tuannt

MasterCorporal

NDK

MasterSergeant

NDK

MasterSergeant

kamchatka

MasterCorporal

Kem

Private

tqhuy

Private

tqhuy

Private

NDK

MasterSergeant

tqhuy

Private

vudinhkhang2

Corporal

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT