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

Discussion in 'Template Modifications' started by hardcore, Apr 29, 2017.

  1. hardcore

    hardcore Thượng Đế

    Joined:
    Apr 2, 2015
    Messages:
    431
    Likes Received:
    362
    Trophy Points:
    63
    Gender:
    Male
    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
        Code:
        /* --- 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
        Code:
        /* --- 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
        Code:
        {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
    Code:
    /* --- 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
    Code:
    @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; }
    }
    
  •  
    Last edited: May 6, 2017
  • 2L.Ohayo

    2L.Ohayo Cộng Sự Đắc Lực Staff Member

    Joined:
    Mar 8, 2015
    Messages:
    761
    Likes Received:
    808
    Trophy Points:
    93
    Gender:
    Male
    Rất hoan nghênh tinh thần chia sẻ.
     
    THB likes this.
  • THB

    THB Admin - Founder Staff Member

    Joined:
    Feb 25, 2015
    Messages:
    6,336
    Likes Received:
    3,550
    Trophy Points:
    113
    Gender:
    Male
    Occupation:
    CEO
    Location:
    Bình Dương
    Home Page:
    cảm ơn nhé.
     
  • PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,804
    Likes Received:
    7,062
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    Thanks bác :D
     
  • nminhkhoi

    nminhkhoi Thượng Đế

    Joined:
    Feb 20, 2017
    Messages:
    31
    Likes Received:
    10
    Trophy Points:
    8
    Gender:
    Male
    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 Đế

    Joined:
    Apr 2, 2015
    Messages:
    431
    Likes Received:
    362
    Trophy Points:
    63
    Gender:
    Male
    @nminhkhoi bạn có thể inbox mình demo không ạ ?
     
  • hardcore

    hardcore Thượng Đế

    Joined:
    Apr 2, 2015
    Messages:
    431
    Likes Received:
    362
    Trophy Points:
    63
    Gender:
    Male
    @nminhkhoi Bác thử lại code mới xem sao, mình mới thay code nhé
     
    nminhkhoi likes this.
  • hardcore

    hardcore Thượng Đế

    Joined:
    Apr 2, 2015
    Messages:
    431
    Likes Received:
    362
    Trophy Points:
    63
    Gender:
    Male
    @nminhkhoi cái category kia là category của xenporta nhé
     
    nminhkhoi likes this.
  • nminhkhoi

    nminhkhoi Thượng Đế

    Joined:
    Feb 20, 2017
    Messages:
    31
    Likes Received:
    10
    Trophy Points:
    8
    Gender:
    Male
    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 Đế

    Joined:
    Feb 20, 2017
    Messages:
    31
    Likes Received:
    10
    Trophy Points:
    8
    Gender:
    Male
    Trên mobile của em cũng ko như tenmien.trace
    Screenshot_2017-05-05-00-04-04.png
     
  • hardcore

    hardcore Thượng Đế

    Joined:
    Apr 2, 2015
    Messages:
    431
    Likes Received:
    362
    Trophy Points:
    63
    Gender:
    Male
    @nminhkhoi bác inbox em cái link site bác, em xem cho.
     
    nminhkhoi likes this.
  • hardcore

    hardcore Thượng Đế

    Joined:
    Apr 2, 2015
    Messages:
    431
    Likes Received:
    362
    Trophy Points:
    63
    Gender:
    Male
    @nminhkhoi em đã có cách giải quyết, bác thêm mấy dòng này vào extra.css
    Code:
    @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 likes this.
  • Share This Page