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

hardcore

Sergeant
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/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
      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ã:
      <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
      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;
        }
      }
  4. Hưởng thụ thành quả :D @pdinh97qng hàng bác hóng đây :)
  5. 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; }
    }
 
Sửa lần cuối:

nminhkhoi

Private
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
 

nminhkhoi

Private
@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ỉ?
 

hardcore

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

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top