Tạo Footer 6 cột đẹp và đơn giản

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
Hướng dẫn các bạn cách tạo Footer đẹp với 6 cột :
DEMO
12063817_555539907935203_7140563786153748770_n.jpg

Đầu tiên, thay toàn bộ template Footer bằng đoạn code:
PHP: 
<xen:edithint template="footer.css" />

<xen:hook name="footer">
<div class="footer">
    <div class="pageWidth">
        <div class="pageContent">
        <div class="footerBlock footerBlock1">
                <h3><a href="#" title="block title">Block Title</a></h3>
            <ul>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
            </ul>
        </div>

     

        <div class="footerBlock footerBlock2">
                <h3><a href="#" title="block title">Block Title</a></h3>
            <ul>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
            </ul>
        </div>

     
        <div class="footerBlock footerBlock3">
                <h3><a href="#" title="block title">Block Title</a></h3>
            <ul>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
            </ul>
        </div>
 

        <div class="footerBlock footerBlock4">
                <h3><a href="#" title="block title">Block Title</a></h3>
            <ul>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
            </ul>
        </div>

        <div class="footerBlock footerBlock5">
                    <h3><a href="#" title="block title">Block Title</a></h3>
            <ul>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
            </ul>
        </div>

        <div class="footerBlock footerBlock6">
                <h3><a href="#" title="block title">Block Title</a></h3>
            <ul>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
                <li><a href="#" title="Your Link Here">Your Link Here</a></li>
            </ul>
        </div>

        <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}</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">{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>
            </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>
Sau đó, thay tiếp toàn bộ code trong template Footer.css:
PHP: 
.footer .pageContent
{
    @property "footer";
    font-size: 12px;
    color: @primaryLighter;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    zoom: 1;
    /*background-color: @primaryMedium;*/
    @property "/footer";
}
 
    .footer a,
    .footer a:visited
    {
        @property "footerLink";
        color: @primaryLighter;
        padding: 5px;
        display: block;
        @property "/footerLink";
    }
 
        .footer a:hover,
        .footer a:active
        {
            @property "footerLinkHover";
            color: @primaryLighterStill;
            @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: 15px 5px;
    text-align: center;
}
 
    #copyright
    {
        color: @contentBackground;
        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>
Thêm vào template Extra.css đoạn code:
PHP: 
/* Extra Footer */
.footer
{
    background: @primaryMedium;
}
.footer .pageContent
{
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}
.footer a:hover
{
    text-decoration: none;
}
.footerBlock
{
    width: 15%;
    float: left;
    box-sizing: border-box;
    margin-left: 2%;
    margin-bottom: 15px;
}
.footerBlock h3 a
{
    font-weight: bold;
    font-size: 12pt;
    color: rgb(207, 207, 207);
}
.footerBlock ul li a
{
    font-size: 10pt;
    color: @contentBackground;
}

.footerBlock1
{
    margin-left: 0;
}

.footerLegal
{
    background: @primaryMedium;
}
.footerLegal a,
.footerLegal
{
    color: @contentBackground!important;
}
.footerLegal #legal li  a
{
    margin-left: 10px;
}
.footerLinks a.globalFeed
{
    margin: 0;
}
.footerLegal .pageContent
{
    padding: 15px 0;
}


<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
    {
        margin-top: 5px;
    }
    .Responsive .footerBlock
    {
        width: 32%;
    }
    .Responsive .footerBlock1,
    .Responsive .footerBlock4
    {
        margin-left: 0;
    }
}
@media (max-width:@maxResponsiveMediumWidth)
{
 
    .Responsive .footerBlock
    {
        width: 49%;
        margin-left: 0;
    }
    .Responsive .footerBlock2,
    .Responsive .footerBlock4,
    .Responsive .footerBlock6
    {
        margin-left: 2%;
    }
}
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive #legal li
    {
        display: inline-block;
        float: none;
        vertical-align: middle;
    }
    .Responsive .footerBlock
    {
        width:100%;
        margin-left: 0;
        float: none;
        text-align: center;
    }
}
</xen:if>
Lưu lại và tận hưởng thành quả nhé.
Chúc thành công.
 
Bài viết liên quan
Mong các AE giúp đỡ em tạo Custom thread fields bởi nguyendinhnham,
Hỏi cách thêm footer vào theme bởi bloghocpiano,
Dark/Light Mode Automatic Toggle Switch/jsdmat - Tự động chuyển đổi chế độ tối/sáng/jsdmat XenForo 2 0.4.0 bởi PVS,
Make collapsible sub-forums of a forum with no parent in forum list - Tạo sub-forum thu gọn của diễn đàn không có parent trong forum list XenForo 2 bởi PVS,
Adding Social Media Icons to the Headar Section - Thêm các biểu tượng Social vào Header XenForo 2 bởi PVS,
Lỗi tiêu đề bài viết tự động viết hoa bởi qbtcnc,
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,
2,353 0 3
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Chủ đề tương tự

NDK
Hướng dẫn Tạo thống kê Xenforo ở Footer với phong cách màu mè xì teen
Trả lời
3
Lượt xem
10K
dcstylexf
dcstylexf
N
Help Mong các AE giúp đỡ em tạo Custom thread fields
Trả lời
9
Lượt xem
1K
sanhpv
S
PVS
Other 2x Make collapsible sub-forums of a forum with no parent in forum list - Tạo sub-forum thu gọn của diễn đàn không có parent trong forum list XenForo 2
Trả lời
0
Lượt xem
2K
PVS
PVS
snacker12
Other Xin cách tạo responsive cho xenporta cho code sau
Trả lời
0
Lượt xem
1K
snacker12
snacker12
Pajee
Other Vấn đề tạo table
Trả lời
2
Lượt xem
1K
dcstylexf
dcstylexf

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