- Tham gia
- 28/02/2015
- Bài viết
- 15,961
- Được Like
- 12,451
Tạo Footer giống Việt Designer
Demo:
Đầu tiên vào thay toàn bộ template footer bằng code sau:
Sau đó thay toàn bộ template footer.css bằng code sau:
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.
Demo:
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="{"fixed":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="{"fixed":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
)
