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

2,347 0 3
NDK

NDK

MasterSergeant
Tham gia
16/03/2015
Bài viết
829
Được Like
742
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,
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
N Help Mong các AE giúp đỡ em tạo Custom thread fields Template Modifications 9
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 Template Modifications 0
snacker12 Other Xin cách tạo responsive cho xenporta cho code sau Template Modifications 0
Pajee Other Vấn đề tạo table Template Modifications 2
NDK Hướng dẫn Tạo thống kê Xenforo ở Footer với phong cách màu mè xì teen Template Modifications 3

Chủ đề tương tự


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

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
Inbox PVS

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