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

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
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
Tham gia
12/07/2017
Bài viết
11
Được Like
4
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

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
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é :)
 
  • Like
Reactions: THB

dinhhai

MasterCorporal
Tham gia
28/07/2015
Bài viết
399
Được Like
198
Sao mình làm ra lỗi tè le không có hiển thị gì cả bác ơi
 
  • Like
Reactions: THB

dinhyen

Corporal
Tham gia
22/05/2017
Bài viết
103
Được Like
36
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
 

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
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
 

quick87

Corporal
Tham gia
10/12/2016
Bài viết
112
Được Like
62
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

hoangyb

Private
Tham gia
20/05/2015
Bài viết
7
Được Like
3
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 :D
 

ngaithon

Corporal
Tham gia
13/02/2017
Bài viết
112
Được Like
23
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

Private
Tham gia
15/09/2017
Bài viết
12
Được Like
1
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:

101010

Private
Tham gia
24/09/2018
Bài viết
4
Được Like
1
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

Major
Tham gia
24/03/2015
Bài viết
2,006
Được Like
1,615
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
 

Top Bottom