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

[hardcore]

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

      /* --- 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/xenforo/xenforo-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
      

      /* --- 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
      

      <div class="articleItem" id="article_{$article.thread_id}">
        <div class="articleItemSection">
          <div class="subItemHeading singleLine">
            {xen:helper threadPrefix, $article}
            <a href="{xen:link threads, $article}">{$article.article_title}</a>
          </div>
      
      
          <div class="primaryContent">
            <div class="metaData singleLine">
              <span class="statData"><div class="iconKey comments"></div>{xen:number $article.reply_count}</span>
              <span class="statData"><div class="iconKey views"></div>{xen:number $article.view_count}</span>
      
              <span class="dateData">
                          <div class="iconKey sticky"></div>
                          {xen:phrase porta2_by_x_on_y_at_z,
                              'user=<a href="{xen:link members, $article}" class="username">{$article.username}</a>',
                              'date=<a href="{xen:link threads, $article}">{xen:date $article.article_date}</a>',
                              'time=<a href="{xen:link threads, $article}">{xen:time $article.article_date}</a>'}
                      </span>
            </div>
      
      
            <div class="baseHtml excerptContent ">
              <xen:if hascontent="true">
                <div style="text-align: center">
                  <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'attach'">
                      <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage LbImage" />
                      <xen:elseif is="{$article.article_icon.type} == 'image'" />
                      <img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" class="bbCodeImage LbImage" />
                      <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                      <img src="styles/8wayrun/EWRmedio_play.png" class="bbCodeImage LbImage" />
                    </xen:if>
                  </xen:contentcheck>
              </xen:if>
              </div>{xen:raw $article.messageHtml}</div>
          </div>
          <xen:include template="EWRporta2_Article_Categories">
            <xen:map from="$article.categories.cats" to="$categories" />
          </xen:include>
      
        </div>
      </div>

   4. EWRporta2_Global.css
      

      /* --- 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;
        }
      }

4. Hưởng thụ thành quả @pdinh97qng hàng bác hóng đây
5. Bổ sung thêm css sau để fix lỗi vỡ khung trên mobile
   

   @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; }
   }

 

[2L.Ohayo]

Rất hoan nghênh tinh thần chia sẻ.

 

[THB]

cảm ơn nhé.

 

[PVS]

Thanks bác

 

[nminhkhoi]

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 ạ

 

[hardcore]

@nminhkhoi bạn có thể inbox mình demo không ạ ?

 

[hardcore]

@nminhkhoi Bác thử lại code mới xem sao, mình mới thay code nhé

 

[hardcore]

@nminhkhoi cái category kia là category của xenporta nhé

 

[nminhkhoi]

@nminhkhoi Bác thử lại code mới xem sao, mình mới thay code nhé

@nminhkhoi cái category kia là category của xenporta nhé

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]

Trên mobile của em cũng ko như tenmien.trace

 

[hardcore]

@nminhkhoi bác inbox em cái link site bác, em xem cho.

 

[hardcore]

@nminhkhoi em đã có cách giải quyết, bác thêm mấy dòng này vào extra.css

@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; }
}