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

NDK

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
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
12096604_562707133885147_4278259554396724049_n.jpg

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:
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

MasterCorporal
Tham gia
07/04/2015
Bài viết
251
Được Like
140
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

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
Thím đã cài đặt thử chưa ?
 

KenLilBoiz

CEO DAWEBZ Chuyên Gia Dịch Vụ Trực Tuyến
Tham gia
05/08/2015
Bài viết
340
Được Like
363
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
thím nhìn thế này mà thím còn hỏi đến bó chiêu
HTML:
<xen:if is="@enableResponsive">
 

tuannt

MasterCorporal
Tham gia
07/04/2015
Bài viết
251
Được Like
140
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

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
Up theo đường dẫn : Styles-->Styles đang dùng
 

NDK

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
@tuannguyenseo
Bác để lại câu châm ngôn thật tuyệt vời.
Đồng cảnh ngộ T_T
 

kamchatka

MasterCorporal
Tham gia
14/04/2015
Bài viết
248
Được Like
162
icon mxh thì up theo path thôi còn bên contact us thì là fort awesome mà
 

Kem

Private
Tham gia
31/12/2015
Bài viết
22
Được Like
20
@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ô :D
 
Sửa lần cuối:

tqhuy

Private
Tham gia
30/05/2017
Bài viết
39
Được Like
8
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
upload_2017-8-23_14-57-20.png
 

NDK

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
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
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom