Tạo Footer giống Việt Designer

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
13,593
Được Like
9,608
Tạo Footer giống Việt Designer

Demo:

demo.PNG

Đầ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​
 

Đính kèm

  • images.zip
    65.5 KB · Lượt xem: 37
  • Like
Reactions: THB

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,350
Được Like
3,934
Cái này thì mang tính tương đối. Để hỏi @PVS xem lại.
 

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

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom