Tạo Footer giống Việt Designer

PVS

Generalissimo
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,961
Được Like
12,451
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

Legend
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,646
Được Like
3,935
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom