Other Share footer FIFAVN.ORG Full Responsive

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
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:

Cyentruk

Gefreiter
Tham gia
27/11/2015
Bài viết
70
Được Like
102
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
 

dcstylexf

Major
Tham gia
24/03/2015
Bài viết
2,006
Được Like
1,615
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
ngon ạ :3
 

Win

MasterCorporal
Tham gia
15/02/2016
Bài viết
378
Được Like
171
Hi ....

please help this error? line NO. 44 sytex error ?

thks
 

Đính kèm

  • syn.JPG
    syn.JPG
    36.1 KB · Lượt xem: 21
  • syn.JPG
    syn.JPG
    36.1 KB · Lượt xem: 15
  • syn.JPG
    syn.JPG
    36.1 KB · Lượt xem: 16

namhbnam

MasterCorporal
Tham gia
23/03/2016
Bài viết
322
Được Like
162
hix giờ mới được về nhà, bác lúc nào onl pm lại e nhé :((
 
  • Like
Reactions: THB

namhbnam

MasterCorporal
Tham gia
23/03/2016
Bài viết
322
Được Like
162
e đã gửi team rồi đó, a check ib
 
  • Like
Reactions: THB

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
Code mình mới cập nhật lại mọi người check giúp mình nhé :D
 

Top Bottom