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

Thảo luận trong 'Template Modifications' bắt đầu bởi PVS, 25/07/2016.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,779
    Đã được thích:
    7,039
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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:phrase timing}:
    {xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}
    {xen:phrase memory}:
    {xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}
    {xen:phrase db_queries}:
    {xen:number {$db_queries}}
    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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365-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​
     
    toanthayviet thích bài này.
  2. Le Quan

    Le Quan Thượng Đế

    Tham gia:
    19/02/2016
    Bài viết:
    31
    Đã được thích:
    21
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Xấu quá :))
     
  3. tqhuy

    tqhuy Thượng Đế

    Tham gia:
    30/05/2017
    Bài viết:
    39
    Đã được thích:
    7
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Làm sao chuyển màu theo màu của forum được bác @PVS
     
  4. NDK

    NDK Cộng Sự Đắc Lực

    Tham gia:
    16/03/2015
    Bài viết:
    827
    Đã được thích:
    680
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Nghề nghiệp:
    SEO Executive
    Nơi ở:
    TP.HCM
    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;
     

Chia sẻ trang này