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

hardcore · 29/04/2017

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

Demo
Đầu tiên, các bác đảm bảo giúp em là đã cài XenPorta 2 Pro nhé.

Tiếp theo, thay các template đây theo code của từng cái:

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

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

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>

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

2L.Ohayo · 29/04/2017

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

THB · 29/04/2017

cảm ơn nhé.

PVS · 29/04/2017

Thanks bác

nminhkhoi · 04/05/2017

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 · 04/05/2017

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

hardcore · 04/05/2017

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

hardcore · 04/05/2017

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

nminhkhoi · 04/05/2017

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

hardcore nói:
@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 · 05/05/2017

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

hardcore · 05/05/2017

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

hardcore · 05/05/2017

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

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
K	Help Thêm tiền tố bài viết ra xenportal cho xenforo 2.1	Template Modifications	4	18/05/2019
T	Help Nhờ hỗ trợ về lấy thumnail ra portal	Template Modifications	4	09/02/2018
	Help Tạo widget trong Xenportal 2	Template Modifications	4	08/01/2016

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

hardcore

Sergeant

2L.Ohayo

Moderator

THB

Founder

PVS

Super Moderator

nminhkhoi

Private

hardcore

Sergeant

hardcore

Sergeant

hardcore

Sergeant

nminhkhoi

Private

nminhkhoi

Private

hardcore

Sergeant

hardcore

Sergeant

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT