Other Share footer FIFAVN.ORG Full Responsive

hardcore

hardcore

Sergeant
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Xin phép bác @Cyentruk em share footer của site bác :D. Hôm nay, em xin share cho mọi người footer của site FiFaVN.ORG của bác @Cyentruk.
Demo : FiFaVN.ORG
Vào vấn đề luôn. Đầu tiên các bạn thay toàn bộ template footer bằng toàn bộ code sau đây :
HTML: 
<xen:edithint template="footer.css" />

<xen:hook name="footer">

<div class="footer">
<div class="pageContent">
<span class="fifavn-footer-arrow"></span>
<div class="fifavn-footer">
<p class="slogan">WE ARE FIFAVN!</p>
<p class="description">"Vietnamese FIFA Community - Sweet home of FIFA fan in Vietnam"</p>
<div class="box">
<h2 class="title">FIFAVN</h2>
<div class="content">
<li><a href="http://fifavn.org/forum/articles/">Home</a></li>
<li><a href="">Forum</a></li>
<li><a href="http://fifavn.org/forum/resources/">Resources</a></li>
<li><a href="http://fifavn.org/forum/media/">Media</a></li>
</div>
</div>
<div class="box">
<h2 class="title">Official Links</h2>
<div class="content">
<li><a href="http://www.easports.com/uk/fifa" target="_blank">EA Sports FIFA</a></li>
<li><a href="https://www.easports.com/fifa/pro-clubs" target="_blank">Pro Clubs</a></li>
<li><a href="https://www.easports.com/fifa/ultimate-team/web-app" target="_blank">FUT Web App</a></li>
<li><a href="http://help.ea.com/en/" target="_blank">EA Help</a></li>
</div>
</div>
<div class="box">
<h2 class="title">Follow Us</h2>
<div class="content">
<li><a href="https://www.facebook.com/fifavnorg" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/fifavn" target="_blank">Twitter</a></li>
<li><a href="https://plus.google.com/101966557404186061596/posts" target="_blank">Google Plus</a></li>
<li><a href="http://www.youtube.com/fifavntv" target="_blank">Youtube</a></li>
</div>
</div>
</div>
<div class="footerLegal">
<div class="fifavn-footer-inner">

<xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
<dl class="choosers">
<xen:if is="{$canChangeStyle}">
<dt>{xen:phrase style}</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>
</xen:if>
<xen:if is="{$canChangeLanguage}">
<dt>{xen:phrase language}</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>
</xen:if>
</dl>
</xen:if>

<div id="copyright">{xen:helper copyright} {xen:phrase extra_copyright}</div>
<ul class="footerLinks">
<xen:hook name="footer_links">
<xen:if is="{$xenOptions.contactUrl.type} === 'default'">
<li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
<xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
<li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
</xen:if>
<li><a href="{xen:link help}">{xen:phrase help}</a></li>
<xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
<li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
<li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
</xen:hook>
</ul>
<span class="helper"></span>
</div>
</div>
</div>
</div>
</xen:hook>
Thay toàn bộ template footer.css bằng code sau đây :
Mã: 
.footer {
margin: 0 auto;
background: rgb(33, 33, 33);
border-top: 10px solid rgb(7, 91, 127)
}

.footer .pageContent {
background: none!important;
font-size: 1em;
padding: 10px 0
}

.fifavn-footer-arrow {
border-color: rgb(250, 250, 250) transparent transparent;
border-style: solid;
border-width: 30px 30px 0;
display: block;
height: 0;
left: 0;
right: 0;
margin: -20px auto;
position: absolute;
width: 0
}

.fifavn-footer {
margin: 0 auto;
max-width: 1202px
}

.fifavn-footer .box {
float: left;
margin: 0 0 15px;
padding: 4%;
width: 25%
}

.fifavn-footer .slogan {
color: rgb(255, 255, 255);
font-size: 3em;
font-weight: 700;
margin-top: 50px;
text-align: center
}

.fifavn-footer .description {
color: #aaa;
font-size: 1.15em;
margin-top: 20px;
text-align: center
}

.fifavn-footer .title {
color: rgb(7, 91, 127);
font-size: 1.3em;
font-weight: 700;
margin-bottom: 20px
}

.fifavn-footer li {
border-top: 1px dotted rgb(128, 128, 128);
list-style-type: none;
margin: 15px 0 0;
padding: 15px 0 0
}

.fifavn-footer a {
color: #aaa !important;
padding: 0
}

.fifavn-footer-inner {
margin: 0 auto;
padding: 10px 0;
width: 1002px
}

.footer .footerLegal {
border-top: 1px solid rgb(128, 128, 128);
clear: both
}

.footerLegal .pageContent {
padding: 0
}

.footer a:hover {
color: rgb(7, 91, 127)!important
}
.footer .pageContent {
font-size: 11px;
color: rgb(128, 128, 128);
background-color: rgb(7, 91, 127);
overflow: hidden;
zoom: 1
}

.footer a,
.footer a:visited {
color: rgb(128, 128, 128);
padding: 5px;
display: block
}

.footer a:hover,
.footer a:active {
color: rgb(214, 214, 214)
}

.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 {
display: none
}

#legal {
float: right
}

#legal li {
float: left;
margin-left: 10px
}

@media (max-width:610px) {
.Responsive .footerLinks a.globalFeed,
.Responsive .footerLinks a.topLink,
.Responsive .footerLinks a.homeLink {
display: none
}
.Responsive .footerLegal .debugInfo {
clear: both
}
}

@media (max-width:480px) {
.Responsive #copyright span {
display: none
}
.Responsive .fifavn-footer .box {
width: 92%
}
}
Do là code mình rip nên có thể còn có lỗi.
Mong các bạn giúp mình hoàn thiện code nếu có thể !​
 
Sửa lần cuối:
Bài viết liên quan
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Hỏi cách thêm footer vào theme bởi bloghocpiano,
Xin cách tạo responsive cho xenporta cho code sau bởi snacker12,
Xóa dòng bản quyền ở footer bởi boynetbom,
Chuyển nút share từ dưới lên cuối bài viết đầu tiên của topic bởi sukoro,
Thêm Footer cho Xenforo 2.0.1 với Style Royal bởi minhmin,
Bài viết mới
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Lỗi Nội dung không mong muốn bởi muabandalat,
Cho em xin code chèn comment facebook bởi quang9292,
Socials & Languages PREFIXES - Tiền tố mạng xã hội & ngôn ngữ cho XenForo 2.3 bởi PVS,
Bị lỗi ErrorException: Template error: [E_USER_WARNING] Cannot call method first on a non-object (NULL) src/XF/Template/Templater.php:1177 bởi bloghocpiano,
FA Icon for Public Navigation - Biểu tượng FA cho Public Navigation XenForo 2.3 bởi PVS,
Hay!!! Mai mình rảnh sẽ chia sẻ với ae 1 vài tip trong lúc mình làm cái footer này.

Tip sẽ nói về việc sử dụng phrase thay cho 1 cụm từ cố định để nó có thể chuyển đổi theo ngôn ngữ mà người dùng lựa chọn sử dụng trên diễn đàn. Về cách sử dụng color template để khi chuyển màu tổng thể forum chỉ với 1 vài click chuột mà ko phải sửa lại các custom template. Và về cách làm responsive nữa. Mình biết gì chia sẻ nấy nha. :v
 
Cyentruk nói:
Hay!!! Mai mình rảnh sẽ chia sẻ với ae 1 vài tip trong lúc mình làm cái footer này.

Tip sẽ nói về việc sử dụng phrase thay cho 1 cụm từ cố định để nó có thể chuyển đổi theo ngôn ngữ mà người dùng lựa chọn sử dụng trên diễn đàn. Về cách sử dụng color template để khi chuyển màu tổng thể forum chỉ với 1 vài click chuột mà ko phải sửa lại các custom template. Và về cách làm responsive nữa. Mình biết gì chia sẻ nấy nha. :v
Nhấn để mở rộng...
ngon ạ :3
 
3,425 10 3
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS

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

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Xử lý sự cố (Troubleshooting)

Texlink

Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Cộng đồng AI Việt Nam
Khám phá AI cùng người Việt
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top