Tạo Footer giống Việt Designer

PVS · 17/09/2015

Tạo Footer giống Việt Designer

Demo:

Đầu tiên vào thay toàn bộ template footer bằng code sau:

Mã:

<xen:edithint template="footer.css" />
<xen:hook name="footer">
<div class="footer">
    <div class="pageWidth">
        <div class="pageContent">




<div id="advancefooter">
    <div id="footerleftarea" style="text-align:center">
            <img src="images/designer.png" alt="Merry Christmas" title="Chúc bạn có một mùa giáng sinh an lành hạnh phúc bên người thân nhé!" class="flogo">
<div class="socialiconarea">

    <div class="fsocialicon">
        <a href="https://www.facebook.com/" target="_blank"><img src="images/facebook.png" title="Facebook"></a>
    </div>


    <div class="fsocialicon">
        <a href="http://twitter.com/" target="_blank"><img src="images/twitter.png" title="Twitter"></a>
    </div>


    <div class="fsocialicon">
        <a href="#" target="_blank"><img src="images/youtube.png" title="Youtube"></a>
    </div>
 
    <div class="fsocialicon">
        <a href="#" target="_blank"><img src="images/pinterest.png" title="Pinterest"></a>
    </div>

    <div class="fsocialicon">
        <a href="forums/-/index.rss" rel="alternate" class="globalFeed" target="_blank" title="RSS feed"><img src="images/rss.png"></a>
    </div>


    <div class="fsocialicon">
        <a href="misc/contact" class="OverlayTrigger" data-overlayoptions="{&quot;fixed&quot;:false}"><img src="images/email.png" title="Email"></a>
    </div>

</div>
         
            <div id="copyright">
                <p><a href="#">© All Rights Reservered</a></p>
                <p class="concealed">Vui lòng trích nguồn khi chia sẻ lại bài viết từ diễn đàn.</p>
            </div>
    </div>
 
    <p class="expandFooter">Expand Footer</p>
 
    <div id="footerlists">
        <div class="secondaryContent footercol">
        <h3>Dự án con</h3>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
    </div>
        <div class="secondaryContent footercol">
        <h3>Box tiêu biểu</h3>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
    </div>
    <div class="secondaryContent footercol">
                <h3>Giải trí</h3>
                <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                </ul>
</div>

    </div> 
</div>


            <dl class="choosers">
             
                    <dt>Giao diện</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>
             
             
                    <dt>Ngôn ngữ</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>
             
            </dl>
         
         
            <ul class="footerLinks">
         
             
                    <li><a href="misc/contact" class="OverlayTrigger" data-overlayoptions="{&quot;fixed&quot;:false}">Liên hệ</a></li>
             
                <li><a href="help/">Giúp đỡ</a></li>
                <li><a href="#" class="homeLink">Trang chủ</a></li>
                <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">Trở lên đầu</a></li>
                <li><a href="/forums/-/index.rss" rel="alternate" class="globalFeed" target="_blank" title="RSS feed for Diễn đàn">RSS</a></li>
         
            </ul>
         
            <span class="helper"></span>
        </div>
    </div>
</div>

<div class="footerLegal">
    <div class="pageWidth">
        <div class="pageContent">
            <ul id="legal">
         
                <li><a href="help/terms">Điều khoản và Quy định</a></li>
             
         
            </ul>

         
            <span class="helper"></span>
        </div>
    </div> 
</div>
</xen:hook>

Sau đó thay toàn bộ template footer.css bằng code sau:

Mã:

@charset "UTF-8";
.footer {background-color:rgb(179, 179, 179);}
.footer .pageWidth {
  padding-right: 5px;
  padding-left: 5px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  max-width: 1093px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.footer
.pageContent{font-size:11px;color:#a5cae4;background-color:#176093!important;border-radius:0!important;overflow:hidden;zoom:1}.footer a,
.footer a:visited{color:#a5cae4;padding:5px;display:block}.footer a:hover,
.footer a:active{color:#d7edfc}.footer
.choosers{padding-left:5px;float:left;overflow:hidden;zoom:1}.footer .choosers
dt{display:none}.footer .choosers
dd{float:left}.footerLinks{padding-right:5px;float:right;overflow:hidden;zoom:1}.footerLinks
li{float:left}.footerLinks
a.globalFeed{width:14px;height:14px;display:block;text-indent: -9999px;white-space:nowrap;background:url('styles/default/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;padding:0;margin:5px}.footerLegal
.pageContent{font-size:11px;overflow:hidden;zoom:1;padding:5px
5px 15px;text-align:center}#copyright{color:rgb(100,100,100);float:left}#legal{float:right}#legal
li{float:left;margin-left:10px}
#advancefooter{font-size:12px;color:rgb(203,203,203);background-color:rgb(36,36,36);text-align:left;overflow:hidden;width:100%}#footerleftarea{float:left;width:280px}#footerleftarea
a{color:rgb(203,203,203)}#footerlogoarea{margin-top:20px;margin-left:12px;width:283px}#footerlogoarea
p{font-size:1.7em;font-family:Helvetica,arial,sans;color:#FFF;letter-spacing: -0.8px;line-height:25px;text-align:center}#footerlists{margin-right:10px;float:right;max-width:715px}.footercol{padding-left:30px;margin-top:0;margin-bottom:0;border-width:0px;float:left;background:url("styles/core/xenforo/images/flistsep.png") repeat-y scroll left top transparent;width:195px}.footercol
h3{font-weight:bold;font-size:13px;color:rgb(240,240,240);padding:4px
8px;margin-bottom:3px;line-height:25px;background-color:#90001b}#footerlists
ul{}#footerlists ul
li{color:rgb(137, 136, 129);background-color:rgb(41, 41, 41);padding:8px
2px;margin-bottom:4px;list-style-type:disc}#footerlists ul li:hover{background-color:transparent;list-style-image:url('styles/core/xenforo/sources/red/flisthover.png') !important;list-style-type:circle}#footerlists ul li
a{font-size:1em;color:#B9B9B9;text-decoration:none;padding-left:10px;display:block;line-height:10px;width:auto}#footerlists ul li a:hover{font-size:1em;color:#B9B9B9;text-decoration:none;padding-left:10px;display:block;line-height:10px;width:auto}#copyright{text-align:center;margin-left:2px}.fsocialicon{display:inline-block}.fsocialicon
img{opacity:0.4;filter:alpha(opacity=40)}.fsocialicon img:hover{opacity:1.0;-moz-transition:all 0.4s ease-in-out 0s;-o-transition:all 0.4s ease-in-out 0s;-webkit-transition:all 0.4s ease-in-out 0s}#footerleftarea
.flogo{padding:10px
10px 10px 11px;width:275px}.socialiconarea{text-align:center;height:60px;line-height:64px;margin-left:8px}p.expandFooter{color:rgb(208, 208, 208);background-color:rgb(106, 106, 106);padding:5px
10px;margin:15px
auto 0;border-top-color:rgb(57,;border-right-color:57,;border-bottom-color:57);border-left-color:57,;display:none;text-align:center;cursor:pointer;width:200px}@media (max-width:610px){#footerlists{display:none}p.expandFooter{display:block}#advancefooter{text-align:center}#advancefooter
.section{float:none;margin:10px
auto}#footerleftarea{float:none;width:auto}#footerleftarea
.flogo{}.footercol{float:none;margin:0
auto}}@media (max-width:480px){#footerlists{display:none}p.expandFooter{display:block}#advancefooter{}#advancefooter
.section{float:none;margin:10px
auto}#footerleftarea{float:none;width:auto}#footerleftarea
.flogo{}.footercol{float:none;margin:0
auto}}
/* CSS returned from cache. */

Cuối cùng, download file đính kèm và giải nén ra, sau đó upload lên host ngang với thư mục cài đặt Xenforo của bạn.

Chúc các bạn thành công.

Nguồn: mamcongnghe.com

dcstylexf · 04/01/2016

nguồn em share mà bác?

THB · 04/01/2016

Cái này thì mang tính tương đối. Để hỏi @PVS xem lại.

PVS · 04/01/2016

datdaik000 nói:
nguồn em share mà bác?

sr, quen tay

)

dcstylexf · 05/01/2016

THB nói:
Cái này thì mang tính tương đối. Để hỏi @PVS xem lại.

PVS nói:
sr, quen tay )

em thấy lạ nên hỏi thôi ko có j đâu

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
	Help Xin Hướng dẫn tạo bbcode download button xenforo ạ	Other Resources	4	14/09/2021
L	Other Giúp tạo Footer cho diễn đàn Xenforo v2.1.0	Other Resources	2	02/10/2019
	Other 2x Tạo Ứng dụng cho xenforo 2	Other Resources	3	16/02/2019
	Other xin hướng dẫn cách tạo vị trí và mã quảng cáo	Other Resources	6	11/02/2019
T	Help Tạo thêm group Cho Xenforo	Other Resources	0	15/05/2018

Tạo Footer giống Việt Designer

PVS

Super Moderator

Đính kèm

dcstylexf

Major

THB

Founder

PVS

Super Moderator

dcstylexf

Major

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