Responsive design đang là xu hướng thiết kế web hiện nay. Một trang web thân thiện phải hiển thị tốt trên mọi thiết bị, và websiteXenforo cũng không là ngoại lệ. Mình xin chia sẻ với các bạn cách tạo footer đẹp responsive cho diễn đàn Xenforo.
Một số hình ảnh:
Footer tự động co giãn để phù hợp với mọi kích cỡ màn hình...
Cách thực hiện:
Thay toàn bộ template footer bằng code sau:
Thay toàn bộ template footer.css bằng code sau:
Thế là xong! Chúc các bạn thành công!
Một số hình ảnh:
Cách thực hiện:
Thay toàn bộ template footer bằng code sau:
Mã:
<xen:edithint template="footer.css" />
<xen:hook name="footer">
<div class="footerQuickLinks">
<div class="pageWidth">
<div class="pageContent">
<div class="box-left">
<h3>Xenforo</h3>
<ul>
<li><a href="http://kyniem.org/dien-dan/code-xenforo.35.html">Code Xenforo</a></li>
<li><a href="http://kyniem.org/dien-dan/style-xenforo.34.html">Style Xenforo</a></li>
<li><a href="http://kyniem.org/dien-dan/addon-xenforo.37.html">Addon XenForo</a></li>
</ul>
</div>
<div class="box-middle">
<h3>Webmaster</h3>
<ul>
<li><a href="http://kyniem.org/dien-dan/wordpress.19.html">Wordpress</a></li>
<li><a href="http://kyniem.org/dien-dan/php-scripts.30.html">PHP Scripts</a></li>
<li><a href="http://kyniem.org/dien-dan/code-html-css-js.36.html">HTML/CSS/JS</a></li>
</ul>
</div>
<div class="box-middle">
<h3>Membership</h3>
<ul>
<li><a href="" >Updating</a></li>
<li><a href="" >Updating</a></li>
<li><a href="" >Updating</a></li>
</ul>
</div>
<div class="box-middle">
<h3>Thư giản</h3>
<ul>
<li><a href="http://kyniem.org/dien-dan/clip-nong.33.html">Clip nóng</a></li>
<li><a href="">Updating</a></li>
<li><a href="">Updating</a></li>
</ul>
</div>
<div class="box-middle">
<h3>Liên kết</h3>
<ul>
<li><a href="http://www.dmca.com/Protection/Status.aspx?ID=9c86fdab-d4a2-4a17-8ef7-19233fcf2790" target="_blank">DMCA</a></li>
<li><a href="">Updating</a></li>
<li><a href="">Updating</a></li>
</ul>
</div>
<div class="box-right">
<h3>Quick Links</h3>
<ul>
<xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
<dl class="choosers">
<xen:if is="{$canChangeStyle}">
<li><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger" 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" title="{$visitorLanguage.title}" rel="nofollow">Language</a></li>
</xen:if>
</dl>
</xen:if>
<li><a href="misc/contact" class="OverlayTrigger" data-overlayoptions="{"fixed":false}">Contact Us</a></li>
<li><a href="{xen:link forums/-/index.rss}" rel="alternate" target="_blank" title="RSS feed">RSS feed</a></li>
</ul>
</div>
</div>
</div>
<div class="clearBoth"> </div>
</div>
</xen:hook>Thay toàn bộ template footer.css bằng code sau:
Mã:
.footerQuickLinks {
background: url('styles/VanNgoc/img/bg-div.png') repeat scroll 0% 0% #494949;
padding-bottom: 20px;
min-width: 100%;
}
.footerQuickLinks h3 {
color: #888888;
font-size: 18px;
font-weight: normal;
line-height: 21px;
margin-bottom: 20px;
}
.footerQuickLinks .pageContent .box-left
{
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
float: left;
width: 16.5%;
padding-right: 20px;
text-align: left;
}
.footerQuickLinks .pageContent .box-middle
{
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
float: left;
width: 16.5%;
padding-right: 20px;
padding-left: 20px;
text-align: left;
}
.footerQuickLinks .pageContent .box-right
{
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
float: left;
width: 16.5%;
padding-left: 20px;
text-align: left;
}
.footerQuickLinks ul
{
list-style: none outside none;
margin: 0;
padding: 0;
}
.footerQuickLinks li
{
line-height: 26px;
list-style-type: none;
list-style-position: outside;
}
.footerQuickLinks li:first-child
{
border-top: none;
}
.footerQuickLinks .pageContent
{
font-size: 12px;
color: #A6A6A6;
padding-top: 30px;
overflow: hidden;
zoom: 1;
text-align: center;
}
.footerQuickLinks a, .footerQuickLinks a:visited
{
-moz-transition: color 0.2s linear 0s;
-o-transition: color 0.2s linear 0s;
-webkit-transition: color 0.2s linear 0s;
transition: color 0.2s linear 0s;
color: #A6A6A6;
display: block;
text-decoration: none;
}
.footerQuickLinks a:hover, .footerQuickLinks a:focus, .footerQuickLinks a:active
{
-moz-transition: color 0.2s linear 0s;
-o-transition: color 0.2s linear 0s;
-webkit-transition: color 0.2s linear 0s;
transition: color 0.2s linear 0s;
color: #690;
text-decoration: none;
}
.clearBoth
{
clear: both;
}
<xen:if is="@enableResponsive">
@media (max-width: 860px)
{
.Responsive .footerQuickLinks .pageContent .box-middle
{
display: none;
}
.Responsive .footerQuickLinks .pageContent .box-left
{
width: 45%;
float: left;
text-align: left;
padding-left: 28px;
}
.Responsive .footerQuickLinks .pageContent .box-right
{
width: 45%;
float: left;
text-align: right;
}
}
@media (max-width:@maxResponsiveMediumWidth)
{
.socialicons
{
float: left;
margin-left: 35%;
}
.footerLegal .debugInfo
{
clear: both;
}
#copyright
{
display: none;
}
}
@media (max-width:@maxResponsiveNarrowWidth)
{
.footerLinks
{
display: none;
}
}
</xen:if>Thế là xong! Chúc các bạn thành công!
Nguồn: kyniem.org
Bài viết liên quan
Bài viết mới
