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

NDK

NDK

MasterSergeant
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
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:
extra
Nhấn để mở rộng...
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 !
 
Bài viết liên quan
Lựa Chọn Nhóm Thành Viên Trong Quá Trình Đăng Ký bởi muabandalat,
cấu trúc Diễn đàn -Trường "comment" bị thiếu googleconsole bởi muabandalat,
Cần hỗ trợ sửa giao diện có phí bởi dichvutele,
Xenforo modification bởi urkyfight,
Lỗi icon cho giao diện IO tốt bởi Binvnhehe999,
Cần thiết kế giao diện diễn đàn bởi fanbongda,
Bài viết mới
Định dạng ngày custom_fields d-m-Y bởi muabandalat,
Lựa Chọn Nhóm Thành Viên Trong Quá Trình Đăng Ký bởi muabandalat,
Trường "url" bị thiếu (nằm trong "author") bởi muabandalat,
Xin hỏi làm sao đưa tất cả tin ghim ra ngoài trang chủ XF2 bởi muabandalat,
Addon Donations by Siropu 1.5.1 bởi redbull,
cấu trúc Diễn đàn -Trường "comment" bị thiếu googleconsole bởi muabandalat,
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
 
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
 
@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:
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
 
6,110 13 5
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Chủ đề tương tự

PVS
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
Trả lời
0
Lượt xem
1K
PVS
PVS
PVS
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
Trả lời
0
Lượt xem
1K
PVS
PVS
kamchatka
Thêm một chuyển khung thành viên nằm ngang đẹp
Trả lời
1
Lượt xem
2K
THB
THB
L
Other 2x Hỏi về thêm icon sau node list
Trả lời
1
Lượt xem
1K
dangvanbac
dangvanbac
bloghocpiano
Other 2x Hỏi cách thêm footer vào theme
Trả lời
10
Lượt xem
2K
bloghocpiano
bloghocpiano

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
silzedt_1207          Inbox   PVS

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

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

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
Back
Top