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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
13,862
Được Like
9,941
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

Thượng Đế
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

Thượng Đế
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

Hosting Giá rẻ

hosting free
hosting free
Top Bottom