Hướng dẫn Portal 2 như DesignerVN.Net

hardcore · 14/07/2017

Chào các bác, lâu rồi em mới viết bài mong các bác ủng hộ. Hôm nay, em xin share cái portal 2 của DesignerVN.Net như nhiều bác yêu cầu. Không dài dòng nữa, vào vấn đề luôn.

Yêu cầu
- Addon [8WR] XenPorta 2 (Portal) Pro

Thay toàn bộ template EWRporta2.css bằng code sau:

Mã:

.xenForm .textHeading .selectAll {
    float: right
}
.xenForm .categoryUnit li {
    display: inline-block;
    width: 185px
}
.xenForm .categoryUnit dd {
    padding-right: 0px
}
.authorUnit {}
.authorUnit .authorImage .img {
    display: block;
    float: left;
    width: 150px;
    height: 200px
}
.authorUnit .secondaryContent {
    margin-left: 160px
}
.authorUnit .secondaryContent .name {
    font-size: 28px
}
.authorUnit .secondaryContent .muted {
    margin-bottom: 15px
}
.authorUnit .secondaryContent .controls {
    float: right;
    margin-right: 10px
}
.authorUnit .secondaryContent .avatar {
    float: right
}
.authorUnit {
    zoom: 1
}
.authorUnit:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}
.keyIcon {
    background-image: url('styles/default/xenforo/xenforo-ui-sprite.png');
    background-repeat: no-repeat;
    margin: 0 4px 0 0;
    float: left;
    width: 16px;
    height: 16px
}
.keyIcon.category {
    background-position: 0px 1px;
    margin-top: 3px;
    width: 14px
}
.keyIcon.comments {
    background-position: -65px -16px;
    width: 14px
}
.keyIcon.redirect {
    background-position: -48px -16px;
    margin-top: 3px
}
.keyIcon.sticky {
    background-position: 0px -16px
}
.keyIcon.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
}

Thay toàn bộ template EWRporta2_ArticleList.css bằng code sau:

Mã:

.articleItem {}

.articleItem .subHeading {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.articleItem .metaData {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(236, 236, 236);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.articleItem .metaData .statData {
  margin-left: 10px;
  float: right
}

.articleItem .excerptContent {}

.articleItem .sectionFooter {}

.articleItem .sectionFooter .continue {
  float: right
}

.articleItem .sectionFooter .categories {
  overflow: hidden
}

.articleItem .sectionFooter .categories li {
  display: inline-block
}

.articleItem .primaryContent {
  zoom: 1;
  background-color: white
}

.articleItem .primaryContent:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

.articleItem .sectionFooter {
  zoom: 1
}

.articleItem .sectionFooter:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

.articleItem .dateBlock {
  margin: 10px 10px 0px -20px;
  text-align: center;
  float: left;
  position: relative;
  z-index: 100
}

.articleItem .dateBlock .heading {
  padding-bottom: 5px;
  margin: 0;
  text-transform: uppercase
}

.articleItem .dateBlock .secondaryContent {
  font-weight: bold;
  font-size: 24px;
  padding: 5px
}

.articleItem .excerptOffset {
  margin-left: 32px
}

.articleItem .headerBlock a {
  display: block;
  background-size: 100%;
  line-height: 0
}

@media screen and (max-width:900px) {
  .articleItem .headerBlock a img {
    max-width: 100%;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

.articleItem img {
  min-height: 120px
}

.articleItem .headerBlock a img del {
  max-width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(0%, -25%);
  -ms-transform: translate(0%, -25%);
  -webkit-transform: translate(0%, -25%);
  -ms-transform: translate(0%, -25%);
  transform: translate(0%, -25%)
}


}
.articleItem .messageUserBlock {
  margin-left: 10px;
  float: right
}
.articleItem .messageUserBlock a {
  background-size: 100%;
  display: block;
  line-height: 0
}
.articleItem .messageUserBlock a img {
  max-width: 200px;
  height: auto
}
.ArticlesMason.articlesGrid {
  margin: 5px -5px -5px
}
.ArticlesMason.articlesGrid .articleItem {
  display: inline-block;
  vertical-align: top;
  width: 50%
}
.ArticlesMason.articlesGrid .articleItem .sectionMain {
  margin: 5px
}
@media (max-width:800px) {
  .Responsive .ArticlesMason.articlesGrid .articleItem {}
}
@media (max-width:610px) {
  .Responsive .ArticlesMason.articlesGrid .articleItem {
    width: 100%
  }
}
@media (max-width:480px) {
  .Responsive .ArticlesMason.articlesGrid .articleItem {}
}
.articleControl {
  display: none;
  font-size: 10px;
  text-align: center;
  position: fixed;
  right: 10px;
  bottom: 0;
  z-index: 1000
}
.articleControl .resume {
  display: none
}
.articleControl .resume .muted {
  margin-bottom: 5px
}
#infscr-loading {
  background-color: rgb(255, 255, 255);
  padding: 10px;
  margin: 10px auto;
  border: 1px solid rgb(3, 124, 83);
  border-radius: 10px;
  position: fixed;
  right: 10px;
  bottom: 0;
  z-index: 1001;
  text-align: center
}
@media (max-width:480px) {
  .Responsive .articlesGrid .articleItem .messageUserBlock {
    display: inline-block;
    float: none;
    margin-bottom: 10px;
    white-space: nowrap
  }
}
.articleItem
.textEWR {
  padding: 10px;
}
.articleItem
h6 {
  font-size: .75rem;
  line-height: 18px;
  margin: 0 0 3px;
  text-transform: uppercase;
}
@media (max-width: 800px) {
  .articleItem .headerBlock a
img {
    width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 610px) {
  .articleItem .headerBlock a
img {
    width: 100% !important;
    height: auto !important;
  }
  .articleItem
.textEWR {
    display: none;
  }
  .articleItem
h3 {
    margin-bottom: 10px !important;
  }
  .articleItem
.prefix {
    display: none;
  }
}
.articleItem .headerBlock a
img {
  width: 100% !important;
  height: auto !important;
}
@media (min-width: 768px) {
  .articleItem
img {
    min-height: 250px;
  }
}
.articleItem
h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-size: 1.25rem;
  overflow: hidden;
  line-height: 1.3;
  font-weight: 300;
  margin-bottom: 10px;
}
.articleItem h3
a {
  color: #454545;
}
.articleItem
.primaryContent {
  padding: 10px 15px 10px 15px;
  height: auto;
  border-bottom: none !important;
}
.articleItem
.sectionFooter {
  padding: 0;
}
.articleItem .sectionFooter
.button {
  font-size: 11px;
  line-height: 23px;
  padding: 0px 6px;
  height: 23px;
  display: block;
  border-radius: 0px;
}
@media screen and (max-width: 900px) {
  .headerBlock {
    position: relative;
    color: #fff;
    overflow: hidden;
    position: relative;
  }
}
.headerBlock {
  position: relative;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.headerBlock .post-meta-info {
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.55) 10%,
    rgba(0, 0, 0, 0) 90%
  );
  font-size: 20px;
  color: #fff;
}
.headerBlock .post-meta-date {
  padding: 5px 20px;
}
.headerBlock .post-meta-date
.counter {
  margin-left: 10px;
  line-height: 1 !important;
}
.articleItem
.keyIcon {
  display: none;
}
.articleItem .sectionFooter { background: none; border: none }
.articleItem .textEWR { padding: 5px }
.categories li { display: inline-block }
.categories > li > a { line-height: 2!important }

Thay toàn bộ template EWRporta2_ArticleList_Bit bằng code sau:

Mã:

<xen:require css="EWRporta2_ArticleList.css" />

<div class="articleItem" id="article_{$article.thread_id}">
  <xen:if hascontent="true">
    <div class="headerBlock">
        <xen:contentcheck>
        <xen:if is="{$article.article_icon.type} == 'attach'">
          <a class="attachHolder" href="{xen:link threads, $article}"><img src="//imagizer.imageshack.us/a/img924/3151/lXCkG6.png" style="background: transparent url('{xen:link attachments, $article.article_icon.data}'); background-position: center center;
    background-size: cover" alt="{$article.article_icon.data.filename}'')"/></a>
        <xen:elseif is="{$article.article_icon.type} == 'image'" />
          <a class="attachHolder" href="{xen:link threads, $article}"><img src="//imagizer.imageshack.us/a/img924/3151/lXCkG6.png" alt="{$article.article_icon.data.file}" style="background: transparent url('{$article.article_icon.data.url}'); background-position: center center;
    background-size: cover"/></a>
        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
          <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio, $article.article_icon.data}');"
            href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
            data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
              <img src="styles/8wayrun/EWRmedio_play.png" />
          </a>
        </xen:if>
        </xen:contentcheck>

      <div style="margin-left:20px;top:10px;position: absolute;">
        <xen:include template="EWRporta2_Article_Categories">
                     <xen:map from="$article.categories.cats" to="$categories" />
                </xen:include>
      </div>

      <div class="post-meta-info">

        <div class="post-meta-date">
          <i class="fa fa-clock-o" aria-hidden="true"></i> {xen:time $article.article_date} - {xen:date $article.article_date} <span class="counter" style=""><i class="fa fa-user" aria-hidden="true"></i> {$article.username}</span>
          <span class="counter"><i class="fa fa-eye" aria-hidden="true"></i> {xen:number $article.view_count}</span>
          <span class="counter"><i class="fa fa-comments-o" aria-hidden="true"></i> {xen:number $article.reply_count}</span>
          <div class="textEWR"><i class="fa fa-info" aria-hidden="true"></i> "{xen:raw $article.messageHtml}"</div>
        </div>
      </div>
    </div>
    </xen:if>

    <div class="primaryContent">

      <h3>{xen:helper threadPrefix, $article}
              <a href="{xen:link threads, $article}">{$article.article_title}</a>
    </h3>


      <div class="sectionFooter">     
                <xen:include template="EWRporta2_Article_Categories">
                     <xen:map from="$article.categories.cats" to="$categories" />
                </xen:include>
      </div>
    </div>
</div>

Chúc các bác thành công

phongtruong · 15/07/2017

tks bác nhiều lắm

phongtruong · 15/07/2017

sao e thay rồi mà không thấy đổi gì so với ban đầu nhỉ

hardcore · 16/07/2017

Bạn có thay nhầm style k ? Nếu k thì có thể cho mình demo hoặc team vào inbox nhé

dinhhai · 19/07/2017

Sao mình làm ra lỗi tè le không có hiển thị gì cả bác ơi

hardcore · 20/07/2017

@dinhhai Bạn inbox mình demo hoặc team để mình ktra nhé

dinhyen · 20/07/2017

Bác cho em hỏi. e đã cái porta nhưng ngoài trang chủ tích sang thì nó không hiên thị được ra trang chủ. giờ em phải làm như nào?
E lick vào trang chủ nó k ra được
http://vinajp.com/

hardcore · 20/07/2017

Bạn phải set quyền nhé @dinhyen + promote ra trang chủ kèm hình ảnh thì mới giống designervn.net

dinhyen · 21/07/2017

hardcore nói:
Bạn phải set quyền nhé @dinhyen + promote ra trang chủ kèm hình ảnh thì mới giống designervn.net

Xin bác hướng dẫn giúp em làm sao để nó hiển thị được với. E mới làm nên còn gà anh ạ

dinhhai · 23/07/2017

hardcore nói:
@dinhhai Bạn inbox mình demo hoặc team để mình ktra nhé

Mình test thử trên localhost bác ạ

hardcore · 23/07/2017

@dinhyen @dinhhai hai bác có thể pm fb em để em ktra giúp

fb.com/deleteall00

hoangyb · 10/08/2017

mình cũng k thấy thay đổi gì

quick87 · 11/08/2017

phongtruong nói:
sao e thay rồi mà không thấy đổi gì so với ban đầu nhỉView attachment 21622

dinhhai nói:
Sao mình làm ra lỗi tè le không có hiển thị gì cả bác ơi

hoangyb nói:
mình cũng k thấy thay đổi gì

Các bạn cài thử bản này:

Yêu cầu

Addon [8WR] XenPorta 2 (Portal) Pro

Rồi làm lại theo hướng dẫn của @hardcore.

Mình đã thử và thành công, test trên localhost:

Thanks @hardcore for your sharing nhé

hardcore · 11/08/2017

@quick87 cảm ơn bạn đã giúp mình giải đáp

hoangyb · 12/08/2017

ok tks bạn mình làm ok rồi. Bác cho xin hướng dẫn làm cái header giống + cover với ạ .. tks

loliloli · 14/09/2017

mình bị lỗi

ngaithon · 27/09/2017

chỉnh rồi mà bị lỗi, bấm vô bài viết cái hình cover nó hiện to lắm

thodan36a · 31/01/2018

Mình làm mà không hiện hình ảnh?
cái style forum của DesignerVN.Net là gì vậy nhỉ? mình muốn chia dạng như vậy chứ không phải 1 list từ trên xuống

101010 · 27/09/2018

Cái này dùng cho xen v1 phải không ạ, v2 mình hok thấy nơi để sửa, hihi

dcstylexf · 27/09/2018

Mình đang có bản full trang chủ + diễn đàn của style Designervn.net bạn nào có nhu cầu thì inbox mình nhé, giá cực mềm

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Hướng dẫn Portal 2 như DesignerVN.Net

Sergeant

Private

Private

Sergeant

MasterCorporal

Sergeant

Corporal

Sergeant

Corporal

MasterCorporal

Sergeant

Private

Corporal

Đính kèm

Sergeant

Private

Corporal

Corporal

Private

101010

Khách VNXF

SergeantMajor

Dịch vụ XenForo của VNXF

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

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ