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

[PVS]

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:

<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:

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]

Xấu quá )

 

[tqhuy]

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

 

[NDK]

Chỉnh màu nền background :

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

.footer h3 {
  background: #10131c;
  -webkit-border-radius: 3px 3px 0 0;

.footer .boxContent {
  background: #0d1019;