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

PVS · 25/07/2016

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.

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

Le Quan · 27/07/2016

Xấu quá

)

tqhuy · 23/08/2017

Làm sao chuyển màu theo màu của forum được bác @PVS

NDK · 23/10/2017

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;

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
	Other 2x Hỏi cách thêm footer vào theme	Template Modifications	10	04/04/2023
O	Help Giúp em cách sửa giao diện trong forum giống voz và otosaigon	Template Modifications	16	30/07/2020
H	Hướng dẫn Cách làm thống kê tin dạng tabs	Template Modifications	6	02/12/2018
	Other Cách làm OUR PARTNERS đẹp và đầy đủ Responsive	Template Modifications	1	25/07/2016
	Cách làm categories trong xenforo	Template Modifications	1	17/07/2015

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

PVS

Super Moderator

Le Quan

Private

tqhuy

Private

NDK

MasterSergeant

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT