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

Thảo luận trong 'Addon, Styling and Customization Questions' bắt đầu bởi hardcore, 14/07/2017.

  1. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    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/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:
      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ã:
      
      
      
      {$article.article_icon.data.filename}'') {$article.article_icon.data.file}

      {xen:helper threadPrefix, $article} {$article.article_title}

    5. Chúc các bác thành công :)
     
    hoangyb, THB, PYX and 7 others like this.
  2. phongtruong

    phongtruong Thượng Đế

    Tham gia:
    12/07/2017
    Bài viết:
    11
    Đã được thích:
    4
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Web:
    tks bác nhiều lắm
     
    THB thích bài này.
  3. phongtruong

    phongtruong Thượng Đế

    Tham gia:
    12/07/2017
    Bài viết:
    11
    Đã được thích:
    4
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Web:
    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
     
    THB thích bài này.
  4. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    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é :)
     
    THB thích bài này.
  5. dinhhai

    dinhhai Thượng Đế

    Tham gia:
    28/07/2015
    Bài viết:
    393
    Đã được thích:
    196
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nơi ở:
    hcm
    Sao mình làm ra lỗi tè le không có hiển thị gì cả bác ơi
     
    THB thích bài này.
  6. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @dinhhai Bạn inbox mình demo hoặc team để mình ktra nhé :)
     
    THB and dinhhai like this.
  7. dinhyen

    dinhyen Thượng Đế

    Tham gia:
    22/05/2017
    Bài viết:
    103
    Đã được thích:
    36
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Web:
    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
     
  8. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    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
     
  9. dinhyen

    dinhyen Thượng Đế

    Tham gia:
    22/05/2017
    Bài viết:
    103
    Đã được thích:
    36
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Web:
    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 ạ
     
  10. dinhhai

    dinhhai Thượng Đế

    Tham gia:
    28/07/2015
    Bài viết:
    393
    Đã được thích:
    196
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nơi ở:
    hcm
    Mình test thử trên localhost bác ạ
     
  11. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
  12. hoangyb

    hoangyb Thượng Đế

    Tham gia:
    20/05/2015
    Bài viết:
    7
    Đã được thích:
    3
    Điểm thành tích:
    3
    Giới tính:
    Nam
    mình cũng k thấy thay đổi gì :(
     
  13. quick87

    quick87 Thượng Đế

    Tham gia:
    10/12/2016
    Bài viết:
    112
    Đã được thích:
    56
    Điểm thành tích:
    28
    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:
    Capture.PNG

    Thanks @hardcore for your sharing nhé :)
     

    Các file đính kèm:

    hardcore thích bài này.
  14. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @quick87 cảm ơn bạn đã giúp mình giải đáp :)
     
    quick87 thích bài này.
  15. hoangyb

    hoangyb Thượng Đế

    Tham gia:
    20/05/2015
    Bài viết:
    7
    Đã được thích:
    3
    Điểm thành tích:
    3
    Giới tính:
    Nam
    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
     
  16. loliloli

    loliloli Thượng Đế

    Tham gia:
    04/09/2016
    Bài viết:
    121
    Đã được thích:
    36
    Điểm thành tích:
    28
    2017-09-13.png
    mình bị lỗi
     
  17. ngaithon

    ngaithon Thượng Đế

    Tham gia:
    13/02/2017
    Bài viết:
    112
    Đã được thích:
    23
    Điểm thành tích:
    18
    Giới tính:
    Nam
    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
     
  18. thodan36a

    thodan36a Thượng Đế

    Tham gia:
    15/09/2017
    Bài viết:
    12
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    hcm
    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
     
    Chỉnh sửa cuối: 31/01/2018
  19. 101010

    101010 Thượng Đế

    Tham gia:
    24/09/2018
    Bài viết:
    4
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    HN
    Cái này dùng cho xen v1 phải không ạ, v2 mình hok thấy nơi để sửa, hihi
     
  20. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    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
     

Chia sẻ trang này