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

hardcore

Sergeant
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.
  1. Yêu cầu
    • Addon [8WR] XenPorta 2 (Portal) Pro
  2. 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
    }
  3. 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 }
  4. 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>
  5. Chúc các bác thành công :)
 

phongtruong

Private
sao e thay rồi mà không thấy đổi gì so với ban đầu nhỉ
upload_2017-7-15_20-12-26.png
 
  • Like
Reactions: THB

dinhyen

Corporal
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/
33.png

44.png
 

quick87

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

Sao mình làm ra lỗi tè le không có hiển thị gì cả bác ơ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:
Capture.PNG


Thanks @hardcore for your sharing nhé :)
 

Đính kèm

  • 8wayRun.XenPorta.2.Portal.PRO.v1.2.2b.zip
    343.8 KB · Lượt xem: 31

thodan36a

Private
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
 
Sửa lần cuối:

dcstylexf

Major
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 :D
 

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