Hướng dẫn Portal 2 TenMien.Trade

Thảo luận trong 'Template Modifications' bắt đầu bởi hardcore, 29/04/2017.

  1. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Nhân dịp em vừa thi học kì xong, lại được nghỉ 30/04 - 01/05 nên em share luôn cái trang chủ của TenMien.Trade. Đây là dạng XenPorta 2, vì vậy các bác lục lọi trong VNXF tìm addon này và cài vào nhé. Vào chủ đề chính luôn
    1. Demo Untitled.png
    2. Đầu tiên, các bác đảm bảo giúp em là đã cài XenPorta 2 Pro nhé.
    3. Tiếp theo, thay các template đây theo code của từng cái:
      1. EWRporta2.css
        Mã:
        /* --- EWRporta2.css --- */
        
        .xenForm .textHeading .selectAll {
          float: right;
        }
        
        .xenForm .categoryUnit li {
          display: inline-block;
          width: 185px;
        }
        
        .xenForm .categoryUnit dd {
          padding-right: 0px;
        }
        
        .authorUnit .authorImage {
          float: left;
        }
        
        .authorUnit .authorImage .img {
          display: block;
          width: 150px;
          height: 200px;
        }
        
        .authorUnit .secondaryContent {
          margin-left: 160px;
        }
        
        .authorUnit .secondaryContent .controls {
          float: right;
          margin-right: 10px;
        }
        
        .authorUnit .secondaryContent .avatar {
          float: right;
        }
        
        .authorUnit .secondaryContent .name {
          font-size: 28px;
        }
        
        .authorUnit .secondaryContent .muted {
          margin-bottom: 15px;
        }
        
        /* clearfix */
        
        .authorUnit {
          zoom: 1;
        }
        
        .authorUnit:after {
          content: '.';
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
        
        .iconKey {
          float: left;
          margin: 0 4px 0 0;
          height: 16px;
          width: 16px;
          background: transparent 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 1000px 0;
        }
        
        .iconKey.category {
          background-position: 0px 1px;
          width: 14px;
        }
        
        .iconKey.sticky {
          background-position: 0px -16px;
        }
        
        .iconKey.redirect {
          background-position: -48px -16px;
        }
        
        .iconKey.redirect {
          background-position: -48px -16px;
        }
        
        .iconKey.comments {
          background-position: -65px -16px;
          width: 14px;
        }
        
        .iconKey.views {
          background-position: -144px -17px;
          width: 18px;
        }
        
        .xenForm .date {
          background-image: url("styles/8wayrun/calendar.png");
          background-position: right center;
          background-repeat: no-repeat;
        }
        
        .copyright {
          text-align: center;
          font-size: 11px;
          margin: 10px;
          clear: both;
        }
      2. EWRporta2_ArticleList.css
        Mã:
        /* --- EWRporta2_ArticleList.css --- */
        
        .articleControl {
          display: none;
          position: fixed;
          right: 10px;
          bottom: 0;
          z-index: 1000;
        }
        
        .articleControl .resume {
          display: none;
        }
        
        .articleControl .resume .muted {
          margin-bottom: 5px;
          font-size: 10px;
          text-align: center;
        }
        
        .articleItem .singleLine {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .articleItem .sectionMain {
          margin-bottom: 10px;
        }
        
        .articleItem .subHeading {
          font-size: 18px;
        }
        
        .articleItem .sectionFooter .iconKey {
          margin-top: 3px;
        }
        
        .articleItem .sectionFooter .continue {
          float: right;
        }
        
        .articleItem .sectionFooter .categories {
          margin-right: 90px;
          overflow: hidden;
        }
        
        .articleItem .sectionFooter .categories li {
          display: inline-block;
        }
        
        /* clearfix */
        
        .articleItem .primaryContent {
          zoom: 1;
        }
        
        .articleItem .primaryContent:after {
          content: '.';
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
        
        /* clearfix */
        
        .articleItem .sectionFooter {
          zoom: 1;
        }
        
        .articleItem .sectionFooter:after {
          content: '.';
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
        
        .articleItem .dateBlock {
          float: left;
          margin: 10px 10px 0px -20px;
          text-align: center;
          position: relative;
          z-index: 100;
        }
        
        .articleItem .dateBlock .heading {
          margin: 0;
          padding-bottom: 5px;
          text-transform: uppercase;
        }
        
        .articleItem .dateBlock .secondaryContent {
          padding: 5px;
          font-weight: bold;
          font-size: 24px;
        }
        
        .articleItem .excerptOffset {
          margin-left: 34px;
        }
        
        .articleItem .headerBlock a {
          display: block;
          background-size: 100%;
          line-height: 0;
        }
        
        .articleItem .headerBlock a img {
          max-width: 100%;
        }
        
        .articleItem .messageUserBlock {
          float: right;
          margin-left: 10px;
        }
        
        .articleItem .messageUserBlock a {
          display: block;
          background-size: 100%;
          line-height: 0;
        }
        
        .articleItem .messageUserBlock a img {
          max-width: 200px;
          height: auto;
        }
        
        .articleItem .metaData {
          margin-bottom: 10px;
          padding-bottom: 5px;
          border-bottom: 1px dashed #f9fbfc;
        }
        
        .articleItem .statData {
          float: right;
          margin-left: 10px;
        }
        
        #infscr-loading {
          position: fixed;
          right: 10px;
          bottom: 0;
          z-index: 1001;
          text-align: center;
          background-color: #f9fbfc;
          padding: 20px;
          margin: 40px auto;
          border: 1px solid #f0f0f2;
          border-radius: 1px;
        }
        
        @media (max-width:610px) {
          .Responsive .articlesGrid .articleItem {
            width: 100%;
          }
        }
        
        @media (max-width:480px) {
          .Responsive .articlesGrid .articleItem .messageUserBlock {
            display: inline-block;
            float: none;
            margin-bottom: 10px;
            white-space: nowrap;
          }
        }
        #articlesGrid {
          border-top: 10px solid #e6e6e6;
          background: url('https://tenmien.trade/styles/intrinsic/extra/bg-recent-content.png') 133px 0 repeat-y;
        }
        
        #articlesGrid .articleItem {
          background: url('https://tenmien.trade/styles/intrinsic/extra/bg-hentry.png') no-repeat 0 35px;
          padding-left: 170px;
          border-bottom: 1px solid #e6e6e6;
          position: relative;
          padding-top: 30px;
          padding-bottom: 30px;
        }
        
        #articlesGrid .subItemHeading {
          font-weight: 400;
          margin-bottom: 10px;
          font-size: 26px;
        }
        
        #articlesGrid .primaryContent {
          padding: 0;
          line-height: 1.6;
        }
        
        #articlesGrid ul.categories {
          position: absolute;
          top: 40px;
          left: 5px;
          font-size: 13px;
          display: inline-flex;
        }
        
        #articlesGrid ul.categories li {
          padding-right: 10px;
        }
        
      3. EWRporta2_ArticleList_Bit
        Mã:
        {xen:helper threadPrefix, $article} {$article.article_title}
        {$article.article_icon.data.filename} {$article.article_icon.data.file}
        {xen:raw $article.messageHtml}
  2. EWRporta2_Global.css
    Mã:
    /* --- EWRporta2_Global.css --- */
    
    .leftContainer {
      float: right;
      margin-left: -310px;
      width: 100%;
    }
    
    .leftContent {
      margin-left: 310px;
    }
    
    .leftSidebar {
      float: left;
    }
    
    .splitWidgets .section:first-child,
    .splitWidgets .sectionMain:first-child {
      margin-top: 0;
    }
    
    .sidebar.noFloats {
      float: none;
      width: auto;
      margin-bottom: 10px;
    }
    
    .sidebar.b-rightWidgets {
      margin-left: 310px;
    }
    
    .sidebar.b-leftWidgets {
      float: left;
    }
    
    .sidebar.footerWidgets {
      clear: both;
    }
    
    /* clearfix */
    
    .splitWidgets {
      zoom: 1;
    }
    
    .splitWidgets:after {
      content: '.';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    
    .copyright {
      text-align: center;
      font-size: 11px;
      margin: 10px;
    }
    
    @media (max-width:800px) {
      .Responsive .leftContainer {
        float: none;
        margin: 0 auto;
      }
      .Responsive .leftContent {
        margin-left: 0;
      }
    }
    
    @media (max-width:610px) {
      .Responsive .sidebar.b-leftWidgets {
        float: none;
        margin: 0 auto;
      }
      .Responsive .sidebar.b-rightWidgets {
        margin-left: 0px;
      }
    }
    
  • Hưởng thụ thành quả :D @pdinh97qng hàng bác hóng đây :)
  • Bổ sung thêm css sau để fix lỗi vỡ khung trên mobile
    Mã:
    @media (max-width:800px)
    {
        .Responsive #articlesGrid {background: none;}
        .Responsive #articlesGrid .articleItem {
            position: relative;
            padding-top: 30px;
            padding-bottom: 30px;
            padding-left: 0px;
            background: none;
        }
        .Responsive #articlesGrid ul.categories { display: none; }
    }
    
  •  
    Chỉnh sửa cuối: 06/05/2017
  • 2L.Ohayo

    2L.Ohayo Cộng Sự Đắc Lực Thành viên BQT

    Tham gia:
    08/03/2015
    Bài viết:
    761
    Đã được thích:
    808
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Rất hoan nghênh tinh thần chia sẻ.
     
    THB thích bài này.
  • THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    cảm ơn nhé.
     
  • PVS

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

    Tham gia:
    28/02/2015
    Bài viết:
    11,755
    Đã được thích:
    7,003
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    Thanks bác :D
     
  • nminhkhoi

    nminhkhoi Thượng Đế

    Tham gia:
    20/02/2017
    Bài viết:
    31
    Đã được thích:
    10
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Làm xong nó ra thế này, không load được Expert text + Danh mục
    Kì lạ em thử mấy template cho articles rồi. cứ trên giao diện Marterial của thằng U.IX là nó ko load được Catogories ( dấu + trong ảnh). Bác nào support em giúp được không ạ
    Screen Shot 2017-05-04 at 21.05.33.png
     
  • hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @nminhkhoi bạn có thể inbox mình demo không ạ ?
     
  • hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @nminhkhoi Bác thử lại code mới xem sao, mình mới thay code nhé
     
    nminhkhoi thích bài này.
  • hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @nminhkhoi cái category kia là category của xenporta nhé
     
    nminhkhoi thích bài này.
  • nminhkhoi

    nminhkhoi Thượng Đế

    Tham gia:
    20/02/2017
    Bài viết:
    31
    Đã được thích:
    10
    Điểm thành tích:
    8
    Giới tính:
    Nam
    dạ em có thử rồi. bực mình lắm. toàn lỗi khó tả với cái frame UI.X này. mới fix được auto logout.
    Lên giao diện mobile còn thảm hoạ hơn. Qua trang tenmien.trade của anh đẹp lung linh.
    Để em thử lại.
    Mà anh ơi em góp ý xíu: sao anh không tối ưu phần Title hiển thì trên Mobile cho nó show hết Title để nó cắt thành ... nhìn thì đẹp nhưng hơi khó chịu. hay có chỗ nào em chưa hiểu khi làm như vậy nhỉ?
     
  • nminhkhoi

    nminhkhoi Thượng Đế

    Tham gia:
    20/02/2017
    Bài viết:
    31
    Đã được thích:
    10
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Trên mobile của em cũng ko như tenmien.trace
    Screenshot_2017-05-05-00-04-04.png
     
  • hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @nminhkhoi bác inbox em cái link site bác, em xem cho.
     
    nminhkhoi thích bài này.
  • hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @nminhkhoi em đã có cách giải quyết, bác thêm mấy dòng này vào extra.css
    Mã:
    @media (max-width:800px)
    {
        .Responsive #articlesGrid {background: none;}
        .Responsive #articlesGrid .articleItem {
            position: relative;
            padding-top: 30px;
            padding-bottom: 30px;
            padding-left: 0px;
            background: none;
        }
        .Responsive #articlesGrid ul.categories { display: none; }
    }
     
    nminhkhoi thích bài này.
  • Chia sẻ trang này