Other Cách làm Footer giống VJL.VN (VXF.VN) đầy đủ Responsive

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,833
Được Like
12,691
Cách làm Footer giống VJL.VN (VXF.VN) đầy đủ Responsive

Bài viết sẽ hướng dẫn các bạn cách làm footer giống của VXF.

footervxf.png

Cách làm như sau:

Đầu tiên, bạn thay toàn bộ template footer bằng đoạn code sau:
Mã:
<xen:edithint template="footer.css" />

<xen:hook name="footer">
  <div class="footer">
    <div class="pageWidth">
      <div class="pageContent">
        <div id="footer" class="footercolumns">
          <div class="blockFooter footer-top-left">
            <div class="boxInner">
              <div class="block-top"><img class="footerLogo" alt="VJL Logo" width="170" height="35" src="http://vjl.vn/styles/vjl/xenforo/footer_logo.png"></div>
              <div class="block-bottom">
                <p>Cộng đồng Joomla Việt Nam được thành lập với mục đích giao lưu, học hỏi, chia sẻ và thảo luận về mọi vấn đề liên quan đến mã nguồn Joomla. </p>
                <p>Chúng tôi sẽ không chịu trách nhiệm với các thông tin do thành viên đưa lên trừ thông tin nội bộ.
                </p>
                <p>Website đang hoạt động thử nghiệm, chờ giấy phép </p>
              </div>
            </div>
          </div>
          <div class="blockFooter fotter-contact">
            <div class="boxInner">
              <h3>Text Links</h3>
              <div class="boxContent">
                <ul class="itemsList hasIcon">
                  <li><a href="http://hkda.vn" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>HKDA Việt Nam</a></li>
                  <li><a href="http://vnwho.com" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Domain Whois Lookup Instantly</a></li>
                  <li><a href="http://mailexpress.vn" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Email Marketing</a></li>
                  <li><a href="http://cer.vn" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Chứng chỉ SSL</a></li>
                  <li><a href="http://nhattao.biz" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Nhật Tảo</a></li>
                  <li><a href="http://emailtenmienrieng.com" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Email tên miền riêng</a></li>
                  <li><a href="http://dvddohoa.com" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>DVD Đồ họa</a></li>
                </ul>
              </div>
            </div>

          </div>
          <div class="blockFooter three columns column">
            <div class="boxInner">
              <h3>Thông tin</h3>

              <div class="boxContent">
                <ul class="itemsList hasIcon">
                  <li><a href="http://chiasetailieu.vn" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Tài liệu, Luận văn miễn phí</a></li>
                  <li><a href="http://chankinh.com/" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Doc truyen Online</a></li>
                  <li><a href="http://mga.vn" target="_blank" title="Email Google Apps"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Email Google Apps</a></li>
                  <li><a href="http://tangalexa.com" target="_blank"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Tang Rank Alexa</a></li>
                  <li><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i> <a href="http://bongdaeu.com/" title="keo bong da" target="_blank">Keo bong da</a></li>
                  <li><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i><a href="https://himasign.com/" title="Email" signature="" generator "=" " target="_blank "> Email Signature Generator</a></li>          
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="blockFooter four columns column ">
                    <div class="boxInner ">
                        <h3>From our blog</h3>
                      
                        <div class="boxContent ">
                            <ul class="itemsList ">
                                <li><span class="green ">W4U</span><a href="/ ">Lorem ipsum dolor sit amet</a></li>
                                <li><span class="blue ">VXF</span><a href="/ ">Consectetuer adipiscing elit</a></li>
                                <li><span class="yellow ">VJL</span><a href="/ ">Sed diam nonummy nibh euismod</a></li>
                                <li><span class="skyblue ">VOP</span><a href="/ ">Tincidunt ut laoreet dolore magna</a></li>
                                <li><span class="orange ">MAG</span><a href="/ ">Aliquam erat volutpat</a></li>
                                <li><span class="skyblue ">VWP</span><a href="/ ">Ut wisi enim ad minim veniam</a></li>
                                <li><span class="green ">W4U</span><a href="/ ">Aliquip ex ea commodo consequat</a></li>                          
                              
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footerLegal">
  <div class="pageWidth">
    <div class="pageContent">
    <div id="copyright">{xen:helper copyright} {xen:phrase extra_copyright}</div>
            <xen:hook name="footer_after_copyright" />
      
            <xen:if is="{$debugMode}">
                <xen:if hascontent="true">
                    <dl class="pairsInline debugInfo" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
                    <xen:contentcheck>
                        <xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}" rel="nofollow">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                        <xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                        <xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
                    </xen:contentcheck>
                    </dl>
                </xen:if>
            </xen:if>    
      <ul id="legal">
    <xen:if is="{$canChangeLanguage}">
        <li class="choosers">
        <xen:if is="{$canChangeLanguage}">
            <a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a>      
        </xen:if>  
        </li>
    </xen:if>  
        <li class="choosers">
        </li>
        <xen:hook name="footer_links_legal">
                <xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
        </xen:hook>      
        <li><a href="{$requestPaths.requestUri}#navigation" id="toTop" style="display: inline;">{xen:phrase go_to_top}</a></li>
      </ul>
      <span class="helper"></span>
    </div>
  </div>
</div>
</xen:hook>

Tiếp theo, bạn thay toàn bộ template footer.css bằng đoạn code sau:
Mã:
footer {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: rgb(79, 92, 119)
}

#footer .footerLogo {
  width: auto;
  height: auto;
  max-width: 100%
}

#footer .boxContent ul.itemsList.hasIcon li a .fa-lg {
  margin-right: 5px
}

.footer .blockFooter {
  float: left;
  width: 25%
}

@media (max-width:976px) {
  .Responsive .footer .pageContent {
    margin-left: 5px;
    margin-right: 5px
  }
}

@media (max-width:800px) {
  .Responsive .footer .blockFooter {
    width: 50%;
    margin-bottom: 10px
  }
  .Responsive .footer .three.columns.column {
    clear: both
  }
  .Responsive .footer .pageContent {
    padding: 20px 0
  }
  .Responsive .footerLegal .pageContent {
    padding: 15px 5px
  }
}

@media (max-width:610px) {
  .Responsive .footer .boxInner {
    padding-left: 5px;
    padding-right: 5px
  }
}

@media (max-width:480px) {
  .Responsive .footer .blockFooter {
    width: 100%;
    margin-bottom: 10px
  }
}

@media(max-width:320px) {
  .Responsive .footer .blockFooter.footer-top-left {
    text-align: justify
  }
  .Responsive .footer .blockFooter.fotter-contact,
  .Responsive .footer .blockFooter.three {
    text-align: center
  }
  .Responsive .footer .blockFooter.fotter-contact a,
  .Responsive .footer .blockFooter.three a {
    width: 100%;
    display: block
  }
  .Responsive .footer .blockFooter.fotter-contact a .fa,
  .Responsive .footer .blockFooter.three a .fa {
    float: left
  }
}
#footer {
  clear: both;
  min-height: 100px;
  padding: 20px 0 25px
}

.footer {
  background: #090c15;
  clear: both
}

.footercolumns {
  display: inline;
  margin-left: 0;
  margin-right: 0
}

.footer-top-left .block-top {
  margin-bottom: 10px
}

.footer-top-left .block-bottom {
  float: left;
  margin-right: 15px;
  padding-bottom: 5px;
  margin-bottom: 5px
}

.footer-top-left .block-bottom span {
  color: #fff;
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 5px
}

.footer-top-left .block-bottom p {
  margin-bottom: 0px;
  padding: 5px 0;
  font-size: 13px;
  text-align: justify
}

.footer-top-left .connect-face {
  clear: both
}

.footer-top-left .connect-face p {
  font-size: 14px;
  color: #95a1bc;
  text-transform: uppercase;
  font-weight: 400;
  font-style: normal;
  float: left
}

.connect-face ul li {
  float: left;
  padding-left: 10px;
  display: inline
}

.fotter-contact {
  min-height: 174px
}

.footer h3 {
  background: #10131c;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -khtml-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #090c15;
  color: #68738c;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px
}

.footer .boxInner {
  padding: 0 10px
}

.footer .four span {
  display: inline-block;
  width: 40px;
  text-align: center;
  margin-right: 10px
}

.footer .four .blue {
  color: #1175a7
}

.footer .four .yellow {
  color: #eb8400
}

.footer .four .skyblue {
  color: #0ea7c6
}

.footer .four .orange {
  color: #dd3b0d
}

.footer .four .green {
  color: #5ea618
}

.footer .boxContent {
  background: #0d1019;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -khtml-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  padding: 0 10px
}

.footer .boxContent ul.itemsList li {
  padding: 5px 0;
  border-top: 1px solid #10131c;
  position: relative
}

.footer .boxContent ul.itemsList li:first-child {
  border-top: 0
}

.fotter-contact p {
  font-size: 12px;
  padding-bottom: 5px;
  margin-bottom: 0px
}

.fotter-contact a {
  font-size: 13px;
  text-decoration: none;
  display: inline-block
}

#footer .four.columns.column {
  min-height: 174px
}

#footer .column a {
  font-size: 13px;
  text-decoration: none
}

#footer .column a:hover {
  color: #bbb
}

#footer .three.columns.column {
  min-height: 174px
}

.footer .pageContent {
  font-size: 13px;
  color: rgb(79, 92, 119);
  overflow: hidden;
  zoom: 1;
  padding: 50px 0 40px
}

.footer a,
.footer a:visited {
  color: rgb(79, 92, 119)
}

.footer a:hover,
.footer a:active {
  color: rgb(200, 200, 200);
  text-decoration: none
}

.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 {
  background: #080a13
}

.footerLegal .pageContent {
  font-size: 13px;
  overflow: hidden;
  zoom: 1;
  padding: 30px 0;
  text-align: center
}

.footerLegal .pageContent a:link {
  color: rgb(79, 92, 119)
}

#copyright {
  float: left
}

#legal {
  float: right
}

#legal li {
  display: inline-block;
  margin-left: 10px
}

.tweets .follow {
  float: right;
  background: url('styles/vjl/extra/tweets-logo-01.png') left center no-repeat;
  padding-left: 18px;
  text-transform: none
}

.var-narrow .timeline-header {
  background: #10131c !important;
  -webkit-border-radius: 3px 3px 0 0 !important;
  -moz-border-radius: 3px 3px 0 0 !important;
  -khtml-border-radius: 3px 3px 0 0 !important;
  border-radius: 3px 3px 0 0 !important;
  border-bottom: 1px solid #090c15 !important;
  color: #68738c !important;
  font-family: 'Roboto', sans-serif!important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  padding: 10px !important
}

.descImage {
  float: left;
  margin-right: 10px
}

.boxFooter {
  border: 5px solid #10131c;
  color: #4f5c77;
  padding: 5px 10px 7px
}

@media (max-width:800px) {}

@media (max-width:610px) {
  .pageWidth {
    width: auto !important;
    margin: 0 !important;
    min-width: 0 !important
  }
  #copyright,
  #legal {
    float: none
  }
}

@media (max-width:480px) {
  #copyright,
  #legal {
    float: none !important
  }
  #termsRule,
  #toTop {
    display: none !important
  }
}

Lưu lại là xong.

Chúc các bạn thành công.


Nguồn: xfteam.net​
 

tqhuy

Private
Tham gia
30/05/2017
Bài viết
39
Được Like
8
Làm sao chuyển màu theo màu của forum được bác @PVS
 

NDK

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
Chỉnh màu nền background :
HTML:
.footer {
  background: #090c15;
  clear: both
}
HTML:
.footer h3 {
  background: #10131c;
  -webkit-border-radius: 3px 3px 0 0;
HTML:
.footer .boxContent {
  background: #0d1019;
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

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