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

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:
   
   Code:

   .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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365-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:
   
   Code:

   .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:
   
   Code:

   
   
   
     
       
   
           
           
             
           
             
           
             
                 
             
           
           
   
         
   
           
                        
                   
         
   
         
   
   
           
   
              {xen:time $article.article_date} - {xen:date $article.article_date}  {$article.username}
              {xen:number $article.view_count}
              {xen:number $article.reply_count}
             
    "{xen:raw $article.messageHtml}"
           
         
       
       
   
       
   
   
         
   {xen:helper threadPrefix, $article}
                 {$article.article_title}
       
   
         
        
                   
                        
                   
         
       
   

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

 

tks bác nhiều lắm

 

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

 

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é

 

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

 

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

 

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/

 

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 ạ

 

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

 

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

 

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

 

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

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é

 

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

 

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

 

mình bị lỗi

 

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

 

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

 

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

 

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